javascript - requestAnimationFrame如何控制幀速？

Question

想在canvas裡實現動畫，動畫是每幀都畫在Sprite上連成一張圖的，試過用setTimeout實現動畫，發現會跳幀，但是requestAnimationFrame無法控制幀速，我希望1s畫7幀怎麼辦？

Answer 1

requestAnimationFrame就是在瀏覽器下一幀渲染時調用的，所以可以認為requestAnimationFrame的呼叫速率就是瀏覽器的刷新速率，一般來說是60幀

但是requestAnimationFrame呼叫callback的時候會傳入一個時間戳參數，可以根據這個參數來進行判斷從而處理你實際需要的幀速

例如要1秒7格的話可以這樣寫

let step = (timestamp, elapsed) => {
    if (elapsed > 1000 / 7) {
        //TO DO SOMETHING
        elapsed = 0
    }
    
    window.requestAnimationFrame(
        _timestamp => step(_timestamp, elapsed + _timestamp - timestamp)
    )
}
window.requestAnimationFrame(timestamp => step(timestamp, 0))

Answer 2

似乎不可控，瀏覽器自己計算的

Answer 3

1s7幀這種刷新速率...本來就是"跳幀"的效果...