Возвращаемые значения

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

Объект анимации

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

В данном примере переменная animation хранит возвращаемое значение функции anime(). Основные возможности объекта анимации:

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

Промис finished

Одним из ключевых свойств является finished. Он позволяет использовать анимации в цепочках, например:

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

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

Доступ к текущему состоянию

Объект анимации хранит текущее состояние анимации через свойства:

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

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

console.log(animation.currentTime); // 0 при запуске
console.log(animation.progress);    // 0 при запуске
console.log(animation.paused);      // true или false

Управление несколькими анимациями

Функция anime() может создавать несколько анимаций одновременно, возвращая массив объектов анимации, если в targets передан селектор с несколькими элементами. Каждый объект можно управлять независимо:

let animations = anime({
  targets: '.box',
  translateX: 300,
  duration: 1500
});

animations.forEach(anim => anim.play());

Методы работы с возвращаемыми значениями

1. play() и pause() Позволяют динамически управлять воспроизведением анимации. Например, можно при наведении мыши ставить анимацию на паузу:

let anim = anime({
  targets: '.box',
  translateX: 200,
  loop: true,
  duration: 2000
});

document.querySelector('.box').addEventListener('mouseenter', () => anim.pause());
document.querySelector('.box').addEventListener('mouseleave', () => anim.play());

2. reverse() Изменяет направление анимации:

anim.reverse(); // теперь движение идёт в обратном направлении
anim.play();    // запуск анимации в новом направлении

3. seek(time) Позволяет установить конкретное время анимации, что полезно для синхронизации с другими эффектами:

anim.seek(500); // анимация перейдет к 500 миллисекундам

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

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

let box1 = anime({ targets: '.box1', translateX: 250, duration: 1000 });
box1.finished.then(() => {
  return anime({ targets: '.box2', translateY: 150, duration: 800 }).finished;
}).then(() => {
  console.log('Все анимации завершены');
});

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

Краткое резюме

Возвращаемое значение функции anime() – это объект анимации с методами play, pause, restart, reverse, seek и промисом finished. Он обеспечивает полный контроль над анимацией, позволяет получать её состояние и создавать последовательные или параллельные эффекты, делая библиотеку anime.js мощным инструментом для динамических интерфейсов в JavaScript.

Оглавление