」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何使用 RequestAnimationFrame 來穩定動畫的幀速率 (FPS)?

如何使用 RequestAnimationFrame 來穩定動畫的幀速率 (FPS)?

發佈於2024-11-09
瀏覽:295

How can I use RequestAnimationFrame to stabilize my animation\'s frame rate (FPS)?

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

最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3