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

JavaScript

-入門-Tween Animation

で

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

上村裕樹

“動く”

Hiroki Uemura

at Yahoo! Japan since 2011 -

Web Designer / Frontend Engineer

上村裕樹

Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

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

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

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

Hamburger Menu Animation


動きのデザイン　例:

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

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

http://www.robertpenner.com/easing/

http://easings.net/ja


Tween Animation実践してみる

Web開発で


CSS Animation/Transition

JavaScript+


CSS Transition

CSS

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.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/　

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ライブラリ

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

http://greensock.com/tweenmax

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


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



Velocity.js

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

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


JavaScript

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



TweenMaxhttp://greensock.com/gsap

http://greensock.com/gsap


TweenMax

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

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

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

• demo JavaScript


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


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"});

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

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


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


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

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

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

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

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

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

Technology