Easing функции

Функции для реалистичной анимации

Поигрались и хватит, пора усложнить вам жизнь. У метода animate() может быть более одного аргументов, и пора приступить к их разбору. Набор аргументов может быть разным; приведу первый, тот, что попроще:

properties	CSS-свойства – с этим мы уже познакомились
duration	скорость анимации, уже упоминалась ранее, указывается в миллисекундах, или используя ключевые слова «fast» или «slow»
easing	указываем, какую функцию будем использовать для изменения значений
complete	функция, которая будет вызвана после окончания анимации

Из приведённых параметров нам только «easing» не встречался ранее – я его берёг для данного момента. Этот параметр указывает, какая функция будет использоваться для процесса анимации значений. Это могут быть линейные, квадратичные, кубические и любые другие функции. «Из коробки» мы можем выбрать лишь между «linear»:

linear

и «swing»:

swing

Заглянув в код jQuery, мы легко найдём соответствующий код:

jQuery.easing = {
    linear: function( p ) {
        return p;
    },
    swing: function( p ) {
        return 0.5 - Math.cos( p * Math.PI ) / 2;
    },
    _default: "swing"
};

p – коэффициент прохождения анимации, изменяется от 0 до 1.

Хотите больше easing-функций? Тогда ищите easing plugin на странице https://gsgd.co.uk/sandbox/jquery/easing/, он действительно из разряда «must have».

Пример анимации с использованием плагина easinganton.shevchuk.name

В качестве путеводителя по easing-функциям можете использовать страничку https://easings.net/.

О том, как написать свою функцию для анимации я расскажу попозже.