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，從而確保一致的動畫符合您的特定要求。