如何將 requestAnimationFrame 限制為特定幀速率？

將 requestAnimationFrame 限製到特定幀速率

requestAnimationFrame 由於其平滑性和優化性已成為動畫的首選方法。然而，在某些情況下需要控制動畫速度。本文介紹如何將 requestAnimationFrame 限制為特定的幀速率，從而確保動畫速度一致，無論裝置效能為何。

一種限制方法是計算自上一幀循環以來經過的時間，並僅在指定的 FPS 時進行繪製間隔已過。此方法涉及設定變數來追蹤時間間隔。

<code class="javascript">var fpsInterval = 1000 / fps; // Convert FPS to milliseconds
var then = Date.now(); // Start time of the current animation loop</code>

動畫循環是使用 requestAnimationFrame 實現的，並不斷調用。在迴圈內，計算自上次循環以來經過的時間，並且僅在經過指定的 FPS 間隔時才執行繪製。

<code class="javascript">function animate() {
    requestAnimationFrame(animate);
    now = Date.now();
    elapsed = now - then;
    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval); // Adjust for non-multiple FPS intervals
        // Put your drawing code here
    }
}</code>

透過使用這種節流技術，繪製程式碼會在指定的時間執行FPS，即使在效能不同的裝置上也能提供一致的動畫速度。

以上是如何將 requestAnimationFrame 限制為特定幀速率？的詳細內容。更多資訊請關注PHP中文網其他相關文章！