使用 requestAnimationFrame 设置帧速率

使用 requestAnimationFrame 可能会在某些系统上以每秒 60 帧以上的帧数进行更新。如果渲染可以跟上,则 60fps 是默认速率。有些系统的运行速度可能超过 120fps。

如果使用以下方法,则应仅使用整数除以 60 的帧速率,以便 (60 / FRAMES_PER_SECOND) % 1 === 0true,否则将导致帧速率不一致。

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