この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。(これ今後数年で大流行りしそうに思うので、未読なら是非!)

さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが(周回遅れ)、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。

どうやったらスムーズに動くかってのを解説したいと思います。

なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。

先に結論

概念的なの

  • GPU合成レイヤーを適切に使うと早い
    • いわゆるハードウェアアクセラレーション
  • 何がCPUで、何がGPUで描画されるか知っておくべき

実際的なの

  • transformやopacityはイケてる
    • 他のアニメーションはコスト高いっぽい、特に色
  • 合成レイヤーの内容を変更しない
  • パラパラアニメは全コマ読み込み可視性の制御で
  • アニメの「コマ」が少なければ少ないほどハードウェアアクセラレーションの効果が出る

ぬるぬるアニメ、ざらざらアニメ

まずは実例からご覧頂きましょう。

(さらに…)