RequestAnimationFrame Fps 穩定
RequestAnimationFrame (rAF) 已在動畫中變得流行,可提供流暢且高效的執行。然而,控制幀速率 (FPS) 以確保一致性可能具有挑戰性。
將 rAF 限制為特定 FPS
要將 rAF 限制為特定 FPS,您可以自上一幀執行以來經過的槓桿時間。只有當您所需的 FPS 間隔過去後,您的繪圖程式碼才會執行。
程式碼片段
初始化計時器變數並開始動畫:
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();
}
以指定的 FPS 進行繪製的 rAF 循環:
function animate() {
requestAnimationFrame(animate);
now = Date.now();
elapsed = now - then;
if (elapsed > fpsInterval) {
then = now - (elapsed % fpsInterval);
// Your drawing code goes here
}
}
透過合併此邏輯,您可以有效地限制 rAF 以達到所需的 FPS,從而確保一致的動畫符合您的特定要求。
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3