Управление timeline

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

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

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

В приведённом примере все анимации в timeline будут использовать плавное ускорение easeOutExpo и продолжительность 750 мс по умолчанию, если для конкретной анимации не указано иное.

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

Анимации добавляются в timeline с помощью метода add(). Каждый вызов add() создаёт новый шаг анимации:

tl
  .add({
    targets: '.box1',
    translateX: 250,
    opacity: 1
  })
  .add({
    targets: '.box2',
    translateY: 100,
    opacity: 1
  });

Ключевые параметры add():

  • targets — CSS-селекторы, DOM-элементы или массив элементов.
  • duration — длительность анимации в миллисекундах.
  • easing — функция ускорения.
  • delay — задержка перед запуском анимации в миллисекундах.
  • offset — позиция анимации в timeline относительно начала или предыдущего шага.

Управление смещением (offset)

Параметр offset позволяет точно указать момент начала каждой анимации в timeline:

tl
  .add({
    targets: '.box1',
    translateX: 250
  }, 0) // начало в 0 мс
  .add({
    targets: '.box2',
    translateY: 100
  }, '+=500') // через 500 мс после предыдущей анимации
  .add({
    targets: '.box3',
    scale: 1.5
  }, 300); // начать в 300 мс от начала timeline

Типы значений offset:

  • Числовое значение — абсолютное смещение в миллисекундах.
  • Строка вида '+=N' или '-=N' — относительное смещение от предыдущей анимации.
  • Функция — позволяет вычислять смещение динамически.

Управление воспроизведением Timeline

Timeline предоставляет методы управления воспроизведением, аналогичные одиночной анимации:

  • play() — запускает timeline.
  • pause() — приостанавливает воспроизведение.
  • restart() — перезапускает timeline с начала.
  • reverse() — меняет направление воспроизведения.
  • seek(time) — перемещает указатель времени на time миллисекунд.

Пример:

tl.play();
setTimeout(() => tl.pause(), 1000);
setTimeout(() => tl.reverse().play(), 1500);

Циклы и повторение

Timeline поддерживает повторение всех анимаций с помощью параметра loop. Его можно установить при создании timeline или при добавлении отдельных анимаций:

const tl = anime.timeline({
  loop: true,
  easing: 'easeInOutSine'
});

tl.add({
  targets: '.circle',
  translateX: 200
});

Timeline может использовать логическое значение true для бесконечного цикла или числовое значение для определённого количества повторов.

Синхронизация нескольких анимаций

Timeline позволяет запускать несколько анимаций параллельно, задавая одинаковый offset для разных шагов:

tl
  .add({
    targets: '.box1',
    translateX: 200
  }, 0)
  .add({
    targets: '.box2',
    translateY: 150
  }, 0) // запускается одновременно с предыдущей
  .add({
    targets: '.box3',
    scale: 1.5
  }, '+=500'); // через 500 мс после первых двух

Это упрощает создание сложных визуальных эффектов с параллельным движением элементов.

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

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

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

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

Управление временем анимации

Timeline предоставляет доступ к текущему времени воспроизведения и общей длительности:

  • tl.duration — общая длительность всех шагов.
  • tl.completed — проверка завершения timeline.
  • tl.currentTime — текущее время с начала воспроизведения.

Пример контроля времени:

tl.seek(500); // перемещает timeline на 500 мс
console.log(tl.duration);

Интеграция с событиями

Timeline поддерживает события, которые вызываются в процессе анимации:

  • begin — при старте timeline.
  • update — на каждом кадре.
  • complete — при завершении timeline.
  • loopBegin / loopComplete — для циклических анимаций.
tl
  .add({
    targets: '.box',
    translateX: 300
  })
  .finished.then(() => console.log('Timeline завершен'));

Метод finished возвращает промис, который срабатывает при завершении всех шагов timeline.

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

Оглавление