Координация анимаций элементов

Координация анимаций в anime.js позволяет управлять взаимосвязанными движениями нескольких элементов, синхронизируя их по времени, последовательности или событиям. Это достигается через timeline, функции задержки (delay), и динамическое управление свойствами.

Timeline: последовательность анимаций

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

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

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

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

Управление задержками и синхронизацией

Свойство delay может быть указано статически или динамически через функцию:

anime({
  targets: '.item',
  translateX: 200,
  delay: (el, i) => i * 200
});
  • el – текущий элемент.
  • i – индекс элемента в коллекции.
  • Такая запись создаёт эффект ступенчатой анимации (stagger), где каждый следующий элемент начинает движение позже предыдущего.

Stagger-анимации

anime.js предоставляет встроенную функцию anime.stagger() для упрощения массовых задержек:

anime({
  targets: '.circle',
  scale: [0, 1],
  delay: anime.stagger(100, {start: 500, from: 'center'})
});
  • start – начальная задержка для первой анимации.
  • from – точка отсчёта (first, last, center), что позволяет создавать радиальные и волновые эффекты.

Управление параллельными анимациями

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

  • offset – смещение относительно начала timeline.
  • duration – длина анимации.
  • easing – сглаживание движения.
const tl = anime.timeline({ easing: 'easeInOutQuad' });

tl.add({
  targets: '.square1',
  translateX: 300,
  duration: 1000
})
.add({
  targets: '.square2',
  translateY: 200,
  duration: 800,
  offset: 500 // анимация начнётся через 500 мс
});

События в timeline

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

  • begin – срабатывает при старте анимации.
  • complete – срабатывает при завершении.
  • update – вызывается на каждом кадре анимации.
  • loopBegin и loopComplete – при циклическом повторении.
const tl = anime.timeline({
  duration: 1000,
  loop: true,
  complete: () => console.log('Timeline завершён')
});

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

Динамическое управление анимациями

В anime.js анимацию можно пауза, перезапустить, сменить скорость или изменить целевые значения на лету:

const animation = anime({
  targets: '.ball',
  translateX: 400,
  duration: 2000,
  easing: 'easeInOutSine',
  autoplay: false
});

animation.play();
setTimeout(() => animation.pause(), 1000);
setTimeout(() => animation.restart(), 1500);
  • play() – запускает анимацию.
  • pause() – приостанавливает.
  • restart() – перезапускает с начала.
  • seek(time) – переводит анимацию к определённому моменту в миллисекундах.

Координация через функции значений

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

anime({
  targets: '.dot',
  translateY: (el, i) => i % 2 === 0 ? 100 : -100,
  delay: anime.stagger(100)
});

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

Практические паттерны координации

  1. Волновая анимация: последовательное смещение элементов по задержке.
  2. Параллельная трансформация: одновременное движение, масштабирование и вращение разных элементов.
  3. Циклические анимации: повторяющиеся с разными фазами элементы для создания динамических интерфейсов.
  4. Комбинации timeline + stagger: мощная техника для сложных сцен с десятками элементов.

Советы по производительности

  • Использовать CSS свойства, поддерживаемые GPU (translate, scale, rotate) для плавных анимаций.
  • Минимизировать количество событий update, так как они вызываются каждый кадр.
  • Группировать элементы в timeline вместо создания множества отдельных анимаций, чтобы снизить нагрузку на рендеринг.

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

Оглавление