代码之家 › 专栏 › 技术社区 › stagas

如何使JavaScript动画在所有系统的所有浏览器上以相同的速度播放?

frame-rate cross-browser animation performance javascript

6

stagas · 技术社区 · 16 年前

我有一个函数,可以计算在X轴和Y轴上移动的各种对象的动画中的下一帧[我称之为 frameRender() ]以及一个函数,它将结果帧应用于对象[我称之为 frameDisplay() ]. 物体不只是从A点移动到B点,它们不断地移动,总是接收新的目标坐标。我用一个 setInterval() 1000/frameRate 但这似乎根本不起作用,因为浏览器没有精确的计时。

问题是:如何确保动画具有恒定的帧速率,并在所有浏览器和系统上以相同的速度运行?我尝试了所有的方法,但似乎无法在不同的浏览器上得到准确的结果(我在Firefox和Chrome上进行了测试,Chrome通常显示得更快)。

结果应该是:当它播放缓慢时,动画间隔应该先减小,然后尝试跳过一些帧[通过跳过] frameDisplay()

3 回复 | 直到 16 年前

1

7

Matt 16 年前

问题是:如何确保动画具有恒定的帧速率,并在所有浏览器和系统上以相同的速度运行?

最好的方法是跟踪更新之间的增量(读:时差)。

(function () {
    function getTime() {
        return new Date().getTime();
    }
    var last = getTime();

    function update(delta) {
        // Update your application state on delta (ms of time passed)
    }

    (function loop() {
        update(last = getTime()-last);
        render();
        setTimeout(loop, 20); // 20 = attempt 50fps
    }());
}());

2

3

stagas 16 年前

答案 is here ,一篇由Glenn Fiedler撰写的伟大文章,需要稍加调整才能将其转换为Javascript,但原理是一样的。基本上,您需要使用累加器来累加增量计时,并在此基础上执行步骤。不需要改变任何物理数学或任何东西,解决方案是即插即用。也有一个很酷的插值,消除口吃,也允许你做超慢平滑运动(重播等)。这太棒了,适用于物理,应该适用于任何基于步进的运动。基本上所有你需要的准确时间游戏动作是在那里。

3

2

Falcon 16 年前

以变量形式保存当前系统时间。