Директивы и компоненты

anime.js — это легковесная JavaScript-библиотека для создания анимаций HTML, CSS и SVG. Она позволяет управлять анимацией свойств элементов с высокой точностью, обеспечивая плавные переходы и широкие возможности синхронизации. Основная концепция заключается в использовании анимируемых объектов, свойств и таймингов.

Создание базовой анимации

Анимация создается с помощью функции anime():

anime({
  targets: '.box',
  translateX: 250,
  rotate: '1turn',
  duration: 2000,
  easing: 'easeInOutQuad'
});
  • targets — элементы, к которым применяется анимация. Может быть CSS-селектор, DOM-элемент или массив элементов.
  • translateX, rotate — свойства, которые изменяются. Поддерживаются CSS-свойства, атрибуты SVG, DOM-свойства и кастомные объекты.
  • duration — продолжительность анимации в миллисекундах.
  • easing — функция плавности (easeIn, easeOut, linear и т.д.).

Работа с компонентами анимации

Anime.js предоставляет возможность управлять отдельными компонентами анимации, которые можно комбинировать и повторно использовать.

Keyframes

Позволяют задавать последовательность состояний элемента:

anime({
  targets: '.circle',
  keyframes: [
    {translateY: 0},
    {translateY: 100},
    {translateY: 50},
    {translateY: 100}
  ],
  duration: 3000,
  easing: 'easeInOutSine'
});
  • Каждый объект в keyframes описывает отдельное состояние анимируемого свойства.
  • Порядок объектов определяет последовательность анимации.
  • Возможна комбинация нескольких свойств в одном ключевом кадре.

Timeline

Позволяет объединять несколько анимаций в единую цепочку с точным контролем времени:

let tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

tl.add({
  targets: '.box1',
  translateX: 250
})
.add({
  targets: '.box2',
  translateX: 250,
  offset: '-=500'
});
  • timeline управляет последовательностью анимаций.
  • offset позволяет задавать смещение относительно предыдущей анимации.
  • Каждая анимация timeline наследует общие параметры (например, easing или duration), если они не переопределены.

Настройка поведения анимации

Повтор и направление анимации:

anime({
  targets: '.box',
  translateY: 200,
  direction: 'alternate',
  loop: true
});
  • loop: true — бесконечный цикл. Можно указать число повторов.
  • direction: 'alternate' — анимация воспроизводится туда и обратно.

Callbacks и управление жизненным циклом:

anime({
  targets: '.box',
  translateX: 300,
  duration: 1000,
  begin: function(anim) {
    console.log('Анимация началась');
  },
  update: function(anim) {
    console.log('Текущее значение: ', anim.progress);
  },
  complete: function(anim) {
    console.log('Анимация завершена');
  }
});
  • begin — вызывается в начале анимации.
  • update — вызывается на каждом кадре, можно получать прогресс и изменять параметры динамически.
  • complete — вызывается после окончания анимации.

Анимация кастомных объектов

Anime.js может анимировать не только DOM-элементы, но и обычные JavaScript-объекты:

let obj = {x: 0, y: 0};

anime({
  targets: obj,
  x: 100,
  y: 200,
  round: 1, 
  easing: 'easeOutQuad',
  update: function() {
    console.log(obj.x, obj.y);
  }
});
  • Можно использовать свойства round для округления значений.
  • Объект изменяется постепенно, как если бы это были CSS-свойства.

Работа с SVG

Анимации SVG выполняются через атрибуты и трансформации:

anime({
  targets: 'circle',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1500,
  loop: true
});
  • strokeDashoffset позволяет создавать эффект «рисования» линии.
  • anime.setDashoffset автоматически рассчитывает длину пути для корректного эффекта.

Элементы управления

Anime.js предоставляет объекты для полного контроля:

let animation = anime({
  targets: '.box',
  translateX: 300,
  autoplay: false
});

animation.play();
animation.pause();
animation.restart();
animation.reverse();
  • autoplay: false позволяет управлять стартом вручную.
  • reverse() меняет направление текущей анимации.
  • Можно комбинировать с timeline для сложных последовательностей.

Итоговая структура

Ключевые компоненты anime.js:

  1. targets — элементы анимации.
  2. properties — CSS, SVG или кастомные свойства.
  3. keyframes — последовательность состояний.
  4. timeline — объединение анимаций с управлением временем.
  5. callbacks — обработка жизненного цикла.
  6. loop, direction — управление повторением.
  7. autoplay и control methods — ручное управление анимацией.

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

Оглавление