RequestAnimationFrame を使用してアニメーションのフレーム レート (FPS) を安定させるにはどうすればよいですか?

RequestAnimationFrame Fps 安定化

RequestAnimationFrame (rAF) はアニメーションに普及しており、スムーズで効率的な実行を提供します。ただし、一貫性を確保するためにフレーム レート (FPS) を制御するのは難しい場合があります。

rAF を特定の FPS にスロットルする

rAF を特定の FPS にスロットルするには、次のことができます。最後のフレーム実行から経過したレバレッジ時間。描画コードは、希望する FPS 間隔が経過した場合にのみ実行されます。

コード スニペット

タイマー変数を初期化し、アニメーションを開始します:

<code class="js">var stop = false;
var frameCount = 0;
var fps, fpsInterval, startTime, now, then, elapsed;

function startAnimating(fps) {
    fpsInterval = 1000 / fps;
    then = Date.now();
    startTime = then;
    animate();
}</code>

指定した FPS で描画するための rAF ループ:

<code class="js">function animate() {

    requestAnimationFrame(animate);

    now = Date.now();
    elapsed = now - then;

    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval);
        // Your drawing code goes here
    }
}</code>

このロジックを組み込むことで、rAF を効果的に調整して目的の FPS を達成し、特定の要件を満たす一貫したアニメーションを確保できます。

以上がRequestAnimationFrame を使用してアニメーションのフレーム レート (FPS) を安定させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。