如何使JavaScript动画在所有系统的所有浏览器上以相同的速度播放？ [英] How do I make a JavaScript animation play at the same speed on all browsers on all systems?

问题描述

我有一个函数来计算在X和Y轴上移动的各种对象的动画中的下一帧[我称之为 frameRender（）]和一个函数将结果帧应用到对象[我调用 frameDisplay（）]。对象不仅从点A移动到B，它们不断移动，总是接收新的目标坐标。我使用 setInterval（）与 1000 / frameRate 间隔，但似乎根本不工作作为浏览器没有准确的时间。

I have a function that calculates the next frame in an animation of various objects moving in both X and Y axis [ I call it frameRender() ] and a function that applies that resulting frame to the objects [ I call that frameDisplay() ]. The objects don't just move from point A to B, they move constantly, always receiving new target coords. I use a setInterval() with a 1000/frameRate interval but that doesn't seem to work at all as browsers don't have accurate timings.

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

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? I have tried everything and can't seem to get an accurate result even on just different browsers (I test on Firefox and Chrome, Chrome usually displays a lot faster).

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

The result should be: When it plays slow, the animation interval should decrease at first, and then try to skip some frames [ by skipping frameDisplay() ] if it the DOM displays slow, until it plays correctly. When it plays fast, the animation interval should increase, making the animation play at the correct speed.

但是如何保持一致性，因为你可以'总是确定当浏览器将变慢，或者他们将执行快。例如，如果有大的运动尖峰，我们减少间隔以保持帧速率稳定，然后突然大多数运动对象停止或不移动太多，它会突然执行真快！

But how do you keep consistency in all of this, since you can't always be sure when the browsers will become slow, or when they will perform fast. For example, if there is huge spike of movements, and we decrease the interval to keep the frame rate steady, and then suddenly most of the moving objects stop or don't move much, it will suddenly perform really fast!

任何想法？

推荐答案

答案这里是一个伟大的文章，Glenn Fiedler，需要一些调整来转换它在Javascript中，但原则是相同。基本上，您需要使用累加器增加增量时序，并执行基于此的步骤。不需要改变任何物理数学或任何东西，解决方案是插件播放。还有一个很酷的内插器，可以消除口吃，还允许你做超级慢动作（用于重放等）。这是太棒了，工程物理，应该工作在任何基于步骤的运动。基本上所有你需要准确的时间游戏运动是有。

The answer is here, a great article by Glenn Fiedler, needs a little tweaking to convert it in Javascript but the principles are the same. Basically, you need to use an accumulator that adds up delta timings, and execute steps based on that. No need to change any physics math or anything, the solution is plug n play. Also has a cool interpolator that removes stuttering and also allows you to do super slow smooth motion (for replays etc.). It's fantastic, works for physics and should work on any step based motion. Basically all you need for accurate timing game motion is there.

这篇关于如何使JavaScript动画在所有系统的所有浏览器上以相同的速度播放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！