Синтаксис SVG path для CustomEase

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

Основы CustomEase

CustomEase используется для создания кастомных кривых скорости в анимациях GSAP. Он строится на основе кривой Безье, где координаты x соответствуют времени анимации (от 0 до 1), а y – прогрессу анимации (от 0 до 1).

gsap.to(".element", {
  duration: 2,
  x: 300,
  ease: CustomEase.create("custom", "M0,0 C0.25,0.1 0.25,1 1,1")
});

В этом примере M0,0 C0.25,0.1 0.25,1 1,1 — это SVG path, описывающий кривую Безье для анимации.

Структура SVG path для кривой

  1. M x,y – команда “move to”, определяет стартовую точку кривой. Для CustomEase всегда M0,0.

  2. C x1,y1 x2,y2 x,y – кубическая кривая Безье.

    • x1,y1 – первая контрольная точка
    • x2,y2 – вторая контрольная точка
    • x,y – конечная точка сегмента

Каждая кривая начинается с M0,0 и заканчивается 1,1. Можно добавлять несколько сегментов для создания более сложных кривых:

"M0,0 C0.1,0.7 0.2,0.3 0.3,0.5 C0.4,0.6 0.6,0.4 1,1"

Преобразование графических кривых в CustomEase

Для визуальной настройки часто используют инструменты типа Cubic Bezier или онлайн редакторы CustomEase. Основной принцип: кривую рисуют от (0,0) до (1,1), затем экспортируют путь SVG.

  • X координаты должны быть строго в пределах [0,1].
  • Y координаты также в [0,1], где 0 – старт, 1 – финал анимации.

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

Множественные сегменты и сложные кривые

CustomEase поддерживает несколько сегментов кривой, что позволяет создавать эффекты «ускорение–замедление–отскок» или «качание».

Пример сложной кривой:

CustomEase.create("swing", "M0,0 C0.2,0.5 0.4,0.2 0.5,0.5 C0.6,0.8 0.8,0.5 1,1");
  • Первый сегмент управляет начальной фазой анимации.
  • Второй сегмент моделирует вторую часть движения, например замедление или отскок.

Взаимодействие CustomEase с GSAP

CustomEase интегрируется с любыми анимациями GSAP, включая to, from, fromTo и timeline.

gsap.timeline()
  .to(".box", { x: 200, ease: "custom" })
  .to(".box", { y: 150, ease: "swing" });

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

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

  1. Минимизировать сегменты, если анимация не требует сложных движений.
  2. Следить за диапазоном координат, чтобы кривые оставались в пределах [0,1].
  3. Использовать визуальные редакторы, чтобы проще подбирать нужную кривую без ручной корректировки SVG path.
  4. Тестировать кривую на разных свойствах: скорость перемещения, масштаб, поворот – результат может сильно различаться.

Преимущества использования SVG path

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

Синтаксис SVG path в CustomEase — это мощный инструмент для профессиональных анимаций, позволяющий создавать уникальные и точные временные функции без ограничения стандартными easing-функциями.

Оглавление