Функции плавности

Функции плавности (easing functions) в anime.js управляют темпом анимации, определяя, как значения свойств изменяются во времени. Они позволяют создать более естественные и динамичные движения, уходя от линейного и статичного изменения.

В anime.js функции плавности задаются через свойство easing при конфигурации анимации:

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  easing: 'easeOutElastic(1, .8)'
});

Здесь easeOutElastic(1, .8) — это функция плавности, которая придаёт анимации эффект «отскока» в конце.

Категории функций плавности

Anime.js включает несколько групп easing-функций, каждая из которых имеет специфическое поведение:

Линейные

  • linear — равномерное движение без ускорений и замедлений.
  • Используется для статичных или технических анимаций, где важна постоянная скорость.

Классические кривые

  • easeIn — анимация начинается медленно и ускоряется к концу.
  • easeOut — быстро стартует и замедляется к завершению.
  • easeInOut — сочетает два эффекта: медленный старт и замедление в конце.
  • Примеры:
anime({
  targets: '.circle',
  translateY: 200,
  duration: 1200,
  easing: 'easeInOutQuad'
});

Эластичные и пружинные

  • easeInElastic, easeOutElastic, easeInOutElastic — создают эффект колебания, имитирующий пружину.

  • В скобках указываются параметры:

    • amplitude — амплитуда колебаний.
    • period — частота колебаний.
anime({
  targets: '.ball',
  translateX: 300,
  duration: 1500,
  easing: 'easeOutElastic(1.5, 0.3)'
});

“Back” эффекты

  • easeInBack, easeOutBack, easeInOutBack — создают эффект небольшого «отката» в начале или конце движения.
  • Параметр s регулирует интенсивность «отката».
anime({
  targets: '.panel',
  translateY: 150,
  duration: 1000,
  easing: 'easeOutBack(1.7)'
});

“Bounce” эффекты

  • easeInBounce, easeOutBounce, easeInOutBounce — имитируют падение с отскоком.
  • Эффект создаётся комбинацией квадратичных и кубических кривых для имитации гравитации.

Создание кастомных функций плавности

Anime.js позволяет задавать собственные функции плавности в виде функции от времени t, где t принимает значение от 0 до 1:

const myEasing = t => t < 0.5 
  ? 4 * t * t * t 
  : 1 - Math.pow(-2 * t + 2, 3) / 2;

anime({
  targets: '.custom',
  translateX: 400,
  duration: 1500,
  easing: myEasing
});
  • Для t=0 — начальное состояние.
  • Для t=1 — конечное состояние.
  • Любая функция возвращает значение прогресса анимации, что позволяет создавать уникальные кривые ускорения.

Использование функций плавности с ключевыми кадрами

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

anime({
  targets: '.multi',
  translateX: [
    { value: 250, duration: 800, easing: 'easeInQuad' },
    { value: 0, duration: 800, easing: 'easeOutQuad' }
  ],
  rotate: { value: 360, duration: 1600, easing: 'easeInOutSine' }
});
  • translateX и rotate анимируются независимо, каждая с собственной кривой.
  • Это позволяет комбинировать разные эффекты и создавать сложные, реалистичные движения.

Практические рекомендации

  • Выбор функции зависит от контекста: линейная подходит для интерфейсных элементов, эластичная и bounce — для визуально «живых» объектов.
  • Комбинация нескольких функций создаёт естественные анимации без резких остановок.
  • Кастомные функции полезны, когда стандартные easing-функции не дают нужного визуального результата.

Функции плавности — фундаментальный инструмент в anime.js для придания анимации естественности и выразительности, позволяя управлять скоростью и характером движения каждого объекта.

Оглавление