Позиционирование анимаций

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

Свойство delay

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

anime({
  targets: '.box',
  translateX: 250,
  delay: 500, // все элементы начнут через 500мс
  duration: 1000
});

Если delay задается функцией, она получает индекс текущего элемента и может использоваться для создания каскадного эффекта:

anime({
  targets: '.box',
  translateY: 100,
  delay: (el, i) => i * 200, // элементы двигаются по очереди с шагом 200мс
  duration: 1000
});

Свойство endDelay

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

anime({
  targets: '.circle',
  scale: 1.5,
  duration: 800,
  endDelay: 300 // задержка после завершения масштабирования
});

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

Использование offset для синхронизации

Для сложных timeline-анимаций ключевым является свойство offset, которое определяет позицию конкретной анимации относительно начала всей линии времени:

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

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

Важные моменты при использовании offset:

  • Положительное значение ('+=200') сдвигает анимацию вперёд по времени относительно предыдущей.
  • Отрицательное значение ('-=200') запускает анимацию раньше, создавая перекрытие действий.
  • Абсолютное значение (1000) задаёт точное время старта относительно начала timeline.

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

anime.js позволяет запускать анимации одновременно или по очереди.

  • Параллельные: несколько анимаций на одной timeline без смещения offset стартуют одновременно.
  • Последовательные: использование offset: '+=...' создаёт цепочку, где каждая последующая анимация начинается после предыдущей.
tl.add({ targets: '.box1', translateX: 100 })
  .add({ targets: '.box2', translateY: 50, offset: '+=0' }); // начинается сразу после box1

Свойства autoplay и loop

  • autoplay (true/false) позволяет управлять запуском анимации. Если false, анимацию нужно запускать вручную через .play().
  • loop задаёт количество повторений анимации или бесконечный цикл.
anime({
  targets: '.circle',
  rotate: 360,
  duration: 2000,
  loop: true,
  autoplay: false
}).play();

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

В anime.js delay, duration, endDelay и offset могут быть функциями. Это позволяет создавать сложные динамические анимации, где каждый элемент реагирует по-разному:

anime({
  targets: '.dot',
  translateX: 200,
  delay: (el, i, l) => i * 100,
  duration: (el, i, l) => 500 + i * 100
});

В примере каждый элемент получает индивидуальное время старта и продолжительность движения, что создаёт эффект волны или каскада.

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

  • Для простых анимаций одного элемента достаточно delay и duration.
  • Для нескольких элементов с последовательными эффектами лучше использовать timeline с offset.
  • Для каскадных и волнообразных анимаций удобнее использовать функции в delay и duration.
  • Для циклa и пауз между повторами применяются endDelay и loop.
Оглавление