Переиспользование timeline

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

Создание Timeline

Для начала создается объект gsap.timeline(). Он может быть как пустым, так и с предустановленными параметрами, такими как repeat, yoyo, defaults:

const mainTimeline = gsap.timeline({
  defaults: { duration: 1, ease: "power1.out" }
});

После создания Timeline можно добавлять анимации через метод .to(), .from(), .fromTo():

mainTimeline
  .to(".box", { x: 100 })
  .to(".circle", { y: 50 });

Переиспользование Timeline

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

1. Функция, возвращающая Timeline

Часто Timeline создают внутри функции, чтобы динамически настраивать элементы или параметры анимации:

function createBoxAnimation(selector) {
  const tl = gsap.timeline();
  tl.to(selector, { x: 200, duration: 1 })
    .to(selector, { rotation: 180, duration: 0.5 });
  return tl;
}

const box1Timeline = createBoxAnimation(".box1");
const box2Timeline = createBoxAnimation(".box2");

Такой подход позволяет создавать независимые копии Timeline для разных элементов.

2. Использование .add() для комбинирования

Timeline можно добавлять в другой Timeline, что обеспечивает иерархическую структуру анимаций:

const childTimeline = gsap.timeline();
childTimeline.to(".child", { opacity: 1, duration: 1 });

const parentTimeline = gsap.timeline();
parentTimeline.add(childTimeline, "+=0.5")  // запускаем с задержкой 0.5 секунды
               .to(".parent", { scale: 1.2, duration: 1 });

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

3. Повторное использование одного Timeline

Timeline можно кэшировать и повторно запускать через методы .restart() или .play():

const tl = gsap.timeline({ paused: true });
tl.to(".element", { x: 300, duration: 2 });

// повторный запуск
tl.restart();

Использование параметра paused: true позволяет контролировать момент старта Timeline и применять его несколько раз без пересоздания.

Передача параметров при переиспользовании

Чтобы Timeline был максимально универсальным, можно использовать параметры при создании анимации:

function animateElement(selector, distance, rotation) {
  return gsap.timeline()
    .to(selector, { x: distance, duration: 1 })
    .to(selector, { rotation: rotation, duration: 0.5 });
}

animateElement(".box1", 150, 90).play();
animateElement(".box2", 300, 180).play();

Такой подход превращает Timeline в настраиваемый модуль анимации, где изменяются только входные параметры.

Контроль состояния переиспользуемого Timeline

GSAP предоставляет методы для управления Timeline на лету:

  • .pause() — приостанавливает воспроизведение.
  • .resume() — возобновляет.
  • .seek(time) — перемещает позицию воспроизведения к определенному времени.
  • .reverse() — воспроизводит Timeline в обратном направлении.

Пример динамического контроля:

const tl = animateElement(".box", 200, 90);
tl.play();

setTimeout(() => {
  tl.reverse(); // анимация возвращается обратно
}, 2000);

Ключевые моменты для эффективного переиспользования Timeline

  1. Функции создают независимые Timeline — каждый вызов возвращает новый объект.
  2. Добавление Timeline в другой Timeline упрощает построение сложных анимационных схем.
  3. Параметры делают Timeline универсальными и позволяют использовать один шаблон для разных элементов.
  4. Контроль методов GSAP обеспечивает динамическое управление воспроизведением и повторное использование анимаций без пересоздания.

Использование этих подходов делает работу с GSAP более структурированной, уменьшает дублирование кода и позволяет строить масштабируемые анимационные системы для веб-приложений.

Оглавление