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