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

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

青灯夜游

リリース： 2021-11-18 16:32:30

オリジナル

4665 人が閲覧しました

違い: 1. JS はフレームごとのアニメーションであり、各フレームはコードによって制御され、コードの複雑さは高くなります。CSS はキーフレームアニメーションであり、トゥイーンアニメーション部分はブラウザで使用できるため、コードの複雑さは低くなります。 2. js アニメーションはメインスレッドで実行されるため、ブロックや待機が発生しやすくなりますが、css アニメーションは合成スレッドで実行され、その作業専用でメインスレッドはブロックされません。

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

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

js アニメーションと css アニメーションの違い

違い 1:

js はフレームですフレームごとアニメーションの各フレームはコードによって制御されます。不適切な操作により簡単にリフローが発生します。

css はキーフレームアニメーションであり、トゥイーンアニメーション部分はブラウザーによって完成されるため、ブラウザーの最適化が容易になり、アニメーション実行プロセスの優れた点

js アニメーションのコードの複雑さは CSS アニメーションよりも高い

違い 2:

js アニメーションは次の場所で実行されます。メインスレッドはメインスレッドのままですが、他に実行すべきタスクがある場合、ブロックや待機が発生しやすく、アニメーションの実行効率が低下します。

CSS アニメーションは合成で実行されます。スレッドは作業に特化しており、メインスレッドをブロックせず、合成スレッドのアニメーションはリフローや再描画をトリガーしません

#CSS アニメーション

##利点:

#(1) ブラウザでアニメーションを最適化できます。

(2) コードは比較的単純で、パフォーマンス調整の方向性は固定されています

(3) フレームレートのパフォーマンスが低い低バージョンのブラウザの場合、CSS3 は自然に低下する可能性がありますが、JS追加のコードを記述する必要があります

欠点:

1. 実行中のプロセス制御は弱く、イベントバインディングコールバック関数をアタッチできません。 CSS アニメーションは一時停止のみ可能で、アニメーション内の特定の時点を見つけることができません。アニメーションを途中で反転することはできません。タイムスケールを変更することはできません。特定の位置にコールバック関数を追加したり、再生イベントをバインドしたりすることはできません。進行状況レポートはありません。

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

JSアニメーション

利点:

(1) JavaScriptのアニメーション制御能力が非常に強い, アニメーションの再生中に、開始、一時停止、再生、終了、キャンセルなどのアニメーションを制御できます。

(2) アニメーション効果は CSS3 アニメーションよりも豊富です。曲線の動き、衝撃のちらつき、視差スクロール効果などの一部のアニメーション効果は、JavaScript アニメーションでのみ完成できます

(3) CSS3 には互換性の問題がありますが、JS にはほとんどの場合互換性の問題はありません

欠点:

(1)JavaScript はブラウザのメインスレッドで実行され、メインスレッドには他のニーズがあります。実行中の JavaScript スクリプト、スタイル計算、レイアウト、描画タスクなどの干渉により、スレッドがブロックされ、フレーム損失が発生する可能性があります。

(2) コードの複雑さは CSS アニメーションよりも高いです

概要

アニメーションが単純な状態切り替えだけで、中間のプロセス制御は必要ありません。この場合、CSS アニメーションが推奨されるソリューションです。

ページに Javascript ライブラリを溢れさせることなく、スタイルファイルにアニメーションロジックを配置できます。