Теория и примеры создания анимации с помощью jQuery

Автор: Амадей Красавчик Дериглазов

Под анимацией в jQuery понимается последовательное изменение css-свойств объекта. Для этих целей в jQuery предназначена простая и очень мощная функция animate. В общем виде она имеет следующий вид:

.animate(properties, options)

Параметры animate

  • properties — список CSS-свойств с заданными конечными значениями, описывается в формате {свойство1:значение1, свойство2:значение2, …}
  • options– перечень дополнительных параметров, определяющих вариативность свойств процесса анимации, которые описываются в привычном формате {параметр1:значение1, параметр2:значение2, …}
Возможные значения параметров options для animate:
  • duration — продолжительность выполнения анимации. Необязательный параметр – в качестве значения может передаваться целое число, задающее количество миллисекунд, или строковые константы 'fast' или 'slow'. В случае 'fast' время анимации составит 200 миллисекунд, в случае 'slow' – 600 миллисекунд. По умолчанию используется значение 400 миллисекунд.
  • easing — изменение скорости анимации. Необязательный параметр – может принимать одно из двух значений 'swing' или 'linear'. По умолчанию считается равным 'swing'. В случае 'swing' анимационный процесс будет происходить с ускорением, а в случае 'linear' – равномерно.
  • specialEasing — позволяет установить для каждого css-свойства из перечисленных в разделе options собственное уникальное значение easing. Данный параметр является многомерным и имеет следующий синтаксис: specialEasing:{свойство1:'linear'/'swing', свойство2:'linear'/'swing', …}
  • complete — функция, которая будет вызвана после завершения анимации.
  • step — функция, вызываемая после каждой итерации обновления css-свойств объекта
  • queue — его возможными значениями могут быть либо true, либо false. Значение данного параметра определяет, нужно ли поместить текущую анимацию в очередь функций. В случае false, анимация будет запущена сразу же, не вставая в очередь. Значение по умолчанию – true.

Примеры анимации jQuery

А теперь, чтобы лучше понять, что к чему, давайте рассмотрим пример реализации модного способа предпросмотра фоток на современных сайтах в стили карусели. Итак:

foto2.animate( { left: 0 }, { duration: 1000, step: function(now, fx) { foto1.css({"left": 300+now+"px"}); } } );

Кратко поясню, foto2 и foto1 указатели на два контейнера div, для которых значения атрибута css-свойств position имеют значение absolute. Контейнеры эти используются для размещения картинок, причём оба они находятся внутри другого объекта div, для которого определён параметр style="position:relative;width:300px". Соответственно foto2 и foto1 имеют следующие координаты: дли видимой картинки – left: 0px; для невидимой - left: -300px.

Обратите внимание, что в функции step происходит изменение css-свойства left на значение now, которое содержит значение данного параметра для первой фотки после каждой итерацией. Сделано это для того, чтобы синхронизировать смещение первой фотки относительно второй, ибо если задать два отдельных animate() для каждой фотки, можно обнаружить, что смещение двух фоток будет происходить не синхронно.

Приведённый кусок кода реализует последовательное смещение невидимой фотки в зону просмотра, делая её видимой, а видимую фотку – в режиме строжайшей синхронности наоборот убирает с глаз долой. Далее вдаваться в подробности написания плагина для карусели фоток на jQuery не стану, ибо общий принцип мной обозначен. Единственное, что ещё может пригодиться – функция setTimeout(), которая позволит организовать циклический перебор картинок из заданного набора превьюшек. Как вариант алгоритма для перебора фоток, могу предложить следующую идею: с заданным интервалом времени производить замену невидимой фотки новой, после чего запускать описанный выше фрагмент с animate().

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

Ещё в качестве простого и очень полезного примера применения анимации jQuery приведу код, который поможет программно произвести прокрутку скроллинга.

$("body,html").animate({ scrollTop:значение }, 500);

В данном примере значение можно задать константой или вычислить, например, с помощью полезной функции jQuery offset(). Обратите внимание, в данном примере использована краткая форма синтаксиса функции animate():

.animate(properties, [duration], [easing], [complete])

Соответственно число 500 в примере относится к параметру duration.

Дата публикации: 21.05.2017

К списку гламурных манифестов сообщества «Профессия – делать сайты»