javascript - 如何让 JavaScript 动画在所有系统的所有浏览器上以相同的速度播放？

Question

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

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

结果应该是:当它播放缓慢时，动画间隔首先应该减少，然后如果 DOM 显示缓慢，则尝试跳过一些帧 [通过跳过 frameDisplay() ]，直到它播放正确。当播放速度快时，动画间隔应该增加，使动画以正确的速度播放。

但是您如何在所有这些方面保持一致性，因为您无法始终确定浏览器何时会变慢，或者它们何时会运行得很快。例如，如果有一个巨大的运动尖峰，我们减少间隔以保持帧率稳定，然后突然大多数运动物体停止或不动太多，它会突然表现得非常快!

有什么想法吗？

Answer 1

The question is: How can I make sure the animation has a constant frame rate, and will run at the same speed on all browsers, on all systems?

您无法对帧率做任何事情。您唯一可以控制的是您的应用程序如何根据耗时进行更新。这在浏览器之外也是如此，也是游戏开发中的一个常见话题。

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

(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
    }());
}());

注意这里使用了setTimeout。这是为了避免调用 loop() 时不同步。即使之前的调用没有完成，setInterval 也会继续触发它。