Методы управления: play(), pause(), reverse(), restart()

GSAP (GreenSock Animation Platform) предоставляет гибкие инструменты для управления анимациями в JavaScript. Среди наиболее часто используемых методов — play(), pause(), reverse() и restart(). Они позволяют динамически изменять поведение анимации, делая её интерактивной и управляемой по событиям.

Метод play()

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

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

// Остановим анимацию через 1 секунду
setTimeout(() => tween.pause(), 1000);

// Продолжим воспроизведение через 2 секунды
setTimeout(() => tween.play(), 2000);

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

  • play() может принимать параметр времени, с которого нужно начать воспроизведение:

    tween.play(0); // начать с начала
tween.play(1.5); // начать с отметки 1.5 секунды

  • Если анимация уже завершена, вызов play() снова воспроизведет её с текущей позиции, если не была выполнена остановка через restart().

Метод pause()

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

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

// Приостановка через 1 секунду
setTimeout(() => tween.pause(), 1000);

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

  • Может принимать параметр времени для приостановки в конкретный момент:

    tween.pause(1.5); // остановка на отметке 1.5 секунды

  • Позволяет комбинировать с play(), создавая эффекты паузы и возобновления.

Метод reverse()

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

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

// Начнем обратное воспроизведение через 2 секунды
setTimeout(() => tween.reverse(), 2000);

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

  • При вызове reverse() без параметров анимация воспроизводится с текущей позиции.

  • Можно использовать с параметром времени:

    tween.reverse(1); // начать обратное воспроизведение с отметки 1 секунды

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

Метод restart()

Метод restart() перезапускает анимацию с начала независимо от её текущего состояния.

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

// Перезапуск через 3 секунды
setTimeout(() => tween.restart(), 3000);

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

  • Может принимать параметр времени для старта:

    tween.restart(true); // перезапуск с учетом задержки
tween.restart(0);    // начать с 0 секунд

  • Сочетается с методами play(), pause() и reverse() для создания сложной логики анимации.

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

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

const tween = gsap.to(".box", { x: 500, duration: 4 });

// При клике мыши переключение между воспроизведением и паузой
document.querySelector(".box").addEventListener("click", () => {
    tween.paused() ? tween.play() : tween.pause();
});

// Перезапуск при двойном клике
document.querySelector(".box").addEventListener("dblclick", () => tween.restart());

// Обратное воспроизведение при наведении
document.querySelector(".box").addEventListener("mouseenter", () => tween.reverse());

Ключевые моменты для понимания:

  • play() и pause() управляют воспроизведением без изменения направления.
  • reverse() изменяет направление, позволяя анимации двигаться назад.
  • restart() сбрасывает анимацию и запускает её с начала.
  • Все методы могут работать с параметром времени, что обеспечивает точный контроль над состоянием анимации.

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

  1. Интерактивные элементы: Использовать комбинацию pause() и play() для кнопок паузы и возобновления анимации.
  2. Циклические анимации: reverse() помогает создавать эффекты «вперед-назад» без повторного создания анимации.
  3. Перезапуск анимации: restart() удобен для триггеров событий, когда необходимо начать эффект с чистого листа.
  4. Синхронизация: Перед запуском методов стоит проверять текущую позицию анимации (tween.time()), чтобы избежать неожиданных переходов.

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

Оглавление