Отслеживание состояния анимации

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

Свойства состояния анимации

Каждый объект анимации в anime.js имеет ключевые свойства состояния:

  • progress – текущий процент выполнения анимации (от 0 до 100). Позволяет определить, на какой стадии находится анимация в данный момент.
  • currentTime – текущее время анимации в миллисекундах. Используется для точного синхронного управления анимацией.
  • paused – логическое значение, указывающее, приостановлена ли анимация.
  • completed – логическое значение, показывающее, завершилась ли анимация полностью.

Эти свойства позволяют программно проверять состояние анимации и принимать решения о её дальнейшей работе.

Методы управления анимацией

Anime.js предоставляет набор методов для активного управления анимацией:

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

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

Использование коллбеков для отслеживания

Anime.js поддерживает несколько коллбеков, которые дают возможность реагировать на изменения состояния анимации:

  • begin(anim) – вызывается при запуске анимации. Используется для выполнения действий сразу после старта.
  • update(anim) – вызывается на каждом кадре анимации. Позволяет синхронизировать другие элементы интерфейса с текущим состоянием анимации, например, изменять текст, прогресс-бары или CSS-свойства.
  • complete(anim) – вызывается после полного завершения анимации. Применяется для запуска последующих анимаций или логики приложения.
  • loopBegin(anim) / loopComplete(anim) – вызываются при начале и завершении цикла анимации соответственно, если она настроена на повторение.

Пример:

let animation = anime({
  targets: '.box',
  translateX: 300,
  duration: 2000,
  easing: 'easeInOutQuad',
  update: function(anim) {
    console.log(`Прогресс: ${anim.progress}%`);
  },
  complete: function(anim) {
    console.log('Анимация завершена');
  }
});

Отслеживание прогресса для пользовательского интерфейса

Иногда необходимо синхронизировать анимацию с интерфейсными элементами, например, прогресс-барами. В таких случаях удобно использовать anim.progress внутри коллбека update:

let progressBar = document.querySelector('.progress-bar');

let animation = anime({
  targets: '.circle',
  translateX: 400,
  duration: 3000,
  easing: 'linear',
  update: function(anim) {
    progressBar.style.width = anim.progress + '%';
  }
});

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

Контроль состояния через внешние события

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

let animation = anime({
  targets: '.square',
  translateY: 200,
  duration: 2500,
  autoplay: false
});

document.querySelector('.start-btn').addEventListener('click', () => animation.play());
document.querySelector('.pause-btn').addEventListener('click', () => animation.pause());
document.querySelector('.reverse-btn').addEventListener('click', () => animation.reverse());

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

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

Anime.js поддерживает отслеживание состояния даже в сложных случаях, например, при последовательных или параллельных анимациях:

anime.timeline({
  targets: '.item',
  easing: 'easeOutExpo',
  duration: 1000,
  loop: false,
  update: function(anim) {
    console.log(`Timeline прогресс: ${anim.progress}%`);
  }
})
.add({ translateX: 250 })
.add({ rotate: 180 }, '-=500') // параллельная анимация

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

Резюме ключевых возможностей

  • Прямой доступ к состоянию через свойства progress, currentTime, paused и completed.
  • Динамическое управление с помощью методов play(), pause(), restart(), seek() и reverse().
  • Использование коллбеков begin, update, complete и циклических loopBegin/loopComplete для реагирования на события анимации.
  • Синхронизация анимации с элементами интерфейса через update.
  • Интеграция с пользовательскими событиями и построение сложных последовательностей с помощью timeline.

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

Оглавление