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 サイトの他の関連記事を参照してください。