將 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中文網其他相關文章！
