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

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

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

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

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

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

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

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

Ответы

Ответ 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/

Ответ 2

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

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

но лучше всего адаптировать анимацию к CSS.

Ответ 3

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

Итак, у нас есть...

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

вместо...

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