Синтаксис и структура вызова

Библиотека anime.js строит анимации вокруг единого универсального вызова функции anime(). Вся конфигурация передаётся в виде объекта, который описывает что анимировать, какие свойства изменять и как именно это делать.

Общий синтаксис:

anime({
  targets: ...,
  property: value,
  property: {
    value: ...,
    duration: ...,
    easing: ...
  },
  duration: ...,
  easing: ...,
  delay: ...,
  loop: ...,
  direction: ...
});

Каждое поле объекта управляет определённым аспектом анимации. Основная идея — декларативное описание поведения.

Свойство targets

Ключ targets определяет элементы, к которым применяется анимация.

Возможные варианты:

targets: '.box'                  // CSS-селектор
targets: document.querySelector('.box') // DOM-элемент
targets: document.querySelectorAll('.box') // NodeList
targets: [el1, el2]             // массив элементов
targets: { x: 0 }               // JS-объект

anime.js умеет работать не только с DOM, но и с обычными объектами:

let obj = { x: 0 };

anime({
  targets: obj,
  x: 100,
  duration: 1000
});

Определение анимируемых свойств

Свойства указываются прямо в объекте конфигурации. Название свойства соответствует CSS или JS-свойству.

Простой пример:

anime({
  targets: '.box',
  translateX: 250
});

Здесь translateX — это трансформация, а значение 250 означает конечное положение.

Форматы значений

anime.js поддерживает несколько способов задания значений:

Числовые значения

translateX: 250

Интерпретируется как переход от текущего значения к 250.

Строки с единицами измерения

width: '200px',
rotate: '1turn'

Массив [from, to]

translateX: [0, 250]

Явно задаёт начальное и конечное значение.

Относительные значения

translateX: '+=100'
translateX: '-=50'

Изменение относительно текущего состояния.

Функции

translateX: function(el, i, l) {
  return i * 50;
}

Аргументы функции:

  • el — текущий элемент
  • i — индекс
  • l — общее количество элементов

Объектное описание свойства

Каждое свойство можно описывать как объект для детальной настройки:

anime({
  targets: '.box',
  translateX: {
    value: 250,
    duration: 1000,
    easing: 'easeInOutQuad'
  }
});

Это позволяет задавать индивидуальные параметры для каждого свойства.

Глобальные параметры анимации

Эти параметры применяются ко всей анимации, если не переопределены на уровне конкретного свойства.

duration

Продолжительность в миллисекундах:

duration: 1000

easing

Функция сглаживания:

easing: 'linear'
easing: 'easeInOutQuad'
easing: 'easeOutElastic(1, .5)'

delay

Задержка перед началом:

delay: 500

Также может быть функцией:

delay: (el, i) => i * 100

endDelay

Задержка после завершения:

endDelay: 300

loop

Количество повторов:

loop: true      // бесконечно
loop: 3         // три раза

direction

Направление анимации:

direction: 'normal'
direction: 'reverse'
direction: 'alternate'

Работа с несколькими элементами

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

anime({
  targets: '.box',
  translateX: 250,
  delay: (el, i) => i * 100
});

Каждый элемент получает свою задержку.

Массивы ключевых кадров (keyframes)

Позволяют описывать сложные последовательности:

anime({
  targets: '.box',
  keyframes: [
    { translateX: 100 },
    { translateY: 100 },
    { translateX: 0 },
    { translateY: 0 }
  ],
  duration: 2000
});

Каждый объект — отдельный этап анимации.

Специальные свойства трансформации

anime.js объединяет трансформации в удобный синтаксис:

  • translateX, translateY, translateZ
  • scale, scaleX, scaleY
  • rotate, rotateX, rotateY
  • skewX, skewY

Пример:

anime({
  targets: '.box',
  translateX: 200,
  rotate: '1turn',
  scale: 1.5
});

Цвета и их интерполяция

Поддерживаются разные форматы:

backgroundColor: '#ff0000'
backgroundColor: 'rgb(255, 0, 0)'
backgroundColor: 'hsl(0, 100%, 50%)'

anime.js автоматически интерполирует значения.

Комбинирование параметров

В одном вызове можно объединять множество настроек:

anime({
  targets: '.box',
  translateX: [0, 300],
  opacity: [0, 1],
  scale: {
    value: 2,
    duration: 1500
  },
  duration: 2000,
  easing: 'easeInOutExpo',
  delay: (el, i) => i * 200,
  loop: true,
  direction: 'alternate'
});

Возвращаемое значение

Вызов anime() возвращает объект управления анимацией:

let animation = anime({...});

Доступные свойства и методы:

animation.play()
animation.pause()
animation.restart()
animation.seek(500)
animation.finished.then(() => { ... })

Структура жизненного цикла

В конфигурации можно задавать колбэки:

anime({
  targets: '.box',
  translateX: 250,
  begin: function(anim) {},
  update: function(anim) {},
  complete: function(anim) {}
});

Основные события:

  • begin — начало
  • update — каждый кадр
  • complete — завершение

Вложенность и переопределение

Параметры могут наследоваться и переопределяться:

anime({
  targets: '.box',
  duration: 2000,
  translateX: {
    value: 250,
    duration: 1000 // переопределяет глобальный duration
  }
});

Логика приоритета

Порядок применения параметров:

  1. Значения внутри свойства
  2. Глобальные параметры
  3. Значения по умолчанию библиотеки

Итоговая модель вызова

Синтаксис anime.js строится вокруг трёх ключевых компонентов:

  • targets — что анимируется
  • properties — какие значения изменяются
  • timing/options — как происходит изменение

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

Оглавление