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