Метки (labels) в timeline

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

Создание и использование меток

Метка создаётся методом addLabel(labelName, position), где labelName — это уникальное строковое имя метки, а position — её положение на временной шкале. Положение может быть задано:

  • В секундах от начала Timeline.
  • Относительно другой метки с использованием синтаксиса "+=1" или "-=0.5".
const tl = gsap.timeline();

tl.addLabel("start", 0)
  .to(".box", { x: 200, duration: 2 })
  .addLabel("middle", "+=1")
  .to(".circle", { y: 150, duration: 1.5 });

В данном примере:

  • Метка start устанавливается в начало Timeline.
  • Метка middle располагается на 1 секунду позже текущей позиции.

Позиционирование анимаций относительно меток

Метки используются для задания точек привязки анимаций через методы to, from, fromTo и другие. Вторым аргументом метода анимации можно передавать имя метки вместо абсолютного времени:

tl.to(".box", { rotation: 360, duration: 1 }, "start")
  .to(".circle", { scale: 2, duration: 1 }, "middle");

Преимущества такого подхода:

  • Анимации становятся гибкими и легко корректируемыми.
  • Позволяет изменять последовательность и интервалы, не пересчитывая точное время.

Относительное смещение меток

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

tl.addLabel("phase1")
  .to(".box", { x: 300, duration: 2 }, "phase1")
  .to(".circle", { y: 100, duration: 1 }, "phase1+=0.5");

Здесь:

  • .box начинает анимацию с момента phase1.
  • .circle начинает движение через 0.5 секунды после phase1.

Синтаксис "+=N" и "-=N" позволяет динамически регулировать смещение, что упрощает настройку тайминга при изменении длительности других анимаций.

Управление анимацией через метки

Метки дают возможность управлять Timeline не только на этапе построения, но и в рантайме. Методы seek(), play(), pause() принимают имя метки:

tl.seek("middle"); // Перемещает playhead к метке "middle"
tl.play("start");  // Запускает воспроизведение с метки "start"
tl.pause("middle"); // Ставит на паузу в точке метки "middle"

Такой подход удобен для:

  • Синхронизации сложных интерфейсных эффектов.
  • Реализации интерактивных сценариев, где пользователи могут переключать анимации по событию.

Метки и повторения (repeat) в Timeline

Метки особенно полезны в циклических анимациях. При использовании свойства repeat можно привязать события и повторения к меткам:

const tl = gsap.timeline({ repeat: 2 });

tl.addLabel("loopStart")
  .to(".box", { x: 400, duration: 2 }, "loopStart")
  .to(".circle", { y: 200, duration: 1 }, "loopStart+=1");

Даже при повторении анимации позиционирование относительно меток остаётся корректным, что делает управление таймлайном предсказуемым и стабильным.

Удаление и замена меток

Метки можно динамически удалять или перемещать, используя методы removeLabel(labelName) и addLabel(labelName, position) с уже существующим именем:

tl.removeLabel("middle");       // Удаляет метку "middle"
tl.addLabel("middle", 4);       // Пересоздает "middle" в другой позиции

Это позволяет адаптировать таймлайн под изменяющиеся требования проекта без необходимости переписывать все позиции анимаций.

Резюме ключевых возможностей меток

  • Позволяют создавать именованные точки на временной шкале.
  • Поддерживают абсолютное и относительное позиционирование.
  • Упрощают синхронизацию и управление сложными анимациями.
  • Обеспечивают гибкое управление в рантайме через play, pause, seek.
  • Совместимы с циклическими и повторяющимися анимациями.
  • Позволяют динамически менять тайминг и позиции без переписывания всех анимаций.

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

Оглавление