Очередь анимаций

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

Параметр delay

delay определяет задержку перед запуском анимации. Значение может быть:

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

В примере каждая последующая .box сдвигается с задержкой 100 мс относительно предыдущей.

Использование timeline для последовательных анимаций

Для организации нескольких анимаций в очередь используется anime.timeline(). Она позволяет задавать порядок и временные сдвиги анимаций без необходимости вручную рассчитывать задержки.

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

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

Ключевые моменты timeline:

  • Метод .add() добавляет новую анимацию к очереди.

  • Второй аргумент позволяет управлять смещением относительно предыдущей анимации:

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

  • Все анимации timeline используют общие настройки, заданные при создании, если они не переопределены.

Параметр loop и повторение очереди

loop позволяет зациклить анимацию или всю timeline:

anime({
  targets: '.circle',
  scale: [0, 1],
  loop: true,
  easing: 'easeInOutSine'
});
  • loop: true — бесконечное повторение.
  • loop: 3 — повтор трижды.

Для timeline:

const tl = anime.timeline({ loop: 2 });
tl.add({ targets: '.box1', translateX: 200 });
tl.add({ targets: '.box2', translateY: 100 });

Результат: весь набор анимаций воспроизводится дважды.

Метод finished для синхронизации

timeline.finished возвращает Promise, который срабатывает после завершения всей очереди. Позволяет запускать действия или новые анимации только после завершения текущей последовательности:

const tl = anime.timeline();
tl.add({ targets: '.box', translateX: 300, duration: 1000 });

tl.finished.then(() => {
  console.log('Все анимации завершены');
});

Контроль последовательности с autoplay и play

По умолчанию анимации запускаются автоматически. Для пошагового контроля используется autoplay: false:

const tl = anime.timeline({ autoplay: false });
tl.add({ targets: '.box', translateX: 200, duration: 800 });
tl.add({ targets: '.circle', translateY: 150, duration: 800 });

// Запуск вручную
tl.play();

Промежуточные возможности:

  • pause() — приостановка очереди.
  • restart() — повтор с начала.
  • seek(time) — установка позиции воспроизведения в миллисекундах.

Последовательная анимация с разными свойствами

timeline позволяет одновременно управлять различными свойствами:

anime.timeline({ easing: 'easeInOutQuad', duration: 1000 })
  .add({ targets: '.box', translateX: 250 })
  .add({ targets: '.box', rotate: '1turn' }, '-=500')
  .add({ targets: '.box', scale: 0.5 });
  • translateX начнет с первой анимацией.
  • rotate начнется за 500 мс до завершения первой.
  • scale запустится после завершения предыдущей анимации.

Применение функций к очереди

В timeline можно использовать функции для динамического изменения свойств:

anime.timeline()
  .add({
    targets: '.box',
    translateX: el => el.offsetWidth,
    duration: 800
  })
  .add({
    targets: '.box',
    backgroundColor: el => el.dataset.color,
    duration: 500
  });

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

Совмещение CSS-свойств и SVG

Anime.js поддерживает анимацию:

  • CSS-свойств: translateX, rotate, opacity, backgroundColor.
  • SVG-свойств: strokeDashoffset, strokeDasharray.
anime.timeline()
  .add({
    targets: 'circle',
    strokeDashoffset: [anime.setDashoffset, 0],
    duration: 1000,
    easing: 'easeInOutSine'
  })
  .add({
    targets: '.circle',
    stroke: '#FF0000',
    duration: 500
  });

Особенности очереди для SVG:

  • Порядок .add() управляет временем запуска.
  • Для смещений можно использовать '+=' и '-='.

Практические советы по управлению очередью

  1. Использовать timeline вместо ручного расчета задержек для сложных последовательностей.
  2. Применять функции для динамического управления свойствами.
  3. Для повторяющихся анимаций использовать loop.
  4. Контролировать завершение через finished для цепочек действий.
  5. Смещения '+=' и '-=' позволяют накладывать анимации друг на друга, создавая эффект перекрытия.

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

Оглавление