Volocity.jsを使ってアニメーションのパフォーマンスを比較してみた
CSS vs. JS Animation: Which is Faster?
CSS AnimationよりもJavascriptを使った方がパフォーマンスが出るよ、というこの記事を見たので実際に試してみた。
結論
アニメーションさせる時は、Velocity.jsを使いましょう
デモ
DEMO1 - 画面下からスクロールインしてくるモーダルウィンドウ
DEMO2 - 120個の丸が一度に動く、シンプルなアニメーション
機能比較
| ライブラリ | 特徴 | メリット |
|---|---|---|
jQuery(animate()) |
標準で組み込まれているアニメーションライブラリ | ライブラリの読み込み不要 |
| Velocity.js | 標準のanimate()と同じ文法で使える拡張ライブラリ |
スピード最適化された実装 |
| Transit | CSS Animationを制御するためのライブラリ | 3d-transformも使用可能 |
結果
Windows7とMac Book AirのChromeでテスト。
| ライブラリ | DEMO1 | DEMO2 |
|---|---|---|
jQuery(animate()) |
△ 動きに引っかかりが発生 | × 動きがずれる |
| Velocity.js | ◎ なめらか | ◎ なめらか |
| Transit | ○ なめらかだが一瞬ひっかかる | ○ 動きのステップが大きい |
結果はValocity.jsが圧倒。特にDEMO2でのスムーズさは他を圧倒。
requestAnimationFrameを使用していて、ちゃんとフレーム毎に再描画されるのでスムーズさが違います。
GPUが使えないスマートフォンで見ると、さらに違いが顕著。
解説
Velocity.jsがスムーズな一番の理由はrequestAnimationFrameを使っている事。これはブラウザが画面の再描画のタイミングで呼ばれるフックになっていてきちんとフレーム毎に再描画されるようになり、そのおかげでスピード以上に自然な動きに見えるようになります。その他にも効率化のために色々やっているので、使わない手はありません。既存のanimate()との互換性もあり、呼び出しをvelocity()と書き換えるだけで問題なく動作するようです。
個人的にびっくりしたのはCSSアニメーションがそこまで早くないという事。ブラウザがネイティブで最適化できるんだから一番早いはず！というのは思い込みだったようです。とはいえ、3d-transformをアニメーションさせるにはCSSアニメーション必須なので、使い分けですね。
あと、Transitはアニメーションの終了をフックできません（多分 コメントいただきましたがjQueryアニメーションと同じ文法で書けると明記されていました）。リアクションとしての動きだけなら問題ないけれど、インタラクティブなアニメーションをさせる場合、実装ががやや面倒くさくなりますね。
CSS Animationを使用するタイミング
元記事にも有りますが、シンプルなアニメーションで管理をすべてcssファイルで一元管理できるならあり、とのこと。大量の要素を一度に動作させない限りパフォーマンスも悪くないので、使用する事自体は問題ないでしょう。個人的には飾り的な（なくてもいい）アニメーションはCSS、インタラクションに関連する必須なアニメーションはVelocity.jsを使うのがオススメです。
My recommendation is to use raw CSS transitions when you're exclusively developing for mobile and your animations consist solely of simple state changes. In such circumstances, transitions are a performant and native solution that allow you to retain all animation logic inside your stylesheets and avoid bloating your page with JavaScript libraries. However, if you're designing intricate UI flourishes or are developing an app with a stateful UI, always use an animation library so that your animations remain performant and your workflow remains manageable. One library in particular that does a fantastic job at managing CSS transitions is Transit.
結論ふたたび
コストはたったの8kだけなので、Velocity.jsを使いましょう。
互換性もあるので、不具合あってもすぐに戻せるし。
