Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScriptで“動く”Tween Animation -入門-

2,863 views

Published on

2014/12/15の勉強会にて発表された資料です。

SCRIPTY#2 ~フロントエンド紳士・淑女のための勉強会~
http://scripty.connpass.com/event/10345/

Published in: Technology
  • Be the first to comment

JavaScriptで“動く”Tween Animation -入門-

  1. 1. JavaScript -入門- Tween Animation で マーケティングソリューションカンパニー 開発本部 エクスペリエンスデザイン部 テクノロジーデザイン 上村 裕樹 “動く”
  2. 2. Hiroki Uemura at Yahoo! Japan since 2011 - Web Designer / Frontend Engineer 上村 裕樹 Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
  3. 3. JavaScript -入門- Tween Animation で“動く” Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 今日のお題目
  4. 4. • トゥイーンアニメーションってなに? • イージングって何? Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 今日のお題目 • Webでの実践 • CSS Transition / Css Animationで実践してみる • jQueryで実践してみる • jQuery以外のライブラリを試してみる • Web Animations APIを試してみる 基本編 実践編
  5. 5. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 UI Animation 主にDOMアニメーションについて
  6. 6. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 動きのデザインの 重要性が増している
  7. 7. 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
  8. 8. Hamburger Menu Animation Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 動きのデザイン 例: https://dribbble.com/shots/1696129-Menu-Transition?list=searches&offset=29
  9. 9. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Tween Animation トゥイーン・アニメーション
  10. 10. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Tween Animation トゥイーン・アニメーション A B移動
  11. 11. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Tween Animation トゥイーン・アニメーション とは A B 間の動きを補間する技術
  12. 12. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Tween Animation トゥイーン・アニメーション 移動 / 拡大 / 変形 / 色 とは 間の動きを補間する技術
  13. 13. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 トゥイーン・アニメーション によって実現したい世界 わかりやすい 気持ちいい
  14. 14. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 EASING イージング 気持ちいいアニメーションのための 重要キーワード
  15. 15. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 EASING イージング フレーム間の変化の加速/減速 アニメーションのリズムが調整できる
  16. 16. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 イージング関数の代表例 linear 加速減速なし ease-out 徐々に減速 ease-in 徐々に加速
  17. 17. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 イージング関数の代表例 http://www.robertpenner.com/easing/ http://easings.net/ja
  18. 18. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Tween Animation 実践してみる Web開発で
  19. 19. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 CSS Animation/Transition JavaScript +
  20. 20. 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;
  21. 21. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 CSS Animation JavaScript ( jQuery )CSS div { 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;
  22. 22. 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 キーフレームを指定してタイムラインを 書くように細かなアニメーション制御が可能 ある状態からある状態への変化
  23. 23. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 CSS Transition / Animation 課題 IE9 以下が対応していない 複雑なアニメーションに弱い ・チェインの概念がない ・同期処理、制御がずれる IE8、IE9はブラウザシェアがかなり高い
  24. 24. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 jQuery.animate()
  25. 25. 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"); });
  26. 26. 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/ 
  27. 27. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 見えてきた課題 クロスブラウザ 複雑なアニメーション パフォーマンス
  28. 28. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Tween Animation おすすめJSライブラリ クロスブラウザ 複雑なアニメーション パフォーマンス
  29. 29. 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ライブラリ
  30. 30. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Velocity.js http://julian.com/research/velocity/
  31. 31. 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" });
  32. 32. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 TweenMax http://greensock.com/gsap
  33. 33. 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"});
  34. 34. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 tween.js https://github.com/sole/tween.js
  35. 35. 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();
  36. 36. 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
  37. 37. 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; }
  38. 38. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Web Animations API
  39. 39. 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" });
  40. 40. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 トゥイーン・アニメーション極意
  41. 41. Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 1. 要件に合わせてライブラリ/手法を選ぶ 2. 程よく、入れ込み過ぎ無い 3. リズムや流れ、タイミングを意識する トゥイーン・アニメーション極意
  42. 42. ご清聴ありがとう ございました

×