Successfully reported this slideshow.
Your SlideShare is downloading. ×

アニメーション(のためのパフォーマンス)の基礎知識

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 20 Ad

More Related Content

Viewers also liked (20)

Advertisement

Similar to アニメーション(のためのパフォーマンス)の基礎知識 (20)

Advertisement

Recently uploaded (20)

アニメーション(のためのパフォーマンス)の基礎知識

  1. 1. アニメーションの基礎知識 おのうえ (@_likr) ためのパフォーマンスの
  2. 2. 自己紹介 • おのうえ ( @_likr ) • 可視化の研究とかやってる • ng-kyotoとGDG Kobeでスタッフやってる • D3.js、Angular、Reactとかやってる
  3. 3. アニメーション? • アニメーションとは何かは他の人が
 説明してくれたと期待している
  4. 4. 16
  5. 5. 16.666…
  6. 6. 1000 / 60 = 16.666…
  7. 7. 1000 / 60 = 16.666… ミリ秒 FPS
 (フレーム/秒) ミリ秒/フレーム
  8. 8. アニメーション 16ミリ秒毎に画面を
 更新し続けること! =
  9. 9. 60FPS? • 人間が認識できる時間解像度 • ブラウン管の技術に由来 • RAIL Performance Model
 https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail
  10. 10. 16ミリ秒? • 2.8GHz CPU - 44,800,000 clocks • DDR3-1866 RAM - 238,933,333B transfer • HDMI 2.0 - 36,000,000B transfer (> 3840x2860x4) • 1000BASE-T Ethernet - 2,000,000B transfer
  11. 11. 16ミリ秒毎に処理する
  12. 12. setInterval?
  13. 13. requestAnimationFrame!
  14. 14. requestAnimationFrame • 最大フレームレートが60FPS程度になるように
 いい感じにスケジュールしてくれる • 処理が遅い場合はフレームレートが落ちる • アクティブじゃないタブでは更新頻度を落とす
  15. 15. 実装例 https://jsfiddle.net/oLm1wkzy/ 各フレームの処理 開始時刻と現在時刻から
 進行度を判断
  16. 16. チューニング • レンダリングパイプライン • JavaScript • Style • Layout • Paint • Composite https://developers.google.com/web/fundamentals/performance/rendering/
  17. 17. 本格的な実装 • jQuery • $(element).animate() • D3.js • d3.select(element).transition().attr(…) • velocity.js • …
  18. 18. よく使うパラメータ • delay • 何秒後にアニメーションを開始するか • duration • 何秒間かけてアニメーションするか • timing function (easing) • 時間と変化の度合いの関係 • http://easings.net/
  19. 19. もっと楽に… • CSS Animations / CSS Transitions • CSSを書くだけでアニメーションできる • Web Animations • アニメーションの同期などができる • web-animations.js (polyfill)
 https://github.com/web-animations/web-animations-js
  20. 20. まとめ • どんなアニメーションも画面を高速に更新してるだけ • 16ミリ秒は短いようで長い • 実際の検討はCSS Animations / CSS Transitions
 → Web Animations → requestAnimationFrameの順で

×