Проверка состояния: isActive(), paused()

GSAP предоставляет удобные методы для контроля и мониторинга состояния анимаций. Два ключевых метода, которые позволяют определить текущий статус анимации, — это isActive() и paused(). Они помогают управлять сложными последовательностями, оптимизировать производительность и синхронизировать анимации с пользовательским интерфейсом.

Метод isActive()

Метод isActive() возвращает логическое значение true или false, указывающее, активна ли в данный момент анимация. Под активной считается анимация, которая в процессе воспроизведения, включая стадии прогрессии между кадрами, анимации в повторении (repeat) или во временной шкале (timeline).

Синтаксис:

gsap.to(".box", {duration: 2, x: 300}).isActive();

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

let tween = gsap.to(".box", {duration: 2, x: 300});

console.log(tween.isActive()); // false, анимация ещё не началась

tween.play();

setTimeout(() => {
  console.log(tween.isActive()); // true, анимация в процессе
}, 1000);

setTimeout(() => {
  console.log(tween.isActive()); // false, анимация завершена
}, 2500);

Особенности работы isActive():

  • Возвращает true даже для анимаций, находящихся в повторении или задержке (delay), если они находятся в фазе выполнения.
  • Если анимация стоит на паузе (paused() возвращает true), isActive() вернет false.
  • Метод полезен для условной логики, например, чтобы не запускать анимацию повторно, если она уже воспроизводится.

Метод paused()

Метод paused() используется для проверки или изменения состояния паузы анимации. Он возвращает true, если анимация остановлена, и false, если анимация воспроизводится.

Синтаксис:

let tween = gsap.to(".box", {duration: 2, x: 300});

tween.paused(); // Проверка состояния
tween.paused(true); // Поставить анимацию на паузу
tween.paused(false); // Снять паузу и продолжить воспроизведение

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

let tween = gsap.to(".box", {duration: 2, x: 300});

// Поставить анимацию на паузу через 1 секунду
setTimeout(() => {
  tween.paused(true);
  console.log(tween.paused()); // true
}, 1000);

// Продолжить анимацию через ещё 1 секунду
setTimeout(() => {
  tween.paused(false);
  console.log(tween.paused()); // false
}, 2000);

Особенности работы paused():

  • Метод можно использовать как getter, чтобы проверить, остановлена ли анимация.
  • Метод работает как setter, позволяя динамически приостанавливать или возобновлять анимацию.
  • В сочетании с isActive() можно реализовать точный контроль состояния анимации: isActive() проверяет фактическую активность, paused() — состояние паузы.

Совместное использование isActive() и paused()

Комбинация этих методов позволяет создавать интеллектуальные сценарии управления анимациями. Например, чтобы запустить анимацию только если она не активна и не на паузе:

let tween = gsap.to(".box", {duration: 2, x: 300});

if (!tween.isActive() && !tween.paused()) {
  tween.restart();
}

Возможные сценарии применения:

  1. Предотвращение повторного запуска: проверка isActive() не позволит анимации запускаться несколько раз одновременно.
  2. Управление паузой через события: paused() легко интегрировать с кнопками Play/Pause.
  3. Синхронизация сложных timeline: проверка активных анимаций помогает запускать последовательности только после завершения предыдущих.

Практические советы

  • Для анимаций с большим количеством повторов (repeat: -1) isActive() всегда возвращает true, пока не будет явно остановлена через kill() или paused(true).
  • Проверка состояния на событиях пользовательского интерфейса помогает предотвращать баги, связанные с многократным запуском анимаций.
  • В сложных timeline удобно комбинировать isActive() и paused() с методами progress() и totalProgress(), чтобы получать полное представление о состоянии анимации.

Использование isActive() и paused() в GSAP обеспечивает тонкий контроль над анимациями, позволяя отслеживать их состояние, избегать конфликтов и создавать динамичные, отзывчивые интерфейсы. Эти методы являются фундаментальными для работы с продвинутыми анимациями и сложными последовательностями.

Оглавление