Направление отрисовки

GSAP (GreenSock Animation Platform) предоставляет гибкие возможности для управления анимацией элементов на веб-странице. Одним из ключевых аспектов является управление направлением отрисовки анимации, что особенно важно при сложных последовательностях, повторениях и обратных воспроизведениях.

Временные функции и направление воспроизведения

В GSAP основным инструментом управления временем и направлением является объект Tween или Timeline.

  • forward (вперед) — стандартное направление воспроизведения анимации. Значение timeScale по умолчанию равно 1, что соответствует нормальной скорости.
  • reverse (назад) — обратное воспроизведение. Для этого используется метод reverse() или установка отрицательного значения timeScale. Например:
gsap.to(".box", { x: 400, duration: 2 }).reverse(); 
// Анимация будет проигрываться в обратном направлении
  • pause и resume позволяют приостанавливать и возобновлять анимацию без изменения направления.
let tween = gsap.to(".circle", { x: 300, duration: 3 });
tween.pause(); // приостановка
tween.resume(); // возобновление

Управление повторением и йо-йо эффектом

GSAP поддерживает свойства repeat и yoyo, которые напрямую влияют на направление отрисовки.

  • repeat — количество повторов анимации:
gsap.to(".square", { x: 500, duration: 2, repeat: 3 });
  • yoyo — анимация будет возвращаться в исходное состояние после завершения каждого повторения. Это меняет направление отрисовки на каждом цикле:
gsap.to(".square", { x: 500, duration: 2, repeat: 2, yoyo: true });

В данном примере элемент движется вперед, затем назад, затем снова вперед. yoyo фактически переключает направление автоматически, что позволяет создавать плавные и естественные движения без ручного управления обратным воспроизведением.

Использование методов управления направлением

Методы GSAP позволяют динамически изменять направление анимации:

  • tween.play() — запускает анимацию в текущем направлении.
  • tween.reverse() — меняет направление воспроизведения.
  • tween.reversed() — возвращает текущее состояние направления (true, если воспроизведение назад).
  • tween.timeScale(value) — устанавливает скорость и направление анимации: отрицательное значение запускает обратное воспроизведение.
let tween = gsap.to(".box", { x: 200, duration: 2 });
tween.timeScale(-1); // воспроизведение в обратном направлении с нормальной скоростью

Направление в Timeline

Timeline позволяет управлять серией анимаций с разными направлениями. В GSAP это один из самых мощных инструментов, поскольку можно комбинировать forward и reverse, а также применять yoyo к целому таймлайну:

let tl = gsap.timeline({ repeat: 1, yoyo: true });
tl.to(".box", { x: 300, duration: 2 })
  .to(".circle", { y: 150, duration: 1 });

Здесь Timeline проигрывает последовательность вперед, затем в обратном направлении благодаря yoyo.

Методы управления направлением в Timeline аналогичны Tween:

  • tl.play() — воспроизведение вперед
  • tl.reverse() — воспроизведение назад
  • tl.timeScale(-1) — обращение направления всей последовательности

Комбинация направления и задержек

GSAP позволяет управлять направлением анимации и синхронизацией через delay и stagger:

gsap.to(".item", {
  x: 200,
  duration: 1,
  stagger: 0.2,
  repeat: 1,
  yoyo: true
});
  • stagger задаёт последовательное смещение запуска анимаций элементов
  • yoyo и repeat вместе меняют направление каждой анимации после завершения цикла
  • При изменении timeScale на отрицательное значение весь эффект сдвига и повторов проигрывается в обратном порядке.

Практические рекомендации

  1. Использовать yoyo для циклических движений — позволяет автоматически переключать направление без создания дополнительных анимаций.
  2. Комбинировать Timeline с reverse() для сложных сценариев — удобно, когда нужно динамически менять направление всего набора анимаций.
  3. timeScale для динамического управления скоростью и направлением — особенно полезно при интерактивных элементах и играх, где направление может меняться в реальном времени.
  4. Соблюдать порядок свойств — в GSAP важен порядок применения repeat, yoyo, timeScale и методов play/reverse для корректного направления воспроизведения.

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

Оглавление