HTML版: http://people.mozilla.org/~bbirtles/pres/html5j-2015/ 2015年1月25日HTML5 Conferenceプレゼンの資料です。 ブラウザーについての知識を深めながら、快適に動くウェブアニメーションの作り方を学びましょう。最新の技術によって、もっと上手にブラウザーの機能を活かしませんか？ Youtube: https://www.youtube.com/watch?v=nA7Fq-kiryY

2. アニメーションによってこのような素晴らしい作品が作れます。

3. もっと真面目な使い方もある、らしいです。
例えば、この図は分かりにくいでしょう。

4. アニメーションを使うとだいぶ分かりやすくなります。

5. Hans Rosling氏のTED Talkは非常に面白いです。
多量のデータを把握するため、アニメーションが大変役に立ちます。
簡単に言えば、アニメーションというものは時間を通して、情報を伝えることです。

6. ユーザーインターフェースにも、アニメーションによって
情報を伝えることができます。

7. OSXのGenie効果によって、最小化されたウィンドウはどこ
に行っちゃったかとすぐ分かります。

8. Firefoxにもアニメーションが同様に使われています。

9. しかし、アニメーションがカクカクして
しまうとユーザーがイライラするし、
伝えたい情報が失われます。
ウェブアプリを作る際、どうやって
パフォーマンスを保証しますか？
何よりも、ブラウザーがその背後に何を
やっているかという理解が必要です。

10. 滑らかなアニメーションができるように、マークアップからユーザーの目
までの間にブラウザーが行っている過程を最適化しに行きましょう。

12. URLを開くと、コンテンツをが読み込まれ、
DOMツリー(コンテンツツリー)が建てられます。
しかし、この過程がアニメーションに与える影響が
低いですので次のスタイル仕組みに進みましょう。

13. レイアウト・描画するために、DOMツリーにスタイ
ルを適用して、レンダーツリーを建てます。

15. スタイル決定という過程によってレンダーツリーを
作ります。しかし、フレーム（CSS box)の高さ、配置
などはまだ決まっていません。

16. レイアウトという過程によると
フレームの配置などを計算します。
コンテンツによってこの過程は重
いです。

17. どれほど重いかとタイムラインによって計ることができます。

18. Chrome
IE

19. Firefoxではリフロー（レイアウト）が
コンソールで表示されています。

20. 例えば、margin-leftのアニメーションだと
毎回リフローが行われています。

21. この同じテストケースを他のブラウザーで見ると、異なることがありますが、
transformならどのブラウザーでもリフローしません。ということは、
transformを使うとアニメーションがもっと滑らかになるでしょう。

24. この2つの過程が重いですので、
ブラウザーができるだけスタイルの
処理を避けます。
必要なときまで待ちます。

25. しかし、APIによってはスタイルの処理をさせます。

26. このコードによると、プリンごとにスタイルを変えて、
そしてリフローをさせます。

27. 指定されたスタイルを使うとリフローはさせません。

29. レンダーツリーが建てられたら、描画ができます。

30. だいたい描画が一番重い過程です。

39. 描画を軽くすることは良いですが、
コンテンツによっては完全に描画をスキップすることも可能です。

40. レーヤーはフォトショップなどのレーヤーみたいです。
ブラウザーが画像数枚を1回描画して、最後に全部を合成します。
合成するのにGPUが得意ですのでよくGPUにやってもらいます。
合成しながら幾何変換、透明度などを変えることができますので
再描画する必要はありません。

41. ブラウザーが自動的にレーヤーを作ってくれます。

46. スクリプトのアニメーションでも、ブラウザーによって自動的にレーヤー化されます。

47. アニメーションが始まるまでプリンがレーヤー化されません。

48. しかし、場合によってアニメーションが始まったら、レーヤー化するのはもう遅いです。

51. 端末またコンテンツによってはレーヤー化するのに時間がかかります。

52. このような場合にアニメーションがカクカクしないため、最近のブラウザー（例：
Firefox 37以降）がアニメーションの開始時間を調整しますが、まだアニメーション
の反応が遅いと見えます。できればレーヤー化を前もってやってほしいです。

55. will-changeを使うとあらかじめレーヤー化をするように
ブラウザーにお願いすることができます。

56. レーヤーを使ってもブラウザーが忙しくなるとアニメーションが
カクカクしてしまうことまだあります。

57. なぜかというと、
アニメーションが主要スレッドで動いていますので、
他の過程が忙しくなるとアニメーションする
余裕がなくなります。

58. しかし、レーヤーはだいたいコンポジターという別のスレッドで合成されていますので、
コンポジタースレッドでアニメーションができるとしたら、主要スレッドが忙しくなっても
アニメーションが滑らかに進みます。

60. スクリプトのアニメーションなら、ブラウザーがそのアニメーションの
効果を把握していませんので、コンポジターに渡せません。

61. しかし、Web Animations APIを使うとコンポジターのアニメーション
を作ることができます。

62. 現在、FirefoxでもWeb Animations APIが実装中です。
CSS Animations又CSS Transitionsをスクリプトから調整することができます。

65. Web Animations APIに基いて、最近アニメーションの開発ツールができました。

67. FirefoxでのWeb Animations API実装の進展。

73. ここまで学んだブラウザーについての知識を活かして、
どの端末上でも、どのブラウザー上でも、滑らかに動くアニメーションが作れます。