6_3 よいアニメーションにするには?

よくできたアニメーション、つまり、スタート時にはもたもたせずにすぐ始まり、ヌルヌル動く(60fpsを維持する)アニメーションにするための、いくつかの技術的な方策が提案されています。

再レイアウトをともなわないCSSプロパティを使用する

transformプロパティを使用する。たとえば要素の右への移動アニメーションを行う場合には、再レイアウトをともなうleftでなく、transform:translateX()を使用する。

カラーアニメーションには再レイアウトはともなわないので、移動アニメーションではなく、colorやopacityを使ったカラーのアニメーションを検討する。

position:abusolute;を適用する

移動アニメーションの場合、他の要素への影響を抑えることができる。

translateZ(0)、translate3d(0, 0, 0)を記述しておく

移動アニメーションの場合、要素に適用するCSSクラスにtranslateZ(0)、translate3d(0, 0, 0)を記述しておくと、要素は自動的にブラウザのGPUレイヤーに送られる。GPUレイヤーでは物事が高速に処理されるので、描画も速くなる。ただし使い過ぎは逆効果。

transformとopacityプロパティの処理は、ブラウザのコンポジターと呼ばれる、レイヤーを合成する部分で行われます。

will-changeプロパティの使用を検討する

will-changeプロパティは、前もって要素をGPUレイヤーで扱うようにする働きを持つ。まだW3C草案段階ではあるが、新しいブラウザでの実装は進んでいる。

JavaScriptでなく、CSSアニメーションを使用する(一長一短がある)

JavaScriptを使用すると、非常に自由にアニメーションが作成できるが、その命令はメインスレッド(コンピュータの命令が実行される1本の大通り)で実行されるので、そこが混雑したとき、アニメーションはかくかくする。

これに対し、CSSのアニメーションはブラウザネイティブの機能なので、アニメーションは初めから最適化されて実行され、かくかくすることはない。しかし、あらかじめ予定されているタイプのアニメーションなので、JavaScriptのような自由でダイナミックな表現力に欠ける

JavaScriptのWeb Workerの使用を検討する

Web WorkerはJavaScriptをメインスレッドでない、舞台裏で実行する、新しい技術。しかし実装はそう簡単ではない。

新しいWeb Animations APIの使用を検討する

Web Animations APIはJavaScriptとCSS両方の良さをミックスした新しい方法で、現在、ChromeとFirefoxブラウザで実装されている。

用途によってJavaScriptとCSSアニメーションを使い分ける

  • 単純で自己完結するアニメーションにはCSSを使用する。
  • 細かく制御する場合には、JavaScriptを使用する。
  • アニメーションシーン全体を調整する場合には、requestAnimationFrame()を使用する。
  • jQueryのanimate()やGreenSockのTweenMaxなど、JavaScriptライブラリのアニメーション機能を利用する。
  • CSSとJavaScriptの長所を合わせ持つWeb Animations APIを使用する。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA