如何使用 requestAnimationFrame 控制動畫中的 FPS？

使用 requestAnimationFrame 控制 FPS

requestAnimationFrame 已成為平滑動畫的首選方法，但有時會以不同的速度運行。這裡有一個確保幀速率一致的技術：

Throttle requestAnimationFrame to a Specific FPS

此方法使用條件檢查僅在指定FPS 時執行動畫程式碼間隔已過。

實作：

1. 初始化變數：

   • 初始化變數：
2. 建立變數幀計數、經過時間、開始時間和FPS 間隔。
   • 開始動畫：
3. 初始化這些變數並呼叫 animate() 函數來啟動循環。
   • 動畫循環：
   • 計算經過的時間自上次使用 Date.now() 循環以來。
   如果 elapsed 大於 fpsInterval，則繪製下一幀。
4. 調整然後考慮FPS 間隔與RAF 預設值之間的差異
   • 繪圖程式碼：

繪圖程式碼：

繪圖程式碼：

<code class="javascript">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();
}

function animate() {
    requestAnimationFrame(animate);

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

    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval);

        // Put your drawing code here
    }
}</code>

繪圖程式碼：繪圖程式碼：繪圖程式碼：繪圖程式碼：繪圖碼將您的繪圖代碼放在條件檢查中（如果已過去> fpsInterval） .示例代碼：此方法可確保動畫以指定的FPS 運行，無論瀏覽器的渲染速度。

以上是如何使用 requestAnimationFrame 控制動畫中的 FPS？的詳細內容。更多資訊請關注PHP中文網其他相關文章！