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

发布于 2024-09-07 13:37:44 字数 647 浏览 4 评论 0原文

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

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

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

但是，如何保持所有这一切的一致性，因为您不能总是确定浏览器何时会变慢，或者何时会执行得很快。例如，如果有巨大的运动峰值，我们减少间隔以保持帧速率稳定，然后突然大多数运动物体停止或不运动太多，它会突然执行得非常快！

有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绻影浮沉 2024-09-14 13:37:44

问题是：如何确保动画具有恒定的帧速率，并且在所有浏览器、所有系统上以相同的速度运行？

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

最好的办法是跟踪更新之间的增量（读：时间差）。

(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 也会继续触发它。

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?

You can't do anything about the framerate. The only thing you can control is how your application updates based on time passed. This is true outside of browsers as well, and a common topic in game development.

The best thing to do is track the delta (read: time difference) between updates.

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

Notice the use of setTimeout here. This is to avoid the loop() from being called out of sync. setInterval will keep firing it even if a previous call didn't finish.

回复收藏 0 原文

じее 2024-09-14 13:37:44

答案就在这里，Glenn Fiedler 的一篇很棒的文章，需要一点调整以将其转换为 Javascript，但原理是相同的。基本上，您需要使用累加器来累加增量时序，并基于此执行步骤。无需改变任何物理数学或任何东西，解决方案是即插即用。还有一个很酷的插值器，可以消除口吃，还可以让您进行超级慢速平滑运动（用于重播等）。它太棒了，适用于物理，并且应该适用于任何基于步骤的运动。基本上，精确计时游戏动作所需的一切都在这里。

回复收藏 0 原文