2015 01 25

アニメーションを滑らかに。レイヤーとwill-changeプロパティ

HTML5 Conference行ってきました

話を聞いたセッションは以下の通り

マークアップの話や、css設計の話、あと最後のスペシャルセッションのLTも聞きたかったので、動画のアーカイブ確認します。

聞いた中でも、なんとなく聞いたことあったけどそういうことなのか、という糸口が見つかったような気がしたのが、アニメーションのセッション。
スライドも公開してもらえるっぽいので、わかったらリンクはります。

自分の理解した範疇でのメモ書きです。

アニメーションさせる予定をwill-changeプロパティで知らせる

なんか困ったら指定してみてたtranslate3d

今まで、アニメーションがカクカクしてなんか辛い感じだわーって時、
あ、なんか


transform: translate3d(0, 0, 0);

ってしたら、綺麗になるらしいよー、なんかGPU使ってるかららしいよー。
というくらいの感じで、なんとなく指定したら綺麗になったしよかったよかった、という感じでした。。

GPUレイヤー化

なんかGPU使ってるらしいよ、というのであれば、じゃあそうじゃない場合（CPUでアニメーションしている場合）はどうなのかというと、要素を移動させるごとに描画を行っているよう。
Web描画パフォーマンスの改善 | Cacoo Blog

描画してるのを見れるようにするとよくわかる。
http://people.mozilla.org/~bbirtles/pres/html5j-2014/#/33

それをGPUレイヤー化すると、描画されたレイヤーをアニメーションするので、再描画が発生しないということ。
そこはブラウザがうまいことやってくれていて、勝手に判断してレイヤー化してくれているケースがあるとのこと。（リフローしない場合のみ？）
ただ、そのブラウザ側の判断も、アニメーションがはじまってからの判断になるので、アニメーションの最初はレイヤー化が間に合わず少しガタついてしまう可能性があるようです。

事前にお知らせするwill-change

そこで、事前にこのプロパティが変化しますよーと伝えておけるのが、will-changeプロパティ。
上記のtranslate3dを使ったハック（null transformハックというらしい）も、cssの適用時にそれでレイヤーを生成するので、いいんじゃないかと思ったけど、まぁ本来の用途とは違うのでそういった使い方すべきじゃないよねということと、影響範囲が掴みづらいというところでしょうか。
will-changeだと、指定したプロパティに関する範疇での最適化にとどまるから、みたいな。

補足

こんなメモ書きのようなブログエントリ読むより、以下読めば良い。
Dev.Opera — CSS will-changeプロパティについて知っておくべきこと

どうやら、今回のセッションは、以下のアップデート版みたい。
その当時も話題になってたっぽいのに気づいてなかった。
ブラウザーに優しくして、アニメーションを滑らかに

その時はFirefoxは実装中ということだったみたいだけど、Firefoxも36で実装されるということだそうです。
Can I use…

感想

まだiOSで使えないので、使えるブラウザではちょっといい感じになるという使い方になるのかな。
will-changeのことだけじゃなく、リフロー／リペイント、スタッキングコンテキストなど、周辺含めてわかっておかないと、とりあえずwill-change指定したらいいよみたいな、初心者っぽいTIPSに終わってしまいそうなので、その辺もちゃんと知識つけたい。