Контроль над динамикой анимации

Если вы сталкивались когда-либо ранее с анимацией и работали с различными средствами для редактирования видео (к примеру, Adobe Flash), то вы, вероятно, слышали уже про динамику анимации (easing). Динамика анимации подразумевает под собой контроль над ускорением и замедлением анимации. Представленный способ позволяет придать анимации большую естественность, сходство с различными физическими свойствами, существующими в реальном мире.

Динамика анимации позволяет применить виртуальные физические свойства к объекту, который анимируется при помощи разнообразных алгоритмов, управляющих скоростью анимации. Динамика анимации целиком построена на математике. jQuery обладает несколькими встроенными типами динамики.

В jQuery реализовано два вида динамики — «linear» и «swing». Линейная динамика анимирует объект по его значениям от точки A до точки B, как и должен работать любой профессиональный скрипт. Никакого ускорения или замедления при этом не происходит.

Колеблющаяся динамика (swing) стартует очень медленно, затем постепенно разгоняется, получает максимальную скорость, после чего замедляется до полного окончания анимации. Эта динамика анимации установлена в jQuery по умолчанию, поскольку она является предпочтительной в большинстве ситуаций. Такой выбор, вероятно, связано с тем, что большинство объектов в нашем материальном мире взаимодействуют нелинейно; разгон происходит не моментально, а постепенно, как и замедление (если, конечно, на пути не было никаких препятствий).

Поскольку swing является значением по умолчанию для динамики, проверим, что будет с нашим предыдущим скриптом, если мы сменим динамику на linear:

...
jQuery('.post p').animate({'backgroundColor':'#99ccff'
  }, 2000, 'linear');
...

Различие едва уловимо, однако оно присутствует. Линейная динамика происходит более резко.

Дополнительные варианты динамики

Если вам недостаточно стандартных видов динамики, вы всегда можете расширить их набор с помощью специального плагина. Ознакомиться с существующими на сегодняшний день типами динамики можно на сайте: http://gsgd.co.uk/sandbox/jquery/easing/.

Интересные алгоритмы анимации можно отыскать на сайте: http://www.robertpenner.com/easing/.