Методы экземпляра: play, pause, resume, reverse

GSAP (GreenSock Animation Platform) предоставляет мощный и гибкий инструмент для управления анимациями через объект Tween или Timeline. Методы экземпляра play, pause, resume и reverse позволяют точно контролировать воспроизведение анимации на любом этапе её жизненного цикла.

Метод play

Метод play() запускает или возобновляет анимацию с текущей позиции или с заданного момента времени. Он является универсальным инструментом для управления стартом анимации.

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

Особенности использования:

  • Если анимация была приостановлена, play() возобновит её с текущего момента.
  • Если передан аргумент времени (tween.play(1.5)), воспроизведение начнётся с указанной позиции в секундах.
  • Метод можно использовать для плавного запуска анимаций, встроенных в Timeline.

Метод pause

Метод pause() останавливает анимацию на текущей позиции без сброса состояния. Это ключевой инструмент для интерактивных интерфейсов и пользовательских контролов.

tween.pause();

Особенности:

  • Можно передавать время для паузы на определённом моменте (tween.pause(1.0)).
  • Если анимация связана с Timeline, пауза на одном элементе не влияет на остальные анимации, если явно не указан timeline.pause().
  • pause() сохраняет внутренние состояния анимации: текущую прогрессию, свойства, ключевые кадры.

Метод resume

Метод resume() восстанавливает воспроизведение анимации с позиции, на которой она была приостановлена с помощью pause(). Этот метод особенно полезен при управлении последовательными событиями или при интерактивной анимации.

tween.pause();
setTimeout(() => {
    tween.resume();
}, 1000);

Ключевые моменты:

  • Не создает новое воспроизведение, а продолжает существующее.
  • Если анимация не была приостановлена, вызов resume() аналогичен play().
  • Работает совместно с timeline для управления комплексными анимациями.

Метод reverse

Метод reverse() запускает анимацию в обратном направлении. Можно использовать с текущей позиции или с конца анимации, если она ещё не была запущена.

tween.reverse();

Особенности и возможности:

  • Передача аргумента времени (tween.reverse(1.5)) позволяет начать обратное воспроизведение с конкретного момента.
  • Полезен для создания эффектов возврата к исходному состоянию, анимаций “вход-выход”, повторяющихся циклов.
  • Совместим с repeat и yoyo: обратное воспроизведение учитывает текущую фазу анимации.

Взаимодействие методов между собой

  • play() + pause() — полный контроль воспроизведения с остановкой и возобновлением.
  • play() + reverse() — можно динамически переключать направление анимации.
  • pause() + resume() — точная пауза и продолжение без сброса состояния.
const timeline = gsap.timeline({ repeat: 1, yoyo: true });
timeline.to(".box", { x: 200, duration: 2 })
        .to(".box", { y: 100, duration: 2 });

timeline.pause(); // остановка всей последовательности
timeline.play();  // запуск с текущей позиции
timeline.reverse(); // обратное воспроизведение всей timeline

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

  • Использовать play(time) или reverse(time) для синхронизации нескольких анимаций.
  • При интерактивных элементах UI комбинировать pause() и resume() для реагирования на действия пользователя.
  • Для сложных Timeline управление через reverse() позволяет создавать циклические и обратные анимации без дублирования кода.
  • Методы экземпляра безопасно применять независимо друг от друга, но следует учитывать текущее состояние анимации, чтобы избежать неожиданных скачков.

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

Оглавление