javascript 为什么缓慢的 jQuery 动画断断续续？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17996519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why are slow jQuery animations choppy?
提问by Brad Dwyer
I'm having a hard time googling this issue because most of the things I can find are about animations that are supposed to be fast but are acting slow. My question is regarding an animation that I want to have a long duration but still be smooth.
我很难用谷歌搜索这个问题，因为我能找到的大部分东西都是关于动画的，这些动画应该很快，但动作很慢。我的问题是关于一个我想要持续很长时间但仍然流畅的动画。
I've created this jsfiddle to demonstrate the issue: http://jsfiddle.net/93Bqx/
我创建了这个 jsfiddle 来演示这个问题：http: //jsfiddle.net/93Bqx/
I'm trying to make an element slowly move to another position over time. But the animation is very choppy.
我试图让一个元素随着时间的推移慢慢移动到另一个位置。但动画非常断断续续。
Basically, it boils down to something like this:
基本上，它归结为这样的事情：
$elem.animate({
left: x,
top: y
}, someLargeNumber);
I'm wondering if the problem is that the animation is so slow that each step is less than a pixel and so it is rounding them to either 0 or 1 making it appear to drop frames and then move all at once. But I don't know how I would check or fix this.
我想知道问题是否是动画太慢以至于每个步骤都小于一个像素，因此它将它们四舍五入为 0 或 1，使其看起来丢帧，然后立即移动。但我不知道如何检查或解决这个问题。
Is there a better way to be doing slow animations so they're smooth? I had a similar one created with CSS3 and translate(x,y) that was smooth but unfortunately I need more flexibility than I think I can get with CSS.
有没有更好的方法来制作慢速动画，让它们变得流畅？我用 CSS3 创建了一个类似的，并且 translate(x,y) 很流畅，但不幸的是，我需要比我认为使用 CSS 可以获得的更大的灵活性。
采纳答案by thirtydot
It's not much smoother even using a CSS transition.
即使使用 CSS 过渡也不会更流畅。
I added the Transit jQuery pluginto test a CSS transition instead, and it looks almost the same.
我添加了Transit jQuery 插件来测试 CSS 转换，它看起来几乎一样。
Your code with minor fixes: http://jsfiddle.net/thirtydot/93Bqx/5/
您的代码有小修正：http: //jsfiddle.net/thirtydot/93Bqx/5/
Same code but with Transit added: http://jsfiddle.net/thirtydot/93Bqx/6/.
相同的代码，但添加了 Transit：http: //jsfiddle.net/thirtydot/93Bqx/6/。
I think this is a limitation of the fact that (most?) browsers don't do subpixel rendering. As you mentioned, the xand yof the element is rounded after every step of the animation, and it's this rounding that causes the unsightly "jiggling" effect.
我认为这是（大多数？）浏览器不进行子像素渲染这一事实的限制。正如您所提到的，元素的x和y在动画的每一步之后都会四舍五入，正是这种四舍五入导致了难看的“抖动”效果。
The CSS transition version does look noticeably better for less pathological test cases. Read this for more information: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
对于不那么病理性的测试用例，CSS 过渡版本确实看起来明显更好。阅读更多信息：http: //www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
回答by Dek Dekku
I guess it's the inevitable bargain with doing animation programmatically. Maybe try a framework specialized in animation like:
我想这是以编程方式制作动画不可避免的讨价还价。也许尝试一个专门用于动画的框架，例如：
http://www.greensock.com/gsap-js/
http://www.greensock.com/gsap-js/
but adapting the animation to CSS would be best.
但是最好将动画调整为 CSS。
回答by Dan Lister
I think it has something to do with how often you move an element. For example, if you move the object once every second, it will seem choppy. Try decreasing the amount of time between each move as well as decreasing the distance between each move. See http://jsfiddle.net/2K9xP/for an example.
我认为这与您移动元素的频率有关。例如，如果您每秒移动一次对象，它看起来会断断续续。尝试减少每次移动之间的时间量以及减少每次移动之间的距离。有关示例，请参见http://jsfiddle.net/2K9xP/。
So we have...
所以我们有...
var duration = Math.round(10 * distance);
instead of...
代替...
var duration = Math.round(1000 * distance);
