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

Question

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

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

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

基本上,它归结为这样的事情:

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

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

有没有更好的方法来做慢动画,所以他们是顺利的？我有一个类似的用CSS3创建并且翻译(x,y)很顺利,但遗憾的是我需要比我认为可以用CSS获得更多的灵活性.

Answer 1

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

但是将动画调整为CSS将是最好的.

是的,这是一个使用GreenSock的GSAP而不是顶部/左边的分叉:http://jsfiddle.net/2LpgY/1/它在webkit中更加流畅,但是Firefox使用了一种不同的抗锯齿技术像素渲染.所以thirtydot在某些情况下是浏览器的事情是正确的.我还认为CSS动画不会更好,特别是如果你需要严密控制 - 请参阅http://www.greensock.com/why-gsap/ (3认同)

Answer 2

即使使用CSS过渡也不太顺畅.

我添加了Transit jQuery插件来测试CSS转换,它看起来几乎相同.

相同的代码,但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/

我从来没有听说过这个; 我将不得不研究这个插件.谢谢你的建议!我查看了文档并将其从动画顶部和底部属性直接更改为使用其原生x/y并且它更平滑(但奇怪地有点摇摇晃晃)http://jsfiddle.net/XSEd8/ (5认同)