Почему медленная анимация jQuery изменчивая?

Question

У меня возникли проблемы с этим вопросом, потому что большинство вещей, которые я могу найти, это анимации, которые должны быть быстрыми, но действуют медленно. Мой вопрос касается анимации, что я хочу иметь длительную продолжительность, но все равно быть гладкой.

Я создал этот jsfiddle продемонстрировать вопрос: http://jsfiddle.net/93Bqx/

Я пытаюсь сделать элемент медленно двигаться в другое положение с течением времени. Но анимация очень изменчив.

В основном это сводится к тому, что-то вроде этого:

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

Я интересно, если проблема заключается в том, что анимация настолько медленно, что каждый шаг меньше, чем пиксель, и поэтому он округление их либо 0, либо 1, что означает, что он падает на кадры, а затем перемещается все сразу. Но я не знаю, как бы это проверить или исправить.

Есть ли лучший способ делать медленные анимации, чтобы они были гладкими? У меня был подобный, созданный с помощью CSS3 и переведенный (x, y), который был гладким, но, к сожалению, мне нужна большая гибкость, чем я думаю, что могу получить с помощью CSS.

Answer 1

Это не очень гладко, даже с помощью перехода 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 2

Я предполагаю, что это неизбежная сделка с программной анимацией. Может попробовать рамки специализируется на анимации, как:

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

но адаптация анимации CSS будет лучше.

Answer 3

Я думаю, что это как-то связано с тем, как часто вы перемещаете элемент. Например, если вы перемещаете объект один раз в секунду, это будет казаться изменчивым. Попробуйте уменьшить время между каждым движением, а также уменьшить расстояние между каждым движением. См. Пример http://jsfiddle.net/2K9xP/.

Итак, мы имеем ...

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

вместо ...

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