Webのアニメーションチューニングまとめ

Webのアニメーションチューニングまとめ:

webにゴリゴリのアニメーションつけると死にそうになる

これは私の日々の悩みでございます。一体何番煎じかと思いますが、備忘録としてまとめておきます。

こんな人に読んでほしい

• フロントエンドエンジニアの人
• アニメーション使い倒したい人

アプローチ方法

簡単に言えば、きゅー●ー3分クッキングがなぜ3分尺で出来るのか考えようってことです。明らかにその場で全部処理をしたら絶対に3分じゃできないことを、あの番組はやってのけるわけですね。

1.画像サイズを縮小する

画像を使っている場合はまずここを見直します。ガッタガタで動作ゲキオモのときも、画像を圧縮すればだいたいある程度動くようになります。

2.リアルタイム計算量を減らす

デザインが完全に固まっていて、これ以上デザイン的な変更が無いだろうという段階でやってほしいことです。

例えば、画像にブラーかけて黒み入れてトランスフォームアニメーションさせてるみたいなケースを想像してみてください。

img { 
  position:absolute; 
  blur:10px; 
  transition: transform 300ms ease; 
  z-index:0; 
} 
img:hover{ 
  transform: scale(1.5); 
} 
/* imgの上に被ってる要素として */ 
.img-cover{ 
  position:absolute; 
  width:... 
  height:... 
  background-color:rgba(0,0,0,0.5); 
  z-index:1; 
} 

これは画像処理をその場でやろうとしていますね。

分解してみると、処理は

• 画像処理
• アニメーション

の二つに分けられます。問題なのは画像処理計算です。これは加工済みの画像を予め用意してしまうのがベストです。きゅー●ー3分クッキングでよく見るアレですね。

Safariやchromeはレンダリングエンジンが優秀なのか画像処理入れてもあまり動かなくなることはありませんが、firefox、アイツはだめだ。

アニメーションはインタラクションも含みますから処理を用意しておくことはできません。ゆえに、画像加工などの独立した処理だけ先にやっておいてしまおうという魂胆になります。

3.Gpuに処理を投げる

CSSのプロパティでこの二つはgpuに処理を投げることができます。

• transform
• opacity

基本的な考え方はこちらを参考に。

gpuとは何か、という方はcpuよりめっちゃ強いプロセッサぐらいに思ってください。

Jqueryアニメーションを利用している方は直接transformをいじるのは無理なので、迂回処理を書くか、スタイル用クラスの付与で代用しましょう。

先程参考にとお伝えしたリンク先にもありますが、gpuのメモリ領域も有限ですのでgpuに頼りすぎるとかえって遅くなる場合もございます。ここは注意したいところです。

4.DOM要素数を減らす

DOM要素を大量に一つのページで表示するのは実はかなり動作を重くする原因だったりします。

これが問題になるのはだいたいSPAで作っているサイトかと思います。ページ遷移してたらそんなに多くならないですよね。

SPAで例えば、ポートフォリオサイトを作ったとして、作品例を沢山のせたいときを考えてみましょう。

作品の詳細画面で、作品数分DOM要素を作ってdisplayを弄ったりして表示を変更するのはちょっと効率が悪いかなという気がします。作品が30、40、50と増えていけば、その分メモリが消費されるのは分かりきっています。

一つの作品表示画面の中身をreact的に変更してしまう、というのがこの解決法です。

作品データを別のファイルにjsonなりで纏めておいて、それを読み込み一つの詳細画面内の内容を書き換えてしまうというわけです。SPA向けライブラリのvue.jsとかAnglerもこの考え方ですよね。これは是非活用してほしい設計法です。

おわりに

ユースケースとともに紹介しましたが、普通に私のポートフォリオサイトを製作したときの考察です。

なんでspaでそんなサイト作ってんねんって気がしますが、ゴリゴリアニメ使ってアプリっぽく動くの可愛くて使いやすくて大好きなんです。さくさく動いたらもう最高じゃないですか。

ここまで読んでくださりありがとうございました！

では楽しいアニメーションライフを！