Добавление анимаций в timeline

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

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

В этом примере создается timeline с базовым easing и продолжительностью по умолчанию. Эти параметры будут применяться ко всем анимациям, добавленным в timeline, если они не переопределены индивидуально.

Добавление анимаций в timeline

Метод add() используется для включения анимаций в timeline. Основной синтаксис:

tl.add({
  targets: '.box',
  translateX: 250,
  opacity: 0.5
});

Параметр targets указывает на DOM-элементы или селекторы, к которым применяется анимация. Любые свойства CSS, поддерживаемые anime.js, могут быть анимированы, включая трансформации (translateX, rotate, scale) и свойства визуального отображения (opacity, color, backgroundColor).

Управление порядком анимаций

По умолчанию анимации в timeline выполняются последовательно. Для управления временем начала каждой анимации используется свойство offset. Значения offset могут быть абсолютными (в миллисекундах) или относительными (например, '-=500' — начать на 500 мс раньше окончания предыдущей анимации).

tl
  .add({ targets: '.box1', translateX: 250 })
  .add({ targets: '.box2', translateY: 100 }, '-=500'); // начинается на 500мс раньше окончания предыдущей

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

Использование функций для динамических значений

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

tl.add({
  targets: '.circle',
  translateX: (el, i) => i * 50, // смещение зависит от индекса
  delay: (el, i) => i * 200      // задержка для каждого элемента
});

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

Управление длительностью и easing для отдельных анимаций

Каждую анимацию в timeline можно настроить индивидуально, переопределяя глобальные параметры:

tl.add({
  targets: '.box',
  scale: [0, 1],
  duration: 1500,
  easing: 'easeInOutBack'
});

Даже если timeline задает глобальное значение duration и easing, отдельная анимация может иметь свои параметры. Это позволяет комбинировать последовательные и параллельные анимации с различной динамикой.

Циклические анимации и повторения

Timeline поддерживает циклы через параметр loop. Можно повторять все анимации внутри timeline или конкретные сегменты с определенной логикой:

const tl = anime.timeline({ loop: true });

tl.add({ targets: '.box', translateX: 250 })
  .add({ targets: '.box', rotate: 360, duration: 2000 });

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

События и обратные вызовы

Timeline предоставляет набор событий, на которые можно подписываться: begin, complete, update, loopBegin, loopComplete.

tl.add({ targets: '.box', translateX: 250 })
  .add({ targets: '.box', rotate: 180 })
  .finished.then(() => console.log('Все анимации завершены'));

Метод finished возвращает промис, который срабатывает после завершения всех анимаций в timeline. События позволяют интегрировать анимации с логикой приложения, запускать новые анимации или изменять DOM после окончания текущих эффектов.

Сложные композиции с timeline

Timeline позволяет строить сложные анимационные композиции:

  • Параллельные анимации: Используя offset, несколько элементов могут анимироваться одновременно.
  • Последовательные цепочки: Без указания offset анимации выполняются строго одна за другой.
  • Комбинированные эффекты: Сочетание параллельных и последовательных анимаций позволяет создавать «живые» сцены с множеством движущихся объектов.
tl.add({ targets: '.box1', translateX: 300 })
  .add({ targets: '.box2', translateY: 200 }, '-=800')
  .add({ targets: '.box3', rotate: 360 }, '+=500');

В этом примере .box2 начнет движение раньше окончания анимации .box1, а .box3 — через 500 мс после окончания предыдущей.

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

Оглавление