javascriptで“動く”tween animation -入門-

JavaScript

-入門-Tween Animation

マーケティングソリューションカンパニー開発本部エクスペリエンスデザイン部テクノロジーデザイン

上村裕樹

“動く”

Hiroki Uemura

at Yahoo! Japan since 2011 -

Web Designer / Frontend Engineer

上村裕樹

JavaScript

-入門-Tween Animation

で“動く”

今日のお題目

• トゥイーンアニメーションってなに？ • イージングって何？

今日のお題目

• Webでの実践 • CSS Transition / Css Animationで実践してみる • jQueryで実践してみる • jQuery以外のライブラリを試してみる

• Web Animations APIを試してみる

基本編

実践編

UI Animation主にDOMアニメーションについて

動きのデザインの重要性が増している

動きのデザインMaterial Design

http://www.google.com/design/spec/animation/meaningful-transitions.html

Polymer

https://www.polymer-project.org/platform/web-animations.html

Hamburger Menu Animation

動きのデザイン　例:

https://dribbble.com/shots/1696129-Menu-Transition?list=searches&offset=29

Tween Animationトゥイーン・アニメーション

A B移動

とは

A B間の動きを補間する技術

移動 / 拡大 / 変形 / 色

とは

間の動きを補間する技術

トゥイーン・アニメーションによって実現したい世界

わかりやすい気持ちいい

EASINGイージング

気持ちいいアニメーションのための重要キーワード

EASINGイージング

フレーム間の変化の加速／減速

アニメーションのリズムが調整できる

イージング関数の代表例

linear 加速減速なし

ease-out　徐々に減速

ease-in 徐々に加速

イージング関数の代表例

http://www.robertpenner.com/easing/ http://easings.net/ja

Tween Animation実践してみる

Web開発で

CSS Animation/Transition

JavaScript+

CSS Transition

div { left : 0; transition: .3s left ease-out;}!div:hover { left : 500px;}!!

left:0; left:500px;

CSS Animation

JavaScript ( jQuery )CSSdiv { left : 0;}!div.start { animation: tween .3s ease-out;}!@keyframes tween { from {left : 0;} to {left: 500px;}}!!

$("div").on("click", function(){ $(this).addClass("start");});

left:0; left:500px;

CSS Transition CSS Animation

animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state

transition-property　transition-duration transition-timing-function transition-delay

キーフレームを指定してタイムラインを書くように細かなアニメーション制御が可能

ある状態からある状態への変化

CSS Transition / Animation 課題

IE9 以下が対応していない

複雑なアニメーションに弱い・チェインの概念がない・同期処理、制御がずれる

IE8、IE9はブラウザシェアがかなり高い

jQuery.animate()

jQuery

left:0; left:500px;

$("div").on("click", function(){ $("div").animate( { left : 500 }, 300, "ease-out");});

jQuery.animate() 課題

パフォーマンスに難あり・レイアウトスラッシングを引き起こす・リクエストアニメーションフレームを　使用していない

※ http://0-9.sakura.ne.jp/pub/lt/modest/start.html　

※ http://wilsonpage.co.uk/preventing-layout-thrashing/　

見えてきた課題

クロスブラウザ複雑なアニメーションパフォーマンス

Tween Animation おすすめJSライブラリ

クロスブラウザ複雑なアニメーションパフォーマンス

velocity.js http://julian.com/research/velocity/

多機能 MIT

TweenMax (GSAP) http://greensock.com/tweenmax

多機能・変形有り一部有償

tween.js https://github.com/sole/tween.js/

シンプル MIT

Tween Animation おすすめJSライブラリ

Velocity.jshttp://julian.com/research/velocity/

Velocity.js

• jQuery.animate()と互換性がある • 単独でも使える • jQueryのパフォーマンスの難題点が

クリアされている • 簡単に実装できる上、機能も豊富 • おすすめ

http://julian.com/research/velocity/

JavaScript

$elem.velocity({ left: 500}, { duration: 300, easing: "ease-out"});

TweenMaxhttp://greensock.com/gsap

TweenMax

• ActionScriptで有名だったトゥイーンライブラリがJavaScriptに対応したもの

• 一部有償 • CSS transformの値を、個別に設定す

る事が可能で、(例えばscaleとrotate)アニメーションが組み合わせて表示される

• demo JavaScript

http://greensock.com/gsap

TweenMax.to(elem, 0.3, { left:500, ease:"easeOut"});

tween.jshttps://github.com/sole/tween.js

tween.js

• CreateJSのTweenJSではない • チェイン機能やイージング関数などの

基本的な内容は揃っている • 実際のスタイル描画のところは、

自身で更新処理を記載する • 条件分岐や組み合わせなどがしやすい

https://github.com/sole/tween.js

JavaScript

var tween = new TWEEN.Tween( { left: 0 } ) .to( { left: 500 }, 300 ) .easing( TWEEN.Easing.Elastic.InOut ) .onUpdate( function () { elem.style.left = left + "px"; } ) .start();

スタイルのアップデートのパフォーマンス

スタイル設定時の描画コストについて、複数スタイルの設定時、必ずしもcssTextがパフォーマンスが優れているわけではない

for (var i=0; i<100; i++) { el = elems[i][0]; el.style.width = (i%10)+"px"; el.style.height = (i%10)+"px";}

for (var i=0; i<100; i++) { el = elems[i][0]; text = ‘width:’ +(i%10)+'px;'; + ‘height:' +(i%10)+'px;'; el.style.cssText = text;}

cssTextで一括設定する場合styleでひとつずつ設定する場合

http://jsperf.com/style-vs-csstext-vs-setattribute/11

スタイルのアップデートのパフォーマンス

おすすめの書き方、styleでまとめて設定する

http://jsperf.com/style-vs-csstext-vs-setattribute/11

for (var i=0; i<100; i++) { el = elems[i][0]; text = 'width:' +(i%10)+'px;'; + 'height:' +(i%10)+'px;'; el.style = text;}

Web Animations API

• 元々Polymer用に作られていた • W3C Editors Draft • 最新のChrome/Operaなどで使用可能

（polyfill用にweb-animations-jsを使用すればモダンなFirefoxなどでも使用可能）

• https://github.com/web-animations/web-animations-js

• 書き方はCSS Animationに似ている • SVGアニメーションも可能 • その他機能豊富 • PolyfillのサポートはIE10以上

JavaScript

http://w3c.github.io/web-animations/

elem.animate([ {left: 0}, {left: 500}], { fill: 'forwards', duration: 300, easing : "ease-out"});

トゥイーン・アニメーション極意

1. 要件に合わせてライブラリ/手法を選ぶ

2. 程よく、入れ込み過ぎ無い

3. リズムや流れ、タイミングを意識する

トゥイーン・アニメーション極意

ご清聴ありがとうございました

javascriptで“動く”tween animation -入門-

Technology

javascript - kontentblue pub · นั่นเอง...

küschall ksl - tween-europe.com

jquery - javascript para quem não sabe javascript

thassio ramon vieira lucena - goconqr · 2019. 11. 15. ·...

javascript und security - javascript days 2013 berlin

optimasi komposisi tween 80 dan propilen...

javascript: introducción -...

optimasi tween 80 sebagai emulsifying agent dan … ·...

pengaruh penambahan surfaktan tween 80 …

evaluasi efek tween 80 dan span 80 dalam sediaan krim

uvod u javascript -...

surfaktan tween

optimasi setil alkohol dan tween 80 dalam krim

pengaruh konsentrasi tween 80 dan panjang rantai lipid...

tween animation by neneng

flash image animation sound movie script idea animation

diktat javascript 2012 -...

javascript - wikimedia commons ·...

o fenÔmeno tween: as formações discursivas através da...

javascript robotics: nodebots, javascript além das telas