Webフロントエンドでアニメーションする話

1. アニメーションの基礎知識
おのうえ (@_likr)
ためのパフォーマンスの

2. 自己紹介
• おのうえ ( @_likr )
• 可視化の研究とかやってる
• ng-kyotoとGDG Kobeでスタッフやってる
• D3.js、Angular、Reactとかやってる

3. アニメーション？
• アニメーションとは何かは他の人が
説明してくれたと期待している

4. 16

5. 16.666…

6. 1000 / 60 = 16.666…

7. 1000 / 60 = 16.666…
ミリ秒 FPS
(フレーム/秒)
ミリ秒/フレーム

8. アニメーション
16ミリ秒毎に画面を
更新し続けること！
＝

9. 60FPS？
• 人間が認識できる時間解像度
• ブラウン管の技術に由来
• RAIL Performance Model
https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail

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. 16ミリ秒毎に処理する

12. setInterval？

13. requestAnimationFrame！

14. requestAnimationFrame
• 最大フレームレートが60FPS程度になるように
いい感じにスケジュールしてくれる
• 処理が遅い場合はフレームレートが落ちる
• アクティブじゃないタブでは更新頻度を落とす

15. 実装例
https://jsfiddle.net/oLm1wkzy/
各フレームの処理
開始時刻と現在時刻から
進行度を判断

16. チューニング
• レンダリングパイプライン
• JavaScript
• Style
• Layout
• Paint
• Composite
https://developers.google.com/web/fundamentals/performance/rendering/

17. 本格的な実装
• jQuery
• $(element).animate()
• D3.js
• d3.select(element).transition().attr(…)
• velocity.js
• …

18. よく使うパラメータ
• delay
• 何秒後にアニメーションを開始するか
• duration
• 何秒間かけてアニメーションするか
• timing function (easing)
• 時間と変化の度合いの関係
• http://easings.net/

19. もっと楽に…
• CSS Animations / CSS Transitions
• CSSを書くだけでアニメーションできる
• Web Animations
• アニメーションの同期などができる
• web-animations.js (polyfill)
https://github.com/web-animations/web-animations-js

20. まとめ
• どんなアニメーションも画面を高速に更新してるだけ
• 16ミリ秒は短いようで長い
• 実際の検討はCSS Animations / CSS Transitions
→ Web Animations → requestAnimationFrameの順で