ホームページ >ウェブフロントエンド >jsチュートリアル >requestAnimationFrame を特定のフレーム レートに調整するにはどうすればよいですか?
requestAnimationFrame を特定のフレーム レートに調整する
requestAnimationFrame は、その滑らかさと最適化により、アニメーションに推奨される方法となっています。ただし、アニメーション速度の制御が必要な状況もあります。この記事では、requestAnimationFrame を特定のフレーム レートに調整して、デバイスのパフォーマンスに関係なく一貫したアニメーション速度を確保する方法について説明します。
調整の 1 つのアプローチは、最後のフレーム ループからの経過時間を計算し、指定された FPS になった場合にのみ描画することです。間隔が経過しました。このメソッドには、時間間隔を追跡するための変数の設定が含まれます。
<code class="javascript">var fpsInterval = 1000 / fps; // Convert FPS to milliseconds var then = Date.now(); // Start time of the current animation loop</code>
アニメーション ループは requestAnimationFrame を使用して実装され、継続的に呼び出されます。ループ内では、最後のループからの経過時間が計算され、指定された FPS 間隔が経過した場合にのみ描画が実行されます。
<code class="javascript">function animate() { requestAnimationFrame(animate); now = Date.now(); elapsed = now - then; if (elapsed > fpsInterval) { then = now - (elapsed % fpsInterval); // Adjust for non-multiple FPS intervals // Put your drawing code here } }</code>
このスロットル手法を使用すると、描画コードは指定された時間に実行されます。 FPS。さまざまなパフォーマンス機能を持つデバイスでも一貫したアニメーション速度を提供します。
以上がrequestAnimationFrame を特定のフレーム レートに調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。