使用 requestAnimationFrame 設定幀速率
使用 requestAnimationFrame 可能會在某些系統上以每秒 60 幀以上的幀數進行更新。如果渲染可以跟上,則 60fps 是預設速率。有些系統的執行速度可能超過 120fps。
如果使用以下方法,則應僅使用整數除以 60 的幀速率,以便 (60 / FRAMES_PER_SECOND) % 1 === 0
為 true
,否則將導致幀速率不一致。
const FRAMES_PER_SECOND = 30; // Valid values are 60,30,20,15,10...
// set the mim time to render the next frame
const FRAME_MIN_TIME = (1000/60) * (60 / FRAMES_PER_SECOND) - (1000/60) * 0.5;
var lastFrameTime = 0; // the last frame time
function update(time){
if(time-lastFrameTime < FRAME_MIN_TIME){ //skip the frame if the call is too early
requestAnimationFrame(update);
return; // return as there is nothing to do
}
lastFrameTime = time; // remember the time of the rendered frame
// render the frame
requestAnimationFrame(update); // get next farme
}
requestAnimationFrame(update); // start animation