Переход к определенному моменту: seek() и progress()

В библиотеке GSAP управление временной шкалой анимации осуществляется с помощью различных методов, среди которых seek() и progress() играют ключевую роль. Они позволяют точно перемещаться к определённым моментам анимации и управлять её прогрессом независимо от фактического времени воспроизведения.

Метод seek()

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

Синтаксис:

animation.seek(time);

Параметры:

  • time — число в секундах, определяющее момент, к которому нужно переместиться.

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

const tl = gsap.timeline();
tl.to(".box", { x: 300, duration: 2 });
tl.to(".box", { y: 200, duration: 2 });

// Переместить анимацию на 1.5 секунды
tl.seek(1.5);

В этом примере элемент .box будет находиться в промежуточном состоянии первой анимации по координате x и ещё не начнёт движение по y.

Особенности метода seek():

  • Позволяет мгновенно перейти к любой точке анимации без её воспроизведения.
  • Работает как с одиночными анимациями, так и с timeline (gsap.timeline()).
  • Если указать значение больше длительности анимации, она завершится в конечном состоянии.

Метод progress()

Метод progress() управляет долю завершённости анимации, выраженной в диапазоне от 0 до 1.

Синтаксис:

animation.progress(value);

Параметры:

  • value — число от 0 до 1, где 0 соответствует началу анимации, 1 — её концу.

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

const tl = gsap.timeline();
tl.to(".circle", { scale: 2, duration: 2 });
tl.to(".circle", { rotation: 180, duration: 2 });

// Переместить анимацию на половину её прогресса
tl.progress(0.5);

После вызова .progress(0.5) анимация будет находиться в середине первой и второй части timeline, исходя из их пропорций по длительности.

Особенности метода progress():

  • Удобно использовать для синхронизации анимаций с прокруткой или другими событиями.
  • Позволяет плавно изменять состояние анимации с помощью анимации свойства progress через gsap.to().
  • Отличается от seek() тем, что работает с относительным прогрессом, а не с абсолютным временем.

Взаимодействие seek() и progress()

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

Пример синхронизации:

const tl = gsap.timeline({ paused: true });
tl.to(".square", { x: 400, duration: 4 });
tl.to(".square", { y: 200, duration: 2 });

// Перейти к 50% прогресса анимации
tl.progress(0.5);

// Затем мгновенно перейти на отметку 3 секунды
tl.seek(3);

Здесь сначала анимация устанавливается в середине timeline, а затем точно перемещается к 3 секундам, что позволяет комбинировать относительный и абсолютный контроль.

Анимация прогресса через GSAP

Для создания эффекта плавного перехода между состояниями timeline удобно анимировать свойство progress:

gsap.to(tl, { progress: 1, duration: 2, ease: "power1.inOut" });

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

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

  • Использовать seek() для мгновенного перехода к ключевым моментам анимации без воспроизведения.
  • Использовать progress() для контроля анимации через процент выполнения или для плавных переходов.
  • При работе с timeline важно учитывать, что прогресс учитывает относительное распределение времени между отдельными анимациями.
  • Для интерактивных приложений часто комбинируют progress() с scrollTrigger для синхронизации прокрутки и анимации.

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

Оглавление