Как сделать анимацию Javascript / jQuery лучше?

Question

Веб-страница - - http://schnell.dreamhosters.com/spriteanimate.html

Просто перейдите на страницу и выберите «Просмотреть исходный код», и вы увидите весь код.

Сейчас все довольно просто.Клавиша со стрелкой вправо заставляет X идти вправо, клавиша со стрелкой влево заставляет его идти влево.Он выполняет анимацию бега в правильном направлении, и фактический элемент изображения перемещается в том же направлении.

Основная проблема, с которой я столкнулся сейчас, - это оптимизация.Если вы немного поэкспериментируете с этим, вы заметите, что анимация бега не всегда плавная, и в первые несколько секунд она кажется очень медленной, как будто она все еще загружает что-то.В этом виновата анимация движения налево.Другая проблема связана с .animate () из jQuery.Он делает что-то вроде остановки, и вы можете сказать.Движение элемента изображения прерывистое и не очень плавное.

.animate () из jQuery можно настроить с помощью замедления и тому подобного, но я не совсем уверен, что это ответ, и это все равно оставляет менясо случайным запаздыванием или что-то в этом роде.Так у кого-нибудь есть предложения?

Answer 1

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

Кроме того, используйте линейное ослабление, в противном случае по умолчанию будет колебание, которое входит и выходит медленно.

Answer 2

Рассматривали ли вы использование переходов CSS3 вместо стандартных анимаций jQuery.При этом вы будете иметь значительно лучшую производительность, но потеряете кросс-браузерную совместимость.Вот пример, который работает только в Chrome, но показывает мощность

http://girliemac.com/sandbox/matrix.html

и более о CSS3-анимациях

http://css3.bradshawenterprises.com/