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

この用語自體は、高度な數(shù)學(xué)に近いもののように聞こえます。この記事では、このテーマに光を當(dāng)て、フロントエンドプロジェクトでこの手法を利用する方法を示します。

キーテイクアウト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この時(shí)點(diǎn)で、

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

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

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

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

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

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

transform

不透明

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

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

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

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

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

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

<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）によるハードウェアアクセラレーションを備えた左/上部プロパティをアニメーション化するペンを參照してください。

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

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

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

メモリ

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

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

近い將來

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

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

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による財(cái)産を変更します。

結(jié)論

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

GPUに優(yōu)しいCSSプロパティを使用

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

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

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

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

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

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

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

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

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

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

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

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

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

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