CSS3アニメーションとJSアニメーションの違いは何ですか

違い: 1. js アニメーションの制御能力は css3 アニメーションよりも強力です; 2. js アニメーションの効果は css3 アニメーションよりも豊富です; 3. ほとんどの場合、js アニメーションには互換性の問題、css3 アニメーションには互換性がある 問題; 4. js アニメーションの複雑さは css3 アニメーションの複雑さよりも高くなります。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JS アニメーション

利点:

• js アニメーション制御機能が強力で、アニメーションの開始と一時停止を細かく制御できます。終了・キャンセルもすべて可能

• #曲線移動、衝撃点滅、視差スクロール効果など、CSS3アニメーションよりも豊富なアニメーション効果があり、JSアニメーションのみで完結可能

• JS アニメーションには互換性の問題はほとんどありませんが、CSS3 アニメーションには互換性の問題があります

欠点

• 複雑さjs アニメーションの方が css3

• js よりも高いです。js はアニメーション ブラウザのメイン スレッドで実行され、メイン スレッドには他の JavaScript スクリプト、スタイル計算、レイアウト、描画タスクもあります。

• js アニメーションでは、視覚的なアニメーション効果を実現するために DOM の CSS プロパティを頻繁に操作する必要があることがよくあります。ブラウザは実行し続ける必要があります。再描画とリフローは、特にブラウザに割り当てられたメモリがそれほど豊富ではないモバイル端末では、大量のパフォーマンスを消費します。

CSS3 アニメーション

利点:

1. 場合によっては、ブラウザーがアニメーションを最適化できることがあります。条件付きであるため:

Chromium ベースのブラウザでは
• #同時に、CSS アニメーションはレイアウトやペイントをトリガーしませんが、CSS アニメーションまたは JS アニメーションはトリガーします。ペイントまたはレイアウト このとき、メインスレッドはレイヤー ツリーを再計算する必要がありますが、このとき、CSS アニメーションまたは JS アニメーションが後続の操作をブロックします。

  メイン スレッドでは、レイヤー ツリー (LayerTreeHost) が維持され、TiledLayer が管理されます。コンポジター スレッドでは、同じ LayerTreeHostImpl が維持され、LayerImpl が管理されます。これら 2 つのツリーの内容はコピーされます関係。 Javascript がメイン スレッドで LayerTreeHost を操作する場合、コンポジタ スレッドはレンダリングに LayerTreeHostImpl を使用できます。 Javascript がビジーでメインスレッドがスタックしている場合でも、画面への合成処理がスムーズになります。

  アニメーションの一時停止を防ぐために、マウスとキーボードのメッセージは最初にコンポジター スレッドに配信され、次にメイン スレッドに配信されます。このようにして、メイン スレッドがビジー状態でも、コンポジタ スレッドは一部のメッセージに応答できます。たとえば、マウスがスクロールしていてメイン スレッドがビジー状態の場合、コンポジタ スレッドはスクロールするメッセージも処理し、ページ パーツをスクロールします。提出済みの部分（未提出の部分は白塗りになります）。
  

#2. 一部のエフェクトでは、ハードウェア アクセラレーションの使用を強制することができます (GPU によるアニメーションのパフォーマンスを向上させるため)

欠点

• 実行中のプロセスの制御は弱いです。CSS3 アニメーションは特定のシナリオでのみアニメーションの一時停止と継続を制御でき、コールバック関数を特定の場所に追加することはできません。

• コードが長いです。 CSS を使用してもう少し複雑なアニメーションを実装したい場合、CSS コードは最終的に非常に複雑になります。

css アニメーションは js アニメーションよりもスムーズであるという前提

js はいくつかの複雑なタスクを実行しています
• css アニメーションは少ない、または実行されていませんペインとレイアウトのトリガー、つまり再描画と再配置。次のプロパティを変更することで生成される CSS アニメーションなどです。
• backface-visibility
  • opacity
  • perspective (要素ビューの設定)
  perspective-origin
  • transfrom
一部の属性では、3D 変換にトランスフォームの translationZ を使用する場合など、3D アクセラレーションと GPU ハードウェア アクセラレーションを有効にすることができます
• Chromium ベースのブラウザでは、これはカーネルによって最適化されるようです。CSS アニメーションの知識が変換と不透明度を変更すると、CSS アニメーション全体がコンポジター スレッドで完了できます (JS アニメーションはメインスレッド)、CSS アニメーションのレンダリングがメインスレッドに影響を与えないようにします。

まとめ

日々の開発に話を戻すと、アニメーションが必要になった場合、まずそれを可能な限り実現できるかどうかを考慮する必要があります。 CSS アニメーションと JS アニメーションの両方が実現できる場合、上記の概要に基づいてどちらのパフォーマンスが優れているかを検討する必要があります。つまり、CSS アニメーションが必ずしも JS アニメーションよりも優れているというわけではなく、特定のニーズとビジネス シナリオによって異なります。

学習ビデオ共有:

css ビデオ チュートリアル、JavaScript 学習チュートリアル

以上がCSS3アニメーションとJSアニメーションの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。