Webブラウザエンジニアリング ―Chrome開発者たちから学ぶ、作って理解するブラウザとWebの仕組み

13章アニメーションとコンポジット処理

　複雑なWebアプリケーションは、状態間を遷移する際に「アニメーション（animation）」を使用します。アニメーションは、ユーザーが状態の変化を理解するのに役立ちます。また、急な状態の変化を段階的な変化に置き換えることで、視覚的な洗練度を高めることもできます。しかし、アニメーションをスムーズに実行するためには、ブラウザは各アニメーションフレームの時間を最小限に抑える必要があります。さらに、GPUアクセラレーションを使用して視覚効果を高速化し、コンポジションというステップを追加することでレンダリング作業を最小限に抑える必要があります。

13.1　JavaScriptアニメーション

　アニメーション[1]は、人間の目に「動き（movement）」の錯覚を生み出すために、素早く連続して表示される静止画のシーケンスです※1。典型的なWebページのアニメーションには、要素の色の変更、フェードインまたはフェードアウト、サイズ変更などがあります。ブラウザは、スクロール、サイズ変更、ピンチズームなどのユーザー操作に応答してアニメーションを使用することもあります。さらに、動画などの一部のアニメーションメディアをWebページに埋め込むこともできます※2。

※1　ここでいう「動き（movement）」は左右の動きだけでなく、拡大、縮小、回転、フェード、ぼかし、シャープ化などよくある視覚的変化のすべてです。原則として、アニメーションとは、単に画像を無作為に並べたものではありません。その一連の流れは、現実世界での経験を通じて培われた人間の感覚にとって、連続していると感じられるものでなければならないのです。

※2　ビデオのようなアニメーションには、アニメーション画像やアニメーション化されたキャンバスも含まれます。私たちのブラウザはまだ画像をサポートしていないため、この話題は本章の範囲外です。動画だけでも、それ自体が持つ非常に興味深い複雑さがあるのです ...