javascript - requestAnimationFrame如何控制帧速?
本文介绍了javascript - requestAnimationFrame如何控制帧速?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
想在canvas里实现动画,动画是每帧都画在Sprite上连成一张图的,试过用setTimeout实现动画,发现会跳帧,但是requestAnimationFrame无法控制帧速,我希望1s画7帧该怎么办?
解决方案
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))
这篇关于javascript - requestAnimationFrame如何控制帧速?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文