ハードウェア アクセラレーション アニメーション機能の更新

ウナ クラベツ

概要: Chromium は、SVG アニメーション、パーセンテージ ベースの変換、そしてまもなく背景色とクリップパス アニメーションのハードウェア アクセラレーション機能を自動的に更新します。

ウェブ アニメーションのパフォーマンスに関しては、「ハードウェア アクセラレーション」や「GPU アクセラレーション」というアニメーションが登場することがよくあります。どういうことでしょうか。ハードウェア アクセラレーション スタイルとは、ビジュアル スタイルをレンダリングするために CPU（中央処理ユニット）ではなく GPU（グラフィック処理ユニット）を利用するスタイルです。これは、GPU がウェブページの視覚的な変化を CPU よりも速くレンダリングできるためです。

GPU を使用してグラフィックを多用する遷移やアニメーションをオフロードすると、これらのアニメーションはメインスレッドの影響を受けないため、より滑らかな映像になり、ジャンクが減ります。これらをメインスレッドから取り除くことで、アニメーションは、ページで実行されている他のアクティブなスクリプトのクラストを回避します。これにより、ビジュアルの速度が低下し、ジャンクが発生します。

ハードウェア アクセラレーション アニメーションを有効にする

ハードウェア アクセラレーション アニメーションがレイヤとして合成されるため、デベロッパーはスムーズに滑らかな 60 FPS（1 秒あたりのフレーム数）アニメーションを実現し、ビジュアル レンダリング パフォーマンスを向上させることができます。現在、ウェブ上でハードウェア アクセラレーションによるアニメーションと遷移を指定して、有効にする方法はいくつかあります。

  • CSS transform 関数を使用するか、opacity または filter の値を移行する
  • will-change プロパティを要素に追加します。
  • OffscreenCanvas でアニメーション キャンバス図形描画を作成する
  • WebGL 3D 描画を作成する
Chromium レンダリング チームは、特にアニメーション化されたプロパティの使用状況を継続的にトラッキングし、ハードウェア アクセラレーションの有効化に関する次のアクションを判断しています。デフォルトでハードウェア アクセラレーションされる現在の CSS プロパティに含まれるのは、現時点では opacity、filter、transform のみですが、まもなく background-color と clip-path がリストに追加される予定です。

Chromium でデフォルトでハードウェア アクセラレーションの対象になるのは他に何ですか？SVG アニメーションなど、パイプラインにはデベロッパーが強くリクエストしていた機能がいくつか追加されています。

ハードウェア アクセラレーションによる SVG アニメーション

SVG はあらゆるウェブサイトへの優れた追加機能ですが、SVG とのやり取りのパフォーマンスも向上しています。Chromium 89 以降、Chrome は Firefox などに加わり、SVG アニメーションのハードウェア アクセラレーションがデフォルトで有効になります。デベロッパーに求められる対応特に何もする必要はありません。この設定は、Chromium 89 以降では SVG アニメーションに自動的に適用されます。

例

SVG アニメーションのハードウェア アクセラレーションがオンになっている場合とそうでない場合の違いを見てみましょう。読み込みインジケーターは、一般的に使用される UI 要素です。たとえば、facebook.com に表示されているこのインジケーターは、ユーザーが応答を待つ間、サーバー上で処理が行われていることを示唆します。この例でのレスポンスは、サイドバーに追加の結果の読み込みです。

追加コンテンツを読み込んでいる間、Facebook のサイドバー UI に円形のローダが表示されます。

DevTools を開いてプロファイリングを開始すると、CPU アクセラレーションと GPU アクセラレーションによるアニメーション エクスペリエンスの違いを実際に確認できます。

ペイント 点滅をオンにしたパフォーマンス パネル
左: Chromium 88。右: SVG アニメーションのハードウェア アクセラレーションを備えた Chromium 89。Benoit Girard による JSFiddle のデモをご覧ください。

左側（Chromium 87）では、スピナーがアニメーション化されるたびに（継続的に）再ペイントが行われます。右側は再ペイントされていません（Chromium 89 と Firefox の場合）。これは、DevTools の [Rendering] パネルでペイント点滅をオンにしたときにテストできます。

レンダリングを示す [パフォーマンス] パネル
左: Chromium 88。右: SVG アニメーションのハードウェア アクセラレーションを備えた Chromium 89。Benoit Girard による JSFiddle のデモをご覧ください。

[パフォーマンス] パネルを詳しく見ると、この効果と、ウェブ プロパティの全体的なパフォーマンスに及ぼす影響について確認できます。レンダリングと描画にかかる時間が完全になくなるため、アニメーションがよりスムーズになり、アプリケーションのパフォーマンスが向上します。Facebook では、ハードウェア アクセラレーション SVG に対するブラウザ サポートが高まるまでこの SVG ベースのローダをリリースしませんが、テーマ設定、スケーリング、解像度要件の点で柔軟性が向上し、メンテナンスも容易になります。

パーセンテージ アニメーション

Interactions チームは、Chromium 89 でパーセント変換アニメーションのサポートも提供しています。パーセンテージベースのアニメーションは、パーセンテージに基づく動きを含む操作を説明します。たとえば、20% スケールアップしたり、translateX: -100% などを使用して、レスポンシブなサイドバー メニューを画面外からスライドしたりできます。

waze.com のナビゲーションの例。パーセンテージ変換を使用して、小さい画面サイズでメニューを開いたり非表示にしたりしています。

この種の UI アニメーションは比較的一般的ですが、以前はこのようなアニメーションを合成することができなかったため、現時点ではハードウェア アクセラレーションを利用していません。変換におけるパーセンテージはボックスサイズ（レイアウト）に依存しますが、レイアウト サイズがフレームごとに変更されない限り、ブラウザは絶対変換値を事前計算して、デベロッパーがピクセル値を提供したかのようにそれらの値を実行できるようになりました。現在、Chromium チームはこの機能の開発に取り組んでおり、まもなく、この種のアニメーションは自動的に合成され、ハードウェア アクセラレーションが適用されます。

今後の予定

アニメーションのこれらの更新により、ウェブのスタイル設定がより滑らかになります。前述したとおり ウェブで今後どのようなニーズが生まれるか 常に追求しています現時点では、Chromium の今後のバージョンでハードウェア アクセラレーションが自動的に使用されるよう、background-color と clip-path を変換する予定です。

background-color は、遷移と効果の使用量が多いため優先度が高く、clip-path はウェブ全体ではるかにパフォーマンスの高い遷移効果を実現します。パフォーマンスとインタラクティビティが 双方にメリットをもたらします

transition.style: Adam Argyle による CSS トランジション エフェクトを紹介するデモサイト。

カバー画像: Siora Photography（Unsplash）