javascript - canvas动画帧数与速度的关系-PHP中文网问答

刚开始做canvas的游戏, 对动画帧数与速度的理解不太明白, 希望大家帮助下....

以简单的setInterval为例的动画, 以设定的FPS进行重绘, 并进行update和draw

var run = function(){
    update() {
        x += speed
    }
    
    draw()
}

setInterval(run, FPS)

这种情况下, 物体的移动速度其实和FPS也有关系, 因为每次interval就会计算x, (理论上是不是FPS不应该和物体的移动速度耦合在一起的? 因为帧数应该只负责刷新频率, 而不是移动频率).
如果物体需要2秒才移动一次的话, 那是不是要再加一个timer的计时器,

update(){
    timer++
    if (FPS * timer > 1000 * 2) {
        doUpdate()
        timer = 0
    }
}

怎么能消除对FPS值的依赖, 因为如果用requestAnimationFrame, 好像都不需要获取FPS的值.

还有玩游戏的时候, 调快速度好像更多的是物体的移动间隔更短, 而不是移动的单位更大, 按这个理解的话, speed这个变量的控制好像就不太对了, 因为speed更像是移动的单位, 而非时间间隔

有人能解释下么, 谢谢

全部回复(3)

伊谢尔伦2017-04-11 11:09:18 3楼

setInterval控制数据
requestAnimationFrame画出来
没明白你哪里没明白

赞 +0

添加回复

怪我咯2017-04-11 11:09:18 2楼

理论上的1/60秒一帧，但实际运行中取决于机器性能

黄舟2017-04-11 11:09:18 1楼

关于动画帧数实际上我们会想下我们当初学Flash时候制作动画情况，动画实际上是不同时间点的不同动作快速播放形成，一般的Flash是24帧即一秒之内有24变化。那么反映到setInterval中就是简单的

setInterval(function { .... }, 1000/24 );

而requestAnimationFrame只是将间隔时间设置成为了1000/60,即60hz，为什么会是60hz来源于大多数显示器推荐设置屏幕刷新就是60hz以及人类肉眼的感知。

关于速度，其实是完全另外一个概念了。在屏幕上就是像素长度了，因此速度的关键取决于你的移动长度/刷新间隔比如你每次增加10px（匀速下）就是 10px/(1/60)的速度了。