Добавление анимаций: add() и цепочка методов

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

Timeline и метод add()

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

Метод add() используется для включения анимации, функции или другого таймлайна в текущий таймлайн.

Синтаксис:

timeline.add(animation, position);
  • animation — анимация (GSAP tween), функция или другой таймлайн.
  • position — точка времени, в которую добавляется анимация. Может быть числом (в секундах), строкой с меткой, или ключевым словом типа ">" для добавления после предыдущей анимации.

Пример добавления анимаций:

const tl = gsap.timeline();

tl.add(gsap.to(".box", {x: 100, duration: 1}))
  .add(gsap.to(".circle", {y: 50, duration: 0.5}), "+=0.2")
  .add(gsap.to(".box", {rotation: 45, duration: 0.5}), "label1");

В этом примере:

  • Первая анимация сдвигает элемент .box.
  • Вторая анимация начинается на 0.2 секунды позже окончания предыдущей.
  • Третья анимация привязывается к метке label1, которую можно задать отдельно через tl.add("label1", 1).

Цепочка методов

GSAP позволяет создавать анимации цепочкой методов, что делает код более компактным и читаемым.

Пример цепочки методов:

gsap.timeline()
  .to(".box", {x: 100, duration: 1})
  .to(".circle", {y: 50, duration: 0.5}, "-=0.3")
  .to(".box", {rotation: 45, duration: 0.5});

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

  • Каждая следующая анимация добавляется автоматически в конец таймлайна.
  • Аргумент позиции ("-=0.3") позволяет сдвинуть анимацию на 0.3 секунды раньше конца предыдущей.
  • Методы to(), from(), fromTo() могут использоваться вместе, создавая гибкие и настраиваемые последовательности.

Использование функций в add()

Метод add() также поддерживает функции, что позволяет запускать произвольный код в точке таймлайна:

const tl = gsap.timeline();

tl.add(() => console.log("Анимация началась"), 0)
  .to(".box", {x: 200, duration: 1});

Здесь функция будет выполнена синхронно с началом таймлайна.

Метки для синхронизации анимаций

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

const tl = gsap.timeline();

tl.add("start")
  .to(".box", {x: 100, duration: 1}, "start")
  .to(".circle", {y: 50, duration: 0.5}, "start+=0.5");
  • "start" — метка начала.
  • "start+=0.5" — смещение на 0.5 секунды от метки. Это упрощает редактирование таймлайнов, особенно когда последовательность анимаций может изменяться.

Вложенные таймлайны

GSAP поддерживает вложенные таймлайны, что позволяет строить сложные анимации модульно:

const childTL = gsap.timeline()
  .to(".child", {x: 50, duration: 0.5})
  .to(".child", {y: 50, duration: 0.5});

const parentTL = gsap.timeline()
  .add(childTL, 0)
  .to(".parent", {rotation: 45, duration: 1}, ">");
  • childTL управляет анимацией дочернего элемента.
  • parentTL добавляет дочерний таймлайн и синхронизирует его с другими анимациями. Вложенные таймлайны упрощают повторное использование анимаций и делают код структурированным.

Комбинирование add() с цепочками методов

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

const tl = gsap.timeline();

tl.to(".box", {x: 100, duration: 1})
  .add(gsap.to(".circle", {y: 50, duration: 0.5}), "-=0.25")
  .to(".box", {rotation: 90, duration: 0.5});
  • Первая анимация запускается сразу.
  • Вторая добавляется через add() и запускается на 0.25 секунды раньше конца предыдущей.
  • Последняя анимация продолжает цепочку.

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

  • Для управления сложными последовательностями лучше использовать Timeline, а не отдельные tween.
  • Метки и относительное смещение (+=, -=) делают таймлайн гибким при изменении длительности анимаций.
  • Вложенные таймлайны повышают читаемость и позволяют переиспользовать блоки анимаций.
  • Функции в add() полезны для запуска кода синхронно с анимацией, например для изменения состояния элементов или запуска событий.

Хотите, я подготовлю расширенный пример полного интерактивного интерфейса с использованием цепочек методов и add(), где анимации синхронизированы между разными элементами? Это будет практическая демонстрация всех возможностей.

Оглавление