CSSアニメーションを使用したハードウェアアクセラレーションの紹介

ここ数年、ハードウェアの加速と、ウェブページのアニメーションを改善するのに役立つ方法についてよく聞いてきました。しかし、経験豊富な開発者の多くは、ハードウェアの加速がどのように機能するか、そしてそれを適切に使用してアニメーションを輝かせる方法を知らないと思います。

この用語自体は、高度な数学に近いもののように聞こえます。この記事では、このテーマに光を当て、フロントエンドプロジェクトでこの手法を利用する方法を示します。

キーテイクアウト

ハードウェアの加速により、CSSアニメーションの品質が大幅に向上し、特にモバイルブラウザーでよりスムーズで効率的になります。これは、レンダリングプロセスをGPU（グラフィックプロセシングユニット）にオフロードすることで実現されます。これは、このようなタスクに適しています。

CSS変換は、高価な補償操作を避けるために使用できるGPUフレンドリーなプロパティです。 「Transform Hack」を使用して、アニメーションが始まる前であってもGPUで要素を強制することもできます。
• ハードウェアアクセラレーションの使用は、特にモバイルデバイスでメモリの問題につながる可能性があるため、注意して行う必要があります。また、GPUとCPUのさまざまなレンダリングメカニズムにより、フォントアンチアリアシングに影響を与える可能性があります。
「意志変化」プロパティが導入されており、ブラウザにどのプロパティが変更されるかを通知しているため、ブラウザはそれに対応する最適化を事前に作成できます。ただし、すべてのブラウザがこのプロパティをまだサポートしているわけではありません
なぜ気にする必要がありますか？
互いの上に積み重ねられたいくつかのボールを含む単純なアニメーションの例を見てみましょう（つまり、Z軸には1つのボールのように見えます）。目標は、このグループのボールをアニメーションで動かすことです。これを行う最も簡単な方法は、左と上部のプロパティを調整することです。 JavaScriptでこれを行うことはできますが、代わりにCSSアニメーションを使用します。ベンダーのプレフィックスを除外していることに注意してくださいが、完全な互換性を確保するには、Autoprefixerのようなものを使用する必要があります。
ここにボタンを使用してJavaScriptを使用してアニメーションを開始するライブデモがあります。

CodepenのSitePoint（@SitePoint）によるトップ/左のプロパティでオーバーラップボールをアニメーション化するペンを参照してください。

「アニメーションの開始」ボタンをクリックした後、デスクトップブラウザーでもアニメーションがあまりスムーズに見えないことに気付くでしょう。モバイルデバイスでアニメーションをテストすると、60fpsからは程遠いことがわかります。これを修正するために、上部値と左値をアニメーション化する代わりに、翻訳（）関数を使用してCSS変換を使用できます。

以下のデモで上記のコードを試してください：

CODEPENのSitePoint（@SitePoint）によるCSS変換でオーバーラップボールをアニメーション化するペンを参照してください。

今、アニメーションは素晴らしくスムーズです。素晴らしい！では、なぜこれが助けになったのですか？まあ、CSS変換は、左と上部のプロパティを持つアニメーションとは異なり、塗り直しを引き起こしません。アニメーションの実行中にChromeのDevtoolsのタイムラインパネルを見てみましょう：

左と一番の例では、各アニメーションステップで緑色のバーを見ることができます。これは高価な補償操作です。アニメーションフレームレートは60fps未満であり、これは常にアニメーションをスムーズにすることを達成することを目指しています。

CSS変換の場合のタイムラインを見てください：

ご覧のとおり、アニメーション中に緑色のバーはありません。

補充プロセスを追跡するためにChromeのDevtoolsで利用できるもう1つの機能は、「塗料が点滅することを可能にする」ことです。このオプションは、devtoolsを開き、ESCキーを押してから「レンダリング」タブを選択することで見つけることができます。この機能がオンになると、緑色のボックス（つまり、ペイント長方形）が塗り直された領域の周りに表示されます。左と上の例では、ボールにはアニメーションプロセス全体の緑色のボックスがあり、塗り直しを示しています。

一方、CSS変換の例では、ペイント長方形は最初と最後のアニメーションフレームにのみ表示されます。

では、変換はどのように正確にアニメーションを塗り直さずにレンダリングしますか？基本的な答えは、CSS変換がハードウェアアクセラレーションを利用するGPUメモリで直接発生し、ソフトウェアのレンダリングを回避することです。これをもっと詳細に見てみましょう。

ハードウェアアクセラレーションの仕組み

ブラウザがページのマークアップを受信すると、DOMツリーを構築するために解析します。 DOMツリーとCSSにより、ブラウザはレンダリングツリーを構築できます。レンダリングツリーは、レンダリングオブジェクトで構成されています。これは、ページ上にレンダリングされる要素です。各レンダリングオブジェクトはグラフィックレイヤーに割り当てられます。各レイヤーは、テクスチャとしてGPUにアップロードされます。ここでのトリックは、3Dグラフィックスの場合のように、レイヤーが再塗装せずにGPUで変換される可能性があることです。これらの変換は、個別のコンポジタプロセスによって行われます。 Chromeの構成に関する詳細については、こちらをご覧ください。 この例では、CSS変換はGPUで直接変換できる新しい複合層を作成します。 ChromeのDevtoolsは、「show layer borders」オプションを使用して複合層を表示できます。各複合層にはオレンジ色の境界線があります

CSS変換を伴う私たちのボールにはオレンジ色の境界線があり、別々の複合層に移動されます。

この時点で、

尋ねるかもしれません：ブラウザはいつ別のコンポジットレイヤーを作成しますか？

次の場合には次のようにします

3DまたはパースペクティブCSS変換の場合（例では）

CSSフィルターを使用する場合
• 複合層に抽出された別の要素を重複させる要素の場合（例：z-indexを使用）
あなたは考えているかもしれません。この例では、3D変換ではなく2D翻訳を使用しました。そして、あなたは正しいです。そのため、タイムラインのアニメーションプロセスの開始時と終了時に、2つの追加の補償操作があります。

3D変換と2D変換の違いは、3D変換によりブラウザが事前に個別のコンポジットレイヤーを作成するのに対し、2D変換はその場でそれを行うことです。アニメーションの開始時に、新しいコンポジットレイヤーが作成され、テクスチャがGPUにロードされ、再塗装が開始されます。次に、アニメーションはGPUのコンポジタによって実行されます。アニメーションが終了すると、追加の複合レイヤーが削除され、別の再塗装操作が行われます。 GPUの要素をレンダリング

要素上のすべてのCSSプロパティの変更をGPUで直接処理できるわけではありません。次のプロパティのみがサポートされています：

transform

不透明

フィルター
• そして、スムーズで高品質のアニメーションの最良のチャンスを確保するには、これらのGPUに優しいプロパティを常に使用しようとする必要があります。
gpu
• で要素のレンダリングを強制します
特定の場合、アニメーションが始まる前であっても、GPUの要素をレンダリングする必要がある場合があります。これにより、新しいレイヤーの作成によって引き起こされる最初の補償操作を回避できます。これを達成するために、いわゆる「変換ハック」は役に立つかもしれません。

これが行うことは、3D変換を実行したいことをブラウザに知らせることです。これにより、ブラウザは別のレイヤーを作成し、事前に要素をGPUに移動するため、ハードウェアアクセラレーションがトリガーされます。

この手法は、1つの要素の再塗装がその背後にある別の要素のために高すぎる場合にも役立ちます。最初の例に戻り、CSSフィルターを使用してぼやけた背景画像を備えた単一のボールとコンテナを含むように、少し変更します。ボールは左と上部のプロパティでアニメーション化されています。

CodepenのSitePoint（@SitePoint）によるトップ/左のプロパティでボールをアニメーション化するペンを参照してください。

繰り返しますが、ボールの動きはぎくしゃくしています。これは、背景がぼやけているために各塗り直し操作の費用がかかりすぎるために起こります。

次に、コンテナに変換ハックを追加しましょう。

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

CodepenのSitePoint（@SitePoint）によるハードウェアアクセラレーションを備えた左/上部プロパティをアニメーション化するペンを参照してください。

結果はそれほど悪くなく、アニメーションはうまく機能します。なぜ？これで、ぼやけた塗装防止背景が別の複合層に移動し、各アニメーションステップでのボールの再塗装が安いためです。

注意してハードウェアアクセラレーションを使用します

無料で何もありません。ハードウェアの加速に関連するいくつかの問題があります

メモリ

最も重要な問題は、メモリに関連しています。 GPUにテクスチャが多すぎると、メモリの問題が発生する可能性があります。これはモバイルデバイスで非常に重要であり、モバイルブラウザをクラッシュすることもできます。結果に注意し、ページ上のすべての要素にハードウェアアクセラレーションを使用しないでください。

フォントレンダリング
GPUでのレンダリングは、フォントアンチエリアスに影響します。これは、GPUとCPUに異なるレンダリングメカニズムがあるために起こります。したがって、アニメーションの最後にハードウェアアクセラレーションをオフにしたとしても、アニメーション中にテキストがぼやけて表示されます。キース・クラークによるこの投稿のフォントレンダリング問題の詳細については、詳細を読むことができます。

近い将来

「変換ハック」を使用して個別のコンポジットレイヤーを作成する必要性は面倒です。ブラウザは間違いなくこれを行うための簡単な方法を提供する必要があります。そのため、ウィルチェンジプロパティが導入されました。この機能により、どのプロパティが変更されるかブラウザに通知できるため、ブラウザはそれに対応する最適化を事前に作成できます。ブラウザに変換プロパティが変更されることを通知する例は次のとおりです。

残念ながら、すべてのブラウザがウィルチェンジをサポートしているわけではありません。次のリソースでウィルチェンジについて詳しく知ることができます。

nick salloumによるCSSの概要

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

CSSについて知る必要があるすべてのものは、Sara Soueidanによる財産を変更します。

結論

私たちがカバーしたものを要約する GPUを使用すると、アニメーションの品質を向上させることができます
GPUレンダリングアニメーションは、すべてのデバイスで60fpsでなければなりません

GPUに優しいCSSプロパティを使用

「変換ハック」を使用して、GPUで要素を強制する方法を理解してください。

これらのテクニックを使用した場合、またはフィードバックがある場合は、コメントを提供してください。

• ハードウェアアクセラレーションとCSSアニメーションに関するよくある質問

  ハードウェアアクセラレーションのCSSアニメーションにおけるGPUの役割は何ですか？

  グラフィックス処理ユニット（GPU）は、ハードウェアアクセラレーションのCSSアニメーションで重要な役割を果たします。グラフィックと画像処理のレンダリングを担当します。 CSSアニメーションがハードウェアアクセラレーションされている場合、GPUは中央処理ユニット（CPU）からアニメーションをレンダリングするタスクを引き継ぎます。これにより、GPUはそのようなタスクを処理するように特別に設計されているため、よりスムーズで高速で効率的なアニメーションが得られます。

  ハードウェアアクセラレーションは、CSSアニメーションのパフォーマンスをどのように改善しますか？ CPUからGPUへのグラフィカル処理タスクの一部をオフロードすることにより、CSSアニメーションの。これにより、CPUは他のタスクに集中できるため、Webサイトまたはアプリケーションの全体的なパフォーマンスが向上します。さらに、GPUはグラフィカルなタスクを処理するのに適しているため、よりスムーズで効率的なアニメーションをもたらします。

  ハードウェア加速CSSアニメーションを使用することに欠点はありますか？パフォーマンスを大幅に改善できます。潜在的な欠点があります。主な懸念の1つは、互換性の問題です。すべてのデバイスやブラウザがハードウェアの加速をサポートしているわけではなく、それが一貫性のないユーザーエクスペリエンスにつながる可能性があります。さらに、ハードウェアアクセラレーションの過剰使用は、モバイルデバイスの懸念事項になる可能性があります。

  CSSアニメーションのハードウェアアクセラレーションを有効にするにはどうすればよいですか？ CSSコードで「変換」プロパティを使用して実行できます。このプロパティは、GPUを引き起こし、アニメーションのレンダリングを引き継ぎます。たとえば、「変換：translatez（0）」または「変換：回転（0DEG）」を使用して、ハードウェアアクセラレーションを有効にすることができます。 > 3D変換、遷移、キーフレームアニメーションなどの複雑なグラフィカルなタスクを含むCSSアニメーションは、ハードウェアの加速から大きな恩恵を受けることができます。これらのタスクは、CPUによって処理されるとリソースを集中させることができますが、GPUはより効率的に処理し、よりスムーズなアニメーションをもたらすことができます。 >ハードウェアがアクセラレーションしたCSSアニメーションを使用するときに互換性を確保するには、さまざまなデバイスやブラウザでウェブサイトまたはアプリケーションをテストすることが重要です。 CSSコードでフォールバックを使用して、ハードウェアアクセラレーションをサポートしないデバイスまたはブラウザの代替アニメーションを提供することもできます。

  CSS遷移でハードウェアアクセラレーションを使用できますか？

  はい、ハードウェアアクセラレーションはCSS遷移で使用できます。 「変換」プロパティを使用することにより、GPUをトリガーして遷移をレンダリングし、よりスムーズで効率的なアニメーションを実現できます。

  ハードウェアアクセラレーションは、モバイルデバイスのバッテリー寿命にどのように影響しますか？ハードウェアアクセラレーションはCSSアニメーションのパフォーマンスを向上させる可能性がありますが、電力消費量も増加し、モバイルデバイスのバッテリー寿命に影響を与える可能性があります。ハードウェアアクセラレーションを使用する場合、パフォーマンスと電力消費のバランスをとることが重要です。

  2Dアニメーションにハードウェアアクセラレーションを使用できますか？ CSSコードで「変換」プロパティを使用することにより、GPUをトリガーしてアニメーションをレンダリングすることができます。 >

  ハードウェアアクセラレーション用のCSSコードの最適化には、「変換」プロパティを使用してアニメーションのレンダリングのためにGPUをトリガーします。また、ハードウェアの加速を過度に使用することを避けることも重要です。これにより、消費電力が増加する可能性があるためです。さらに、さまざまなデバイスやブラウザでウェブサイトまたはアプリケーションをテストすることで、互換性を確保するのに役立ちます。

以上がCSSアニメーションを使用したハードウェアアクセラレーションの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。