Javascript スムーズアニメーション実装原理_JavaScript スキル

もちろん、ブラウザ (特に IE) の js 実行能力が低いことを考慮すると、アニメーション効果は影響を受けます。
ブラウザのアニメーション効果は主に js に依存して Dom 要素の外観を動的に変更します。しかし、CSS はこの分野で能力を開発していると言われています。 (待ってください^_^)
dom 要素の外観を定期的に変更する必要があり、この周期性は setTimeout() と setInterval() に依存して完了します。
どちらが優れていますか? ここを参照してください (jquery の作者が書いた記事)
個人的には setInterval を好みます。setTimeout は再帰的に呼び出す必要があり、スレッドが非常にビジーな場合は遅延します。 。
通常、ページのパフォーマンスを更新するには、node.style 属性の動的な割り当てを使用します。ページが呼び出されるたびに再描画されることは誰もが知っています。
次のように複数の属性を同時に変更する状況もあります:
....
node.style.height = 'value1',
node.style.width = ' value2' ,
node.style.top = value3"
....
この場合、
アニメーション オブジェクトの各フレームの移動中にページが 3 回再描画されます属性が多いほど毎回再描画が発生します
FFやChromeでは問題ありませんが、IEではどうしてもちらつきが発生します
各フレームをアニメーション化できれば再描画されます。
ff では setAtrribute("style",objStyle); を使用して複数の属性を一度に更新できます。
ie では、style は読み取り専用であり、値を割り当てようとすると更新されます。
現時点では、この問題を解決できるプロパティ cssText があり、
style.cssText は埋め込み形式の文字列を受け入れます。
したがって、style.prop を使用してアニメーション要素の複数の属性を同時に更新することができます。
例:node.cssText = "heigth:100px; width:100px;top:100px";
もちろん、アニメーションの滑らかさについては次の点にも注意してください。 setInterval の実践により、10 が限界値であることが証明されており、将来的には確実ではないかもしれませんが、現時点では 10 未満に設定しないでください。そうしないと、
2 をすべて計算した後、ブラウザが使い果たされてしまいます。
3. アニメーション パスの値を定期的に更新するには setInterval を使用し、要素を再描画する際に複雑な計算を行う必要はありません。 setInterval の time パラメータで最適な状態に調整する必要があります。4. ステップ数のアルゴリズムについては、Google で検索するだけで見つかります。
最後に、JS アニメーション効果に興味があるなら、自分の「ビデオ」を段階的に実装し始める必要があると思います。
問題は実装するときです。 、人気のある JS フレームワークがどのように機能するかを見てみましょう。