Методы play и pause

Библиотека anime.js предоставляет гибкие средства управления анимациями. Среди них ключевыми являются методы play и pause, которые позволяют динамически управлять выполнением анимаций после их создания. Эти методы работают с объектами анимации, возвращаемыми функцией anime().

let animation = anime({
  targets: '.box',
  translateX: 250,
  duration: 2000,
  loop: true,
  easing: 'easeInOutQuad'
});

В данном примере animation — это объект анимации, на котором можно вызывать методы play и pause.

Метод play

Метод play запускает анимацию или возобновляет её выполнение после паузы. Если анимация была создана, но не стартовала автоматически (autoplay: false), вызов play запустит её с самого начала.

Синтаксис:

animation.play();

Особенности метода play:

  • Если анимация была приостановлена, play продолжит её с текущего состояния.
  • Метод не изменяет параметры анимации, только управляет её воспроизведением.
  • Можно комбинировать с другими методами, например restart или seek, для точного контроля.

Пример использования с autoplay: false:

let animation = anime({
  targets: '.circle',
  scale: [0, 1],
  duration: 1000,
  autoplay: false
});

animation.play(); // запуск анимации вручную

В этом случае анимация не стартует автоматически, и вызов play необходим для её начала.

Метод pause

Метод pause останавливает анимацию в текущем состоянии, позволяя возобновить её позже с того же момента с помощью play.

Синтаксис:

animation.pause();

Особенности метода pause:

  • Анимация не сбрасывается при паузе; её прогресс сохраняется.
  • Полезен для динамического контроля в интерактивных интерфейсах, когда требуется временно остановить анимацию.
  • Можно использовать совместно с seek для перемещения анимации к конкретному моменту перед продолжением.

Пример приостановки и возобновления:

let animation = anime({
  targets: '.square',
  translateY: 300,
  duration: 2000,
  easing: 'easeInOutSine'
});

setTimeout(() => animation.pause(), 1000); // пауза через 1 секунду
setTimeout(() => animation.play(), 2000);  // возобновление через 2 секунды

В этом примере анимация останавливается на середине и продолжается через 1 секунду после паузы.

Сочетание с другими методами управления анимацией

Методы play и pause часто используются вместе с другими возможностями anime.js:

  1. restart() — перезапускает анимацию с начала.
  2. seek(time) — устанавливает текущую позицию анимации в миллисекундах.
  3. reverse() — меняет направление воспроизведения анимации.

Пример комбинирования:

let animation = anime({
  targets: '.line',
  translateX: 400,
  duration: 1500,
  loop: true,
  easing: 'easeInOutCubic'
});

animation.pause();       // приостанавливаем
animation.seek(500);     // перемещаем на 500 мс
animation.reverse();     // меняем направление
animation.play();        // продолжаем анимацию

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

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

  • Для анимаций с autoplay: false всегда необходимо использовать play для запуска.
  • Для интерактивных интерфейсов лучше комбинировать pause и play, чем полностью пересоздавать анимацию.
  • Метод pause не влияет на loop; при возобновлении анимация продолжит цикл.
  • Использование seek совместно с pause и play позволяет реализовать ползунки управления анимацией или синхронизацию с другими событиями.

Методы play и pause обеспечивают фундаментальный контроль над временной шкалой анимации, делая её гибкой и управляемой в реальном времени.

Оглавление