概要: Chromium では、SVG アニメーション、パーセンテージベースの変換、まもなく背景色とクリップパスのアニメーションに対して、ハードウェア アクセラレーション機能を自動的に更新します。
ウェブ アニメーションのパフォーマンスについて説明する際に、「ハードウェア アクセラレーション」や「GPU アクセラレーション」という言葉がよく使われます。これらの用語は、一体何を意味するのでしょうか。ハードウェア アクセラレーションを使用するスタイルは、CPU（中央処理装置）ではなく GPU（グラフィック プロセッシング ユニット）を使用してビジュアル スタイルをレンダリングするスタイルです。これは、GPU が CPU よりもウェブページ上の視覚的な変更をレンダリングできるためです。
GPU を使用してグラフィック負荷の高い遷移やアニメーションをオフロードすると、これらのアニメーションはメインスレッドの影響を受けないため、ビジュアルがスムーズになり、ジャンクが少なくなります。メインスレッドからアニメーションを分離することで、ページ上で実行されている他のアクティブなスクリプトのクラストからアニメーションを分離できます。これにより、ビジュアルが遅くなり、ジャンクが発生します。
ハードウェア アクセラレーションによるアニメーションの有効化
ハードウェア アクセラレーションのアニメーションはレイヤとして合成され、デベロッパーは 60 FPS（フレーム/秒）の滑らかなアニメーションを実現して、視覚的なレンダリング パフォーマンスを向上させることができます。現在、ウェブでハードウェア アクセラレーションによるアニメーションと遷移を指定して有効にする方法はいくつかあります。
- CSS
transform関数を使用するか、opacity値またはfilter値を遷移する - 要素に
will-changeプロパティを追加します。 OffscreenCanvasを使用してアニメーション キャンバス描画を作成する- WebGL 3D 描画を作成する
opacity、filter、transform のみですが、まもなく background-color と clip-path が追加される予定です。Chromium でデフォルトでハードウェア アクセラレーションが適用される機能は他にもありますか？デベロッパーから熱烈にリクエストされている SVG アニメーションなど、パイプラインにはいくつかの機能が追加される予定です。
ハードウェア アクセラレーション SVG アニメーション
SVG はあらゆるウェブサイトに追加できる優れた機能です。SVG とのインタラクションをより高いパフォーマンスで行うことができます。Chromium 89 以降、Chrome は Firefox と同様に、SVG アニメーションでデフォルトでハードウェア アクセラレーションを有効にします。デベロッパーが行うべき対応なし。Chromium 89 以降では、SVG アニメーションに自動的に適用されます。
例
ハードウェア アクセラレーションをオンにした SVG アニメーションとオフにした SVG アニメーションの違いを見てみましょう。読み込みインジケーターは、facebook.com に表示されるインジケーターなど、よく使用される UI 要素です。これらのインジケーターは、ユーザーがレスポンスを待機している間、サーバー上で処理が行われていることを示します。この例では、サイドバーに追加の結果を読み込むというレスポンスになります。
DevTools を開くと、プロファイリングを開始して、CPU と GPU アクセラレーションによるアニメーションの違いを確認できます。
![ペイントの点滅をオンにした [パフォーマンス] パネル](https://developer.chrome.google.cn/static/blog/hardware-accelerated-animations/image/performance-panel-paint-1c546b2fb2532.png?authuser=1&hl=ja)
左側（Chromium 87）では、スピナーがアニメーション化されるたびに（連続的に）再描画が行われます。右側は再描画なし（Chromium 89 と Firefox）。これは、ペイントの点滅をオンにした DevTools のレンダリング パネルでテストできます。
[パフォーマンス] パネルを詳しく見ると、この効果と、それがウェブ プロパティの全体的なパフォーマンスにどのように影響しているかを確認できます。アニメーションのレンダリングとペイントの時間が完全に不要になるため、アニメーションがスムーズになり、アプリのパフォーマンスが向上します。ハードウェア アクセラレーション SVG のブラウザ サポートが拡大されるまでは、Facebook はこの SVG ベースのローダをリリースしませんが、テーマ設定、スケーリング、解像度の要件の点で柔軟性が向上し、メンテナンスが容易になります。
割合のアニメーション
インタラクション チームは、Chromium 89 でパーセンテージ変換アニメーションのサポートもリリースしています。パーセンテージベースのアニメーションは、パーセンテージベースの動きを含むインタラクションを記述します。たとえば、translateX: -100% を使用して、何かを 20% 拡大したり、レスポンシブ サイドバー メニューを画面外からスライドしたりできます。
このようなタイプの UI アニメーションは比較的一般的ですが、以前はこのようなアニメーションを合成できなかったため、現在はハードウェア アクセラレーションを利用していません。変換の割合はボックスサイズ（レイアウト）に依存しますが、レイアウト サイズがフレームごとに変更されない限り、ブラウザは絶対変換値を事前に計算し、デベロッパーがピクセル値を提供したかのように実行できるようになりました。幸い、Chromium チームはこの機能に取り組んでおり、まもなくこのようなタイプのアニメーションが自動的に合成され、ハードウェア アクセラレーションが適用されるようになります。
今後の予定
これらのアニメーションの更新により、ウェブ スタイルがよりスムーズになります。前述のように、このチームは今後のウェブニーズを常に把握しています。現在、background-color と clip-path を変換し、今後のバージョンの Chromium でハードウェア アクセラレーションを自動的に使用するようにする予定です。
background-color は、遷移とエフェクトの使用回数が多いため優先されます。clip-path を使用すると、ウェブ全体でパフォーマンスが大幅に向上した遷移エフェクトを実現できます。パフォーマンスとインタラクティビティが両立すれば、誰もが得をするのです。
カバー画像: Siora Photography、Unsplash より。