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

違い: 1. JS はフレームごとのアニメーションであり、各フレームはコードによって制御され、コードの複雑さは高くなります。CSS はキーフレーム アニメーションであり、トゥイーン アニメーション部分はブラウザで使用できるため、コードの複雑さは低くなります。 2. 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 ライブラリを溢れさせることなく、スタイル ファイルにアニメーション ロジックを配置できます。

ただし、非常に複雑なリッチ クライアント インターフェイスを設計している場合、または複雑な UI 状態を持つ APP を開発している場合は、次のとおりです。次に、アニメーションの効率を維持し、ワークフローをより制御しやすくするために、js アニメーションを使用する必要があります。

したがって、いくつかの小さなインタラクティブ効果を実装するときは、CSS アニメーションをさらに考慮してください。一部の複雑な制御アニメーションの場合は、JavaScript を使用する方が信頼性が高くなります。

プログラミング関連の知識について詳しくは、

プログラミング ビデオ

をご覧ください。 ！

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