Как я могу анимировать последовательность PNG с помощью jQuery (либо прокруткой, либо вызванной анимацией) [закрыто]


Все больше и больше я вижу эффект, когда png загружаются в серию DIVs (или один div), а затем последовательно, кадр за кадром, либо на основе нажатия кнопки, либо на основе прокрутки. Я попытался заглянуть в код, и я понимаю, что javascript делает тяжелую работу, но я все еще немного теряюсь, есть ли какие-либо учебники по этой технике? примеры?

Пример анимации (множественный div) http://atanaiplus.cz/index_en.html :

Пример анимации (один див.): http://www.hyundai-veloster.eu/

Пример прокрутки анимации: http://discover.store.sony.com/tablet/#design/ergonomics

2 5

2 ответа:

Вы просто хотите поменять атрибут src с помощью таймера setInterval

var myAnim = setInterval(function(){
  $(".myImageHolder").attr('src', nextImage);
}, 42);
Фокус в том, как вы генерируете nextImage. Это в значительной степени зависит от соглашений об именовании ваших изображений или от того, в каком направлении вы хотите запустить анимацию

Обновить

Или используйте плагин

Возможно, вместо переключения между различными изображениями, использовать технику спрайтинга, описанную в этом вопросе: Как показать анимированное изображение из PNG изображения с помощью javascript? [ как gmail ]