如何让我以同样的速度一个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移动，他们不断地移动，总是接受新的目标COORDS。我用的是的setInterval（）与 1000 /帧率间隔，但似乎并不在所有的工作作为浏览器没有准确的计时。

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!

任何想法？

推荐答案

答案是这里，格伦费德勒一个伟大的文章，需要一点点调整，将其转换在Javascript，但原理是一样的。基本上，你需要使用增加了三角洲计时蓄能器，并执行基于步骤。无需改变任何物理数学什么的，解决的办法是插N PLAY。也有一个很酷的内插器，消除口吃，也可以让你做超慢运动平稳（用于回放等）。这是梦幻般的，适用于物理，应该在任何步骤中，基于移动办公。基本上所有你需要精确定时的运动游戏在那里。

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屋！