RequestAnimationFrame Fps 安定化

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

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

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

コード スニペット

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

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();
}

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

function animate() {

    requestAnimationFrame(animate);

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

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

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