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の順で