使用 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