如何使用 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中文網其他相關文章！