javascriptで“動く”tween animation -入門-
TRANSCRIPT
![Page 1: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/1.jpg)
JavaScript
-入門-Tween Animation
で
マーケティングソリューションカンパニー 開発本部 エクスペリエンスデザイン部 テクノロジーデザイン
上村 裕樹
“動く”
![Page 2: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/2.jpg)
Hiroki Uemura
at Yahoo! Japan since 2011 -
Web Designer / Frontend Engineer
上村 裕樹
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
![Page 3: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/3.jpg)
JavaScript
-入門-Tween Animation
で“動く”
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
今日のお題目
![Page 4: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/4.jpg)
• トゥイーンアニメーションってなに? • イージングって何?
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
今日のお題目
• Webでの実践 • CSS Transition / Css Animationで実践してみる • jQueryで実践してみる • jQuery以外のライブラリを試してみる
• Web Animations APIを試してみる
基本編
実践編
![Page 5: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/5.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
UI Animation主にDOMアニメーションについて
![Page 6: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/6.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
動きのデザインの 重要性が増している
![Page 7: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/7.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
動きのデザインMaterial Design
http://www.google.com/design/spec/animation/meaningful-transitions.html
Polymer
https://www.polymer-project.org/platform/web-animations.html
![Page 8: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/8.jpg)
Hamburger Menu Animation
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
動きのデザイン 例:
https://dribbble.com/shots/1696129-Menu-Transition?list=searches&offset=29
![Page 9: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/9.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tween Animationトゥイーン・アニメーション
![Page 10: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/10.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tween Animationトゥイーン・アニメーション
A B移動
![Page 11: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/11.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tween Animationトゥイーン・アニメーション
とは
A B間の動きを補間する技術
![Page 12: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/12.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tween Animationトゥイーン・アニメーション
移動 / 拡大 / 変形 / 色
とは
間の動きを補間する技術
![Page 13: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/13.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
トゥイーン・アニメーション によって実現したい世界
わかりやすい気持ちいい
![Page 14: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/14.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
EASINGイージング
気持ちいいアニメーションのための重要キーワード
![Page 15: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/15.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
EASINGイージング
フレーム間の変化の加速/減速
アニメーションのリズムが調整できる
![Page 16: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/16.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
イージング関数の代表例
linear 加速減速なし
ease-out 徐々に減速
ease-in 徐々に加速
![Page 17: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/17.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
イージング関数の代表例
http://www.robertpenner.com/easing/ http://easings.net/ja
![Page 18: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/18.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tween Animation実践してみる
Web開発で
![Page 19: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/19.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
CSS Animation/Transition
JavaScript+
![Page 20: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/20.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
CSS Transition
CSS
div { left : 0; transition: .3s left ease-out;}!div:hover { left : 500px;}!!
left:0; left:500px;
![Page 21: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/21.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
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;
![Page 22: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/22.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
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
キーフレームを指定してタイムラインを 書くように細かなアニメーション制御が可能
ある状態からある状態への変化
![Page 23: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/23.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
CSS Transition / Animation 課題
IE9 以下が対応していない
複雑なアニメーションに弱い・チェインの概念がない ・同期処理、制御がずれる
IE8、IE9はブラウザシェアがかなり高い
![Page 24: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/24.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
jQuery.animate()
![Page 25: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/25.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
jQuery.animate()
jQuery
left:0; left:500px;
$("div").on("click", function(){ $("div").animate( { left : 500 }, 300, "ease-out");});
![Page 26: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/26.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
jQuery.animate() 課題
パフォーマンスに難あり・レイアウトスラッシングを引き起こす ・リクエストアニメーションフレームを 使用していない
※ http://0-9.sakura.ne.jp/pub/lt/modest/start.html
※
※ http://wilsonpage.co.uk/preventing-layout-thrashing/
![Page 27: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/27.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
見えてきた課題
クロスブラウザ 複雑なアニメーション パフォーマンス
![Page 28: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/28.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tween Animation おすすめJSライブラリ
クロスブラウザ 複雑なアニメーション パフォーマンス
![Page 29: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/29.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
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ライブラリ
![Page 30: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/30.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Velocity.jshttp://julian.com/research/velocity/
![Page 31: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/31.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Velocity.js
• jQuery.animate()と互換性がある • 単独でも使える • jQueryのパフォーマンスの難題点が
クリアされている • 簡単に実装できる上、機能も豊富 • おすすめ
http://julian.com/research/velocity/
JavaScript
$elem.velocity({ left: 500}, { duration: 300, easing: "ease-out"});
![Page 32: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/32.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
TweenMaxhttp://greensock.com/gsap
![Page 33: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/33.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
TweenMax
• ActionScriptで有名だったトゥイーンライブラリがJavaScriptに対応したもの
• 一部有償 • CSS transformの値を、個別に設定す
る事が可能で、(例えばscaleとrotate)アニメーションが組み合わせて表示される
• demo JavaScript
http://greensock.com/gsap
TweenMax.to(elem, 0.3, { left:500, ease:"easeOut"});
![Page 34: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/34.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
tween.jshttps://github.com/sole/tween.js
![Page 35: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/35.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
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();
![Page 36: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/36.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
スタイルのアップデートのパフォーマンス
スタイル設定時の描画コストについて、複数スタイルの設定時、必ずしも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
![Page 37: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/37.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
スタイルのアップデートのパフォーマンス
おすすめの書き方、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;}
![Page 38: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/38.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Web Animations API
![Page 39: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/39.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
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"});
![Page 40: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/40.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
トゥイーン・アニメーション極意
![Page 41: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/41.jpg)
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
1. 要件に合わせてライブラリ/手法を選ぶ
2. 程よく、入れ込み過ぎ無い
3. リズムや流れ、タイミングを意識する
トゥイーン・アニメーション極意
![Page 42: JavaScriptで“動く”Tween Animation -入門-](https://reader030.vdocuments.mx/reader030/viewer/2022032615/55a2c6361a28ab77158b477b/html5/thumbnails/42.jpg)
ご清聴ありがとうございました