为什么缓慢的jQuery动画起伏不定？

Question

我在搜索这个问题时遇到了困难，因为我能找到的大部分内容都是关于应该很快但行动缓慢的动画。我的问题是关于一个我希望持续时间很长但仍然很流畅的动画。

我已经创建了这个jsfiddle来演示这个问题：http://jsfiddle.net/93Bqx/

我试图让一个元素随着时间的推移慢慢移动到另一个位置。但动画非常不稳定。

基本上，归结为这样的事情：

$elem.animate({
        left: x,
        top: y
}, someLargeNumber);

我想知道问题是动画是否太慢以至于每一步都小于一个像素，所以它将它们四舍五入为0或1，使它看起来像是丢帧然后一次移动。但我不知道如何检查或解决这个问题。

有没有更好的方法来制作慢动画，以便它们流畅？我有一个类似的用CSS3创建并且翻译（x，y）很顺利，但不幸的是我需要比我想用CSS更灵活。

Answer 1

我想这是以编程方式进行动画的不可避免的讨价还价。 也许尝试一个专门用于动画的框架，如：

http://www.greensock.com/gsap-js/

但最好将动画调整为CSS。

Answer 2

即使使用CSS过渡，它也不会更顺畅。

我添加了Transit jQuery plugin来测试CSS转换，它看起来几乎相同。

您的代码包含小修正：http://jsfiddle.net/thirtydot/93Bqx/5/

相同的代码，但已添加Transit：http://jsfiddle.net/thirtydot/93Bqx/6/。

我认为这是（大多数？）浏览器不进行子像素渲染这一事实的限制。正如您所提到的，元素的x和y在动画的每一步之后都会被舍入，而这种舍入会导致难看的“摇摆”效果。

对于较少的病态测试用例，CSS转换版本确实看起来明显更好。阅读本文以获取更多信息：http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Answer 3

我认为这与移动元素的频率有关。例如，如果您每秒移动一次对象，它将显得不连贯。尝试减少每次移动之间的时间量以及减少每次移动之间的距离。有关示例，请参阅http://jsfiddle.net/2K9xP/。

所以我们......

var duration = Math.round(10 * distance);

而不是......

var duration = Math.round(1000 * distance);