Управление глобальным состоянием анимаций

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

Управление временем и прогрессом

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

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

Пример получения прогресса:

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

console.log(animation.progress); // 0 изначально

Можно изменять текущее время глобально через свойство seek:

animation.seek(1000); // Перемотка на 1000 мс

Групповое управление анимациями

Для комплексных интерфейсов часто создают массив анимаций и управляют ими как единым объектом:

const animations = [
  anime({ targets: '.box1', translateX: 100, duration: 1000, autoplay: false }),
  anime({ targets: '.box2', translateY: 150, duration: 1500, autoplay: false }),
  anime({ targets: '.box3', scale: 2, duration: 1200, autoplay: false })
];

// Старт всех анимаций одновременно
animations.forEach(anim => anim.play());

// Пауза всех анимаций
animations.forEach(anim => anim.pause());

Использование массива анимаций позволяет централизованно управлять их состоянием без необходимости обращаться к каждой отдельно.

Методы глобального управления

anime.js предоставляет несколько методов для работы с состоянием анимаций:

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

Пример динамического изменения состояния:

const anim = anime({
  targets: '.circle',
  translateX: 300,
  duration: 2000,
  loop: true,
  autoplay: false
});

anim.play();

setTimeout(() => anim.reverse(), 1000); // Меняем направление через 1 секунду
setTimeout(() => anim.pause(), 1500);   // Пауза через 1.5 секунды

Использование anime.timeline для централизованного контроля

Timeline — мощный инструмент для объединения нескольких анимаций в единую последовательность. Он позволяет управлять глобальным состоянием всех анимаций внутри таймлайна.

const tl = anime.timeline({
  autoplay: false
});

tl
.add({
  targets: '.box1',
  translateX: 250,
  duration: 1000
})
.add({
  targets: '.box2',
  translateY: 150,
  duration: 1000
}, '-=500'); // Запуск второй анимации на 500 мс раньше конца первой

tl.play(); // Глобальный старт всех анимаций таймлайна
tl.pause(); // Пауза всей последовательности
tl.seek(750); // Перемотка всех анимаций на 750 мс

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

Цикличность и обратное воспроизведение

С помощью параметров loop и методов reverse() можно управлять повторениями и изменением направления анимации:

const anim = anime({
  targets: '.square',
  rotate: 360,
  duration: 2000,
  loop: true,
  autoplay: false
});

anim.play();

// Через 3 секунды меняем направление для всех повторений
setTimeout(() => anim.reverse(), 3000);

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

Реактивное управление состоянием

Глобальное управление анимациями часто интегрируют с внешними событиями, например, скроллингом или кликами:

const anim = anime({
  targets: '.panel',
  translateY: 500,
  duration: 2000,
  autoplay: false
});

window.addEventListener('scroll', () => {
  const scrollPos = window.scrollY;
  anim.seek(scrollPos); // Связывание анимации с прокруткой
});

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

Отслеживание событий анимации

Для глобального контроля состояния важно использовать колбэки событий:

  • begin – при запуске анимации.
  • update – на каждом кадре анимации.
  • complete – при завершении анимации.
  • loopBegin / loopComplete – при начале и завершении цикла.

Пример:

const anim = anime({
  targets: '.dot',
  translateX: 400,
  duration: 2000,
  loop: true,
  update: anim => {
    console.log(`Прогресс: ${anim.progress}%`);
  },
  complete: () => {
    console.log('Анимация завершена');
  }
});

anim.play();

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

Интеграция нескольких таймлайнов

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

const mainTimeline = anime.timeline({ autoplay: false });
const secondaryTimeline = anime.timeline({ autoplay: false });

mainTimeline.add({ targets: '.box1', translateX: 200, duration: 1000 });
secondaryTimeline.add({ targets: '.box2', translateY: 150, duration: 1000 });

// Глобальный старт всех таймлайнов
[mainTimeline, secondaryTimeline].forEach(tl => tl.play());

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

Оглавление