javascript - 为什么缓慢的 jQuery 动画不稳定？

Question

我很难在谷歌上搜索这个问题，因为我能找到的大多数东西都是关于应该快但动作慢的动画。我的问题是关于我想要长时间但仍然流畅的动画。

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

我试图让一个元素随着时间的推移慢慢移动到另一个位置。但是动画很不流畅。

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

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

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

有没有更好的方法来制作慢速动画以使其流畅？我用 CSS3 和 translate(x,y) 创建了一个类似的，它很流畅，但不幸的是，我需要的灵活性比我认为的 CSS 所能获得的要大。

score 7 · Accepted Answer

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

但最好将动画适应 CSS。

score 5 · Accepted Answer

即使使用 CSS 过渡也不会更流畅。

我添加了Transit jQuery 插件来测试 CSS 转换，它看起来几乎一样。

您的代码进行了小修复：http: //jsfiddle.net/thirtydot/93Bqx/5/

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

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

CSS 过渡版本对于不那么病态的测试用例看起来明显更好。阅读此内容以获取更多信息： http: //www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

score 0 · Accepted Answer

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

所以我们有...

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

代替...

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

3 回答 3