为什么慢的jQuery动画不断？ [英] Why are slow jQuery animations choppy?

问题描述

我很难找到这个问题，因为我可以找到的大部分内容都是关于动画，应该是快速但行动缓慢。我的问题是关于一个动画，我想有一个很长的时间，但仍然流畅。

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

我试图使元素慢慢随着时间推移移动到另一个位置。

$ b

基本上，它可以归结为这样：

$ elem.animate（{
left：x，
top：y
}，someLargeNumber）;


我想知道如果问题是动画是如此之慢，像素，所以它是四舍五入他们到0或1，使它看起来丢帧，然后一次移动。但我不知道如何检查或解决这个问题。

有没有更好的方法来做慢动画，所以他们很顺利？我有一个类似的一个创建与CSS3和translate（x，y）是顺利，但不幸的是，我需要更多的灵活性，我认为我可以得到CSS。

解决

我添加了 Transit jQuery plugin 来测试CSS转换，而且看起来几乎一样。

修正： http://jsfiddle.net/thirtydot/93Bqx/5/

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

我认为这是一个限制，（大多数？）浏览器不做子像素渲染。正如你所提到的，元素的 x 和 y 在动画的每一步之后都被四舍五入，这导致了难看的。ling效应。

CSS转换版本对于较少的病理测试案例看起来明显更好。有关详情，请阅读此文档： http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

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/

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.

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.

解决方案

It's not much smoother even using a CSS transition.

I added the Transit jQuery plugin to test a CSS transition instead, and it looks almost the same.

Your code with minor fixes: http://jsfiddle.net/thirtydot/93Bqx/5/

Same code but with Transit added: 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 x and y of the element is rounded after every step of the animation, and it's this rounding that causes the unsightly "jiggling" effect.

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/

这篇关于为什么慢的jQuery动画不断？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！