Полный список параметров

Библиотека anime.js использует гибкую систему параметров, позволяющую настраивать практически каждый аспект анимации. Основные параметры включают:

  • targets – указывает элементы, к которым будет применена анимация. Может быть строкой CSS-селектора, DOM-элементом, массивом элементов или объектом с числовыми свойствами.
  • duration – длительность анимации в миллисекундах. Например, duration: 1000 задаёт анимацию на 1 секунду.
  • delay – задержка перед началом анимации. Может быть числом или функцией, возвращающей значение для каждого целевого элемента.
  • easing – тип интерполяции анимации. Поддерживаются строки с предустановленными функциями, например 'linear', 'easeInOutQuad', 'spring(1, 80, 10, 0)'.
  • loop – количество повторений анимации. Может быть числом или true для бесконечного цикла.
  • direction – направление воспроизведения анимации. Возможные значения: 'normal', 'reverse', 'alternate', 'alternate-reverse'.
  • autoplay – флаг автоматического запуска. Если false, анимация запускается вручную методом anime.play().

Свойства, изменяемые в анимации

Каждое свойство объекта анимации описывает, какие значения должны быть анимированы. Основные ключи:

  • value – конечное значение свойства. Может быть числом, строкой с единицами (например, '100px'), массивом [начальное, конечное], функцией, возвращающей значение.
  • duration – локальная длительность для конкретного свойства, перекрывающая глобальный duration.
  • delay – локальная задержка для свойства.
  • easing – локальная кривая интерполяции.
  • round – округление числовых значений, например, 1 округляет до целых.
  • elasticity – коэффициент пружинности для свойств, поддерживающих эффекты «отскока».
  • keyframes – массив промежуточных состояний анимации. Каждый ключевой кадр задаёт value, duration, easing и delay.

Пример использования ключевых кадров:

anime({
  targets: '.box',
  keyframes: [
    {translateX: 250},
    {translateY: 150},
    {translateX: 0},
    {translateY: 0}
  ],
  duration: 4000,
  easing: 'easeInOutQuad'
});

Работа с цветами и сложными свойствами

anime.js поддерживает анимацию CSS-свойств, включая цвета:

  • backgroundColor, color, borderColor – принимают строковые значения в формате HEX, RGB, RGBA или именованных цветов.
  • stroke, fill – для SVG-элементов.
  • Пример:
anime({
  targets: '.circle',
  backgroundColor: '#FF0000',
  duration: 1000,
  easing: 'linear'
});

Трансформации (translateX, translateY, rotate, scale, skew) работают с числовыми значениями и единицами, если указано. Можно комбинировать несколько свойств в одной анимации.

Функции обратного вызова (callbacks)

Для управления жизненным циклом анимации доступны:

  • begin – вызывается при старте анимации.
  • update – вызывается при каждом кадре анимации. Получает объект с текущими значениями всех свойств.
  • complete – вызывается по завершении анимации.
  • loopBegin и loopComplete – вызываются при начале и завершении каждого цикла анимации.
  • changeBegin и changeComplete – вызываются при начале и окончании изменений конкретного свойства.

Пример:

anime({
  targets: '.box',
  translateX: 200,
  duration: 1000,
  begin: () => console.log('Анимация началась'),
  complete: () => console.log('Анимация завершена')
});

Функции генерации значений

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

  • value как функция получает el (элемент) и i (индекс элемента) и возвращает конечное значение.
  • delay может быть функцией, возвращающей задержку для каждого элемента.
  • Пример:
anime({
  targets: '.box',
  translateX: (el, i) => i * 50,
  delay: (el, i) => i * 100,
  duration: 1000
});

Важные дополнительные параметры

  • strokeDashoffset / strokeDasharray – для анимации обводки SVG.
  • opacity – прозрачность элемента, числовое значение от 0 до 1.
  • scaleX, scaleY, scale – изменение размеров по осям.
  • translateZ, rotateX, rotateY, rotateZ – 3D-трансформации.
  • direction с 'alternate' позволяет чередовать прямое и обратное воспроизведение.
  • endDelay – задержка после завершения анимации перед её окончанием или повтором.

Комбинированные анимации и последовательности

Anime.js позволяет создавать сложные последовательности с помощью функции anime.timeline(). Основные параметры для timeline:

  • timeline.offset – смещение начала анимации относительно предыдущей.
  • timeline.loop – зацикливание всей последовательности.
  • timeline.autoplay – автоматический старт.
  • Каждый шаг timeline использует те же параметры, что и обычная анимация.

Пример:

const tl = anime.timeline({loop: true, easing: 'easeInOutQuad'});
tl.add({targets: '.box', translateX: 250, duration: 500})
  .add({targets: '.box', translateY: 100, duration: 500}, '-=250')
  .add({targets: '.box', rotate: 360, duration: 800});

Особенности использования с SVG и DOM

  • SVG-анимация поддерживает трансформации, атрибуты cx, cy, r, strokeDasharray, strokeDashoffset.
  • DOM-анимация работает с CSS-свойствами и трансформациями.
  • Можно анимировать массивы объектов с произвольными свойствами, создавая динамические эффекты для сложных интерфейсов.

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

Оглавление