CSS3アニメーションとJSアニメーションの違いは何ですか-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2021-12-15 11:32:24

オリジナル

3920 人が閲覧しました

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

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

このチュートリアルの動作環境: 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. 場合によっては、ブラウザーがアニメーションを最適化できることがあります。条件付きであるため:

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

メインスレッドでは、レイヤーツリー (LayerTreeHost) が維持され、TiledLayer が管理されます。コンポジタースレッドでは、同じ LayerTreeHostImpl が維持され、LayerImpl が管理されます。これら 2 つのツリーの内容はコピーされます関係。 Javascript がメインスレッドで LayerTreeHost を操作する場合、コンポジタスレッドはレンダリングに LayerTreeHostImpl を使用できます。 Javascript がビジーでメインスレッドがスタックしている場合でも、画面への合成処理がスムーズになります。
アニメーションの一時停止を防ぐために、マウスとキーボードのメッセージは最初にコンポジタースレッドに配信され、次にメインスレッドに配信されます。このようにして、メインスレッドがビジー状態でも、コンポジタスレッドは一部のメッセージに応答できます。たとえば、マウスがスクロールしていてメインスレッドがビジー状態の場合、コンポジタスレッドはスクロールするメッセージも処理し、ページパーツをスクロールします。提出済みの部分（未提出の部分は白塗りになります）。

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

欠点

実行中のプロセスの制御は弱いです。CSS3 アニメーションは特定のシナリオでのみアニメーションの一時停止と継続を制御でき、コールバック関数を特定の場所に追加することはできません。
コードが長いです。 CSS を使用してもう少し複雑なアニメーションを実装したい場合、CSS コードは最終的に非常に複雑になります。

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

css アニメーションは少ない、または実行されていませんペインとレイアウトのトリガー、つまり再描画と再配置。次のプロパティを変更することで生成される CSS アニメーションなどです。
- opacity
- perspective (要素ビューの設定)
- transfrom
Chromium ベースのブラウザでは、これはカーネルによって最適化されるようです。CSS アニメーションの知識が変換と不透明度を変更すると、CSS アニメーション全体がコンポジタースレッドで完了できます (JS アニメーションはメインスレッド)、CSS アニメーションのレンダリングがメインスレッドに影響を与えないようにします。

まとめ

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

学習ビデオ共有:

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

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