Параметры: duration, ease, absolute

GSAP (GreenSock Animation Platform) предоставляет мощные инструменты для управления анимацией в JavaScript, обеспечивая гибкость и высокую производительность. Понимание ключевых параметров duration, ease и absolute позволяет создавать динамичные и плавные анимации с точным контролем времени и эффекта.

Параметр duration

duration задаёт длительность анимации в секундах. Это основной параметр для контроля скорости анимации. Если не указано значение duration, GSAP использует значение по умолчанию (обычно 0,5–0,75 секунды в зависимости от версии).

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

gsap.to(".box", { x: 300, duration: 2 });
  • x: 300 — смещение элемента по оси X на 300 пикселей.
  • duration: 2 — анимация занимает 2 секунды.

duration может быть как числом, так и функцией, возвращающей число. Это полезно для динамического расчёта времени анимации на основе условий страницы или состояния элементов:

gsap.to(".box", {
  x: 500,
  duration: () => Math.random() * 3 + 1 // случайная длительность от 1 до 4 секунд
});

Ключевые моменты:

  • Длительность всегда задаётся в секундах.
  • Может быть статической или вычисляемой динамически.
  • Влияет на скорость всех свойств анимируемого объекта.

Параметр ease

ease управляет кривой ускорения анимации. Этот параметр определяет, как изменяется скорость движения объекта с течением времени, создавая ощущение инерции, замедления или ускорения.

Примеры:

gsap.to(".box", { y: 200, duration: 1.5, ease: "power2.inOut" });
  • power2.inOut — плавное ускорение в начале и замедление в конце.
  • GSAP поддерживает десятки встроенных функций ease, включая linear, elastic, bounce, back.

Использование кастомных кривых:

gsap.to(".box", {
  rotation: 360,
  duration: 2,
  ease: "cubic-bezier(0.68, -0.55, 0.27, 1.55)"
});
  • cubic-bezier(…) — точное управление кривой ускорения.
  • Позволяет создавать уникальные эффекты движения.

Ключевые моменты:

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

Параметр absolute в таймлайнах

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

Пример с Timeline:

let tl = gsap.timeline();

tl.to(".box1", { x: 100, duration: 1 })
  .to(".box2", { y: 150, duration: 1 }, 0)        // абсолютное время начала = 0
  .to(".box3", { opacity: 1, duration: 1 }, "<"); // относительное смещение
  • Третья анимация использует “<”, чтобы начаться в момент начала предыдущей анимации.
  • Абсолютные значения позволяют точно позиционировать анимации независимо от последовательности.

Пример с числовым временем:

tl.to(".box4", { x: 200, duration: 2 }, 1.5); // начинается через 1.5 секунды от старта таймлайна

Ключевые моменты:

  • Используется только в Timeline.
  • Позволяет синхронизировать несколько анимаций по времени.
  • Может быть задано числом (секунды) или относительным символом (<, >).

Совмещение duration, ease и absolute

Эффективное использование этих параметров создаёт контролируемую, плавную и динамичную анимацию. Пример комплексной анимации:

let tl = gsap.timeline();

tl.to(".box1", { x: 100, duration: 2, ease: "power2.inOut" })
  .to(".box2", { y: 150, duration: 1.5, ease: "bounce.out" }, 0.5) // абсолютное время 0.5 сек
  .to(".box3", { scale: 1.5, duration: 1, ease: "elastic.out(1, 0.3)" }, ">0.2"); // относительное смещение
  • Box1 плавно движется с ускорением и замедлением.
  • Box2 появляется через 0,5 секунды после старта таймлайна с эффектом отскока.
  • Box3 масштабируется с эластичным эффектом чуть позже предыдущей анимации.

Использование всех трёх параметров совместно позволяет создавать последовательности с точным временем, реалистичной физикой движения и визуальной выразительностью.

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

  • Для коротких анимаций часто достаточно duration и ease.
  • Для сложных сцен с несколькими объектами критически важен absolute в Timeline.
  • Экспериментирование с кривыми ease значительно улучшает восприятие движения.
  • Комбинация динамического duration и точного absolute позволяет адаптировать анимации под разные условия экрана или событий пользователя.

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

Оглавление