javascript - requestAnimationFrame如何控制帧速?
仅有的幸福
仅有的幸福 2017-05-16 13:44:28
0
3
744

想在canvas里实现动画,动画是每帧都画在Sprite上连成一张图的,试过用setTimeout实现动画,发现会跳帧,但是requestAnimationFrame无法控制帧速,我希望1s画7帧该怎么办?

仅有的幸福
仅有的幸福

全部回复(3)
过去多啦不再A梦

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))
Ty80

貌似不可控,浏览器自己计算的

迷茫

1s7帧这种刷新速率...本来就是"跳帧"的效果...

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板