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

Una Kravets

概要: Chromium は、SVG アニメーション、割合ベースの変換、およびまもなく提供予定の背景色とクリップパス アニメーションのハードウェア アクセラレーション機能を自動的に更新します。

ウェブ アニメーションのパフォーマンスに関しては、「ハードウェア アクセラレーション」と「GPU アクセラレーション」という言葉が使われがちです。しかし、これらは一体何を意味するのでしょうか。ハードウェア アクセラレーテッド スタイルは、CPU（中央処理装置）ではなく GPU（グラフィック プロセッシング ユニット）を利用してビジュアル スタイルをレンダリングするスタイルです。これは、GPU が CPU よりも速く、ウェブページの視覚的な変化をレンダリングできるためです。

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

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

ハードウェア アクセラレーションによるアニメーションはレイヤとして合成され、60 FPS（フレーム/秒）のアニメーションで滑らかなアニメーションを実現し、視覚的なレンダリング パフォーマンスを改善できます。現在、ウェブでハードウェア アクセラレーションされているアニメーションと遷移を指定して有効にする方法はいくつかあります。

  • 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 アニメーションを使用した場合と、ハードウェア アクセラレーションをオンにした場合の違いを見てみましょう。読み込みインジケーターは、facebook.com で見られるような、よく使われる UI 要素です。これらのインジケーターは、ユーザーが応答を待っている間、サーバー上で作業が行われていることを示しています。ここに示されているケースでは、サイドバーに追加の結果を読み込むというレスポンスが返されます。

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

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

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

左側（Chromium 87）では、スピナーがアニメーション化されるたびに（連続して）再ペイントが行われていることがわかります。右側は再描画が行われていません（Chromium 89 と Firefox）。これは、ペイントのフラッシュをオンにした状態で、DevTools の [Rendering] パネルでテストできます。

レンダリングが表示されている [Performance] パネル
左: Chromium 88。右: SVG アニメーションにハードウェア アクセラレーションを適用した Chromium 89。Benoit Girard による JSFiddle のデモをご覧ください。

[パフォーマンス] パネルをよく見てみると、この影響と、ウェブ プロパティの全体的なパフォーマンスに及ぼす影響が改めてわかります。アニメーションのレンダリングとペイントの時間を完全に回避できるため、アニメーションがより滑らかになり、アプリのパフォーマンスが向上します。Facebook では、ブラウザでハードウェア アクセラレーションによる SVG がサポートされるまで、この SVG ベースのローダをリリースしませんが、テーマ設定、スケーリング、解像度の要件の点で柔軟性が高まり、メンテナンスが容易になります。

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

インタラクション チームは、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 より）