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

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

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

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

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

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