requestAnimationFrame が setInterval や setTimeout より優れている理由

setInterval と setTimeout は両方ともアニメーション タスクに使用できますが、一般に、いくつかの理由から requestAnimationFrame の方が良い選択肢であると考えられています。

1.ディスプレイ リフレッシュ レートとの同期

requestAnimationFrame は、コールバックをデバイスのディスプレイ リフレッシュ レート (通常は 60 Hz) と同期します。これは、アニメーションが一定のフレーム レートで更新され、setInterval または setTimeout.

2 で発生する可能性のあるジッターや途切れが解消されることを意味します。リソース消費の削減

setInterval と setTimeout は、ブラウザーがアクティブにレンダリングしていない場合でも、指定された間隔でコールバックを呼び出します。これにより、CPU が不必要に使用され、バッテリーが消耗する可能性があります。一方、requestAnimationFrame は、ブラウザーが新しいフレームを表示しようとしているときにのみコールバックを呼び出し、リソースを節約します。

3.強化されたユーザー エクスペリエンス

requestAnimationFrame を使用したアニメーションは、setInterval または setTimeout を使用したアニメーションと比較して、よりスムーズで応答性が高くなります。これは、requestAnimationFrame がデバイスのリフレッシュ レートを考慮し、アニメーションが一貫した視覚的に心地よいペースで実行されるようにするためです。

4. Timestamp

requestAnimationFrame の可用性により、フレームが表示される予定の時刻を表すタイムスタンプ パラメータがコールバックに提供されます。このタイムスタンプを使用して、前のフレームからの経過時間を計算することができ、より正確なアニメーション制御とスムーズな遷移が可能になります。

5.シアーとフリッカーの除去

requestAnimationFrame は、setInterval または setTimeout で発生する可能性のあるシアー (アニメーション位置の不一致) やフリッカー (不完全なフレームの表示) などの問題を解決します。これは、現在のフレームが画面上に完全に表示された場合にのみ、次のフレームのレンダリングをスケジュールするためです。

要約すると、requestAnimationFrame は、表示リフレッシュ レートと同期するため、アニメーション タスクに推奨される選択肢です。リソースの消費、ユーザー エクスペリエンスの向上、タイムスタンプの可用性、シアーとちらつきの排除。