Категория:
Опубликовано:

jQuery.easing - улучшаем анимацию jQuery

jQuery.easing

Ни для кого не секрет что jQuery - один из основных инструментов анимации WEB-страниц.

С его помощью можно анимировать все: текст, блоки и другие элементы.

Для всего этого есть куча разнообразных эффектов и их параметров, одним из которых есть "easing" - скорость анимации. Про него и поговорим.

Параметр easing определяет динамику выполнения анимации.

От этого параметра зависит то, как будет происходить анимация. Например ускорятся к завершению, или создать эффект "скачка"...

Течение анимации принято описывать с помощью кривых Безье.

Кривые Безье

По умолчанию, в jQuery возможно применение только 2-х параметров: "linear" - равномерная анимация, и "swing" - анимация с ускорением. И применение других эффектов не представляется возможным.

Но это легко исправить с помощью плагина jQuery.easing.

После его подключения можно применять всевозможные эффекты, используя их стандартные названия: easeInSine, easeInOutQuad, easeOutBack и т.п.

Применять эти эффекты очень просто, достаточно указать название необходимого параметра в настройках анимации, например:

jQuery(document).ready(function($) {
  $('div').animate({ heihgt: '300px' }, 800, easeOutBounce)
});

Для того чтобы не запутаться во всех этих названиях есть прекрасный сайтик-шпаргалка по функциям easing.

Применяя подобные эффекты можно добиться более реалистичного поведения анимируемых элементов.

Теги: 
Если у Вас возникли вопросы, замечания, предложения или просто благодарность - пишите в комментариях.
Делитесь полезными материалами в социальных сетях.
Добавить комментарий