AutoPlay

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

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  autoplay: true
});

В этом примере анимация элемента с классом .box начнётся сразу после инициализации. По умолчанию autoplay установлен в true, поэтому явное указание чаще всего не требуется. Если нужно создать анимацию без немедленного запуска, используется autoplay: false.

const animation = anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  autoplay: false
});

// Запуск позже
animation.play();

Методы управления автозапуском

play() – запускает анимацию. pause() – приостанавливает воспроизведение. restart() – сбрасывает анимацию к начальной позиции и запускает заново. seek(time) – устанавливает прогресс анимации в миллисекундах, полезно для синхронизации с другими событиями.

const animation = anime({
  targets: '.circle',
  scale: 2,
  duration: 1500,
  autoplay: false
});

animation.play();   // Запуск
animation.pause();  // Пауза
animation.restart(); // Перезапуск
animation.seek(750); // Половина анимации

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

Anime.js позволяет объединять несколько анимаций через timeline, где параметр autoplay тоже применяется:

const timeline = anime.timeline({
  autoplay: false,
  loop: true
});

timeline
  .add({
    targets: '.box',
    translateX: 300,
    duration: 1000
  })
  .add({
    targets: '.box',
    rotate: '1turn',
    duration: 1000
  });

// Воспроизведение всей последовательности
timeline.play();

Если autoplay установлено в true, весь timeline запускается сразу после создания. Установка autoplay: false позволяет контролировать момент старта анимации программно, что удобно для сложных интерфейсов с интерактивными событиями.

Интеграция с событиями и пользовательским взаимодействием

Отключение автоматического воспроизведения полезно при привязке анимаций к событиям:

const animation = anime({
  targets: '.menu-item',
  translateY: -50,
  opacity: 1,
  duration: 800,
  autoplay: false
});

document.querySelector('.menu-button').addEventListener('click', () => {
  animation.restart();
});

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

Совмещение autoplay с задержками и отложенным запуском

autoplay можно использовать вместе с delay для постепенного старта анимаций:

anime({
  targets: '.item',
  translateX: 200,
  duration: 1200,
  delay: anime.stagger(200), // последовательная задержка для каждого элемента
  autoplay: true
});

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

Для динамического управления запуском можно комбинировать autoplay: false с setTimeout:

const animation = anime({
  targets: '.ball',
  translateY: 300,
  duration: 1000,
  autoplay: false
});

setTimeout(() => animation.play(), 2000); // запуск через 2 секунды

Важные нюансы

  1. Свойство autoplay работает только при создании анимации. После инициализации его нельзя изменить напрямую; для управления используют методы play(), pause() и restart().
  2. Timeline наследует autoplay, поэтому отключение автозапуска для всей последовательности предотвращает старт всех добавленных анимаций.
  3. Совместимость с loop и direction: при autoplay: true и циклической анимации (loop: true) повторения начинаются автоматически, что упрощает бесконечные эффекты.

Примеры практического применения

  • Превью анимации при загрузке страницы: с autoplay: true элементы сразу демонстрируют динамику интерфейса.
  • Сценарии интерактивных интерфейсов: с autoplay: false анимации запускаются только при взаимодействии пользователя.
  • Комбинация с timeline: полный контроль над сложными последовательностями с возможностью программного старта и паузы.

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

Оглавление