Методы экземпляра анимации

В библиотеке anime.js анимации создаются через функцию anime(). При вызове она возвращает объект-анимацию, который предоставляет методы управления процессом анимации. Такой экземпляр позволяет гибко управлять воспроизведением, изменять параметры на лету и реагировать на события.

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

В данном примере переменная animation хранит экземпляр анимации, с помощью которого можно вызывать методы управления.

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

play()

Запускает анимацию или продолжает её после паузы.

animation.play();

Если анимация уже идет, вызов метода не приведёт к сбросу текущего состояния.

pause()

Приостанавливает воспроизведение анимации в текущем состоянии.

animation.pause();

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

restart()

Перезапускает анимацию с начала, сбрасывая текущее состояние и прогресс.

animation.restart();

reverse()

Меняет направление анимации на противоположное. Если анимация шла вперёд, после вызова будет идти назад.

animation.reverse();
animation.play();

Важно помнить, что метод reverse() только меняет направление, но не запускает анимацию — для старта нужно вызвать play().

seek()

Позволяет перейти к конкретной позиции анимации в миллисекундах.

animation.seek(1000); // Перемещает прогресс анимации на 1 секунду

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

pause() + seek() для сложного контроля

Комбинируя pause() и seek(), можно полностью управлять кадрами анимации:

animation.pause();
animation.seek(1500); // Останавливаем анимацию на 1.5 секунде

reverse() + play() для динамических эффектов

Использование reverse() позволяет создавать отзывчивые анимации, которые реагируют на действия пользователя, например анимация кнопки при наведении и уходе курсора.

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

update()

Метод update() позволяет изменять свойства анимации во время её исполнения.

animation.update = function(anim) {
  console.log(anim.progress); // вывод прогресса анимации
};

Здесь функция будет вызываться на каждом кадре, предоставляя доступ к актуальному состоянию анимации.

finished

Свойство finished возвращает промис, который разрешается после завершения анимации.

animation.finished.then(() => {
  console.log('Анимация завершена');
});

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

restart() с новыми параметрами

Можно динамически менять targets и другие свойства, создавая более сложные сценарии:

animation.restart();
animation.animatables.forEach(item => {
  item.target.style.backgroundColor = 'red';
});

Цепочки анимаций и синхронизация

Методы экземпляра позволяют синхронизировать несколько анимаций:

const anim1 = anime({ targets: '.box1', translateX: 300, duration: 1000 });
const anim2 = anime({ targets: '.box2', translateX: 300, duration: 1000, autoplay: false });

anim1.finished.then(() => anim2.play());

Использование finished обеспечивает точное последовательное воспроизведение.

Работа с loop и direction

Экземпляры позволяют комбинировать зацикливание и направление:

const anim = anime({
  targets: '.circle',
  translateY: 200,
  duration: 1500,
  loop: true,
  direction: 'alternate'
});
  • loop — количество повторов, или true для бесконечного цикла
  • direction: ‘alternate’ — позволяет анимации идти вперёд и назад автоматически

Экземпляр анимации сохраняет текущее состояние, позволяя динамически управлять циклом и направлением через reverse() и seek().

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

pause() и finished

Для сложных сценариев часто комбинируются:

animation.pause();
animation.finished.then(() => console.log('Завершение после паузы'));

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

remove()

Метод remove() позволяет удалить анимацию и отменить все связанные события.

animation.remove();

Это освобождает ресурсы и предотвращает дальнейшее выполнение.

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

Оглавление