Кастомные easing через CustomEase

Библиотека GSAP предоставляет мощный инструмент для управления анимацией, и CustomEase позволяет создавать собственные кривые ускорения и замедления (easing), выходящие за рамки стандартных предустановок. CustomEase работает через создание кастомной функции, которая описывает, как изменяется значение параметра во времени.

import { gsap } from "gsap";
import { CustomEase } from "gsap/CustomEase";

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

В этом примере используется SVG-путь для задания кривой Bezier. Первые две координаты (0,0) задают начальную точку, а последующие пары — контрольные точки кривой, формирующей плавность анимации.

Формат SVG-пути для CustomEase

SVG-путь описывается в формате M0,0 Cx1,y1 x2,y2 1,1, где:

  • M0,0 — начальная точка на координатной сетке easing (начало анимации).
  • C — команда для кубической кривой Безье.
  • (x1, y1) и (x2, y2) — контрольные точки, определяющие кривизну.
  • 1,1 — конечная точка анимации (значение в конце времени).

Каждая координата должна находиться в диапазоне от 0 до 1, что соответствует нормированному времени и нормированному значению свойства анимации.

Применение CustomEase к сложным анимациям

CustomEase удобно использовать для создания нетривиальных эффектов: замедления в начале и ускорения в конце, “пружинных” анимаций, последовательных рывков.

CustomEase.create("bounce", "M0,0 C0.3,1.5 0.7,-0.5 1,1");
gsap.to(".ball", { duration: 2, y: 300, ease: "bounce" });

Такой путь создаёт эффект отскока, где объект сначала ускоряется, затем проходит через отрицательное значение, создавая визуальный “рывок”, и постепенно останавливается на финальной позиции.

Интерактивное создание кастомных кривых

CustomEase поддерживает визуальные редакторы кривых, такие как CustomEase Visual Editor, которые позволяют наглядно настраивать ускорения и замедления, а затем экспортировать путь в формате SVG. Это особенно полезно для сложных анимаций с множеством ключевых точек, где ручное вычисление координат становится неудобным.

Управление динамическими параметрами

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

CustomEase.create("slideFastSlow", "M0,0 C0.4,0 0.2,1 1,1");

gsap.timeline()
  .to(".panel", { duration: 1, x: 500, ease: "slideFastSlow" })
  .to(".panel", { duration: 1, x: 0, ease: "slideFastSlow" });

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

Настройка нескольких кривых в одном проекте

Для сложных интерфейсов часто требуется несколько кастомных кривых для разных элементов. В GSAP это реализуется через присвоение уникальных имён кривым:

CustomEase.create("slowStart", "M0,0 C0.05,0 0.2,1 1,1");
CustomEase.create("fastEnd", "M0,0 C0.8,0 0.95,1 1,1");

gsap.to(".menu", { duration: 1.5, x: 200, ease: "slowStart" });
gsap.to(".tooltip", { duration: 1, y: -50, ease: "fastEnd" });

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

Интеграция с Timeline и секвенсами

CustomEase отлично сочетается с gsap.timeline(), где несколько анимаций могут использовать разные кривые для сложного движения:

const tl = gsap.timeline();
tl.to(".circle", { duration: 1, scale: 2, ease: "slowStart" })
  .to(".circle", { duration: 1, rotation: 360, ease: "fastEnd" });

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

Сравнение с стандартными easing

Стандартные easing GSAP (power1.inOut, bounce.out, elastic.in) имеют фиксированные кривые, которые подходят для большинства случаев. CustomEase же позволяет:

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

Практические рекомендации

  • Использовать визуальный редактор для сложных кривых.
  • Проверять кривые на нормированную шкалу от 0 до 1, чтобы анимация не выходила за пределы ожидаемых значений.
  • Совмещать CustomEase с timeline для последовательных и комбинированных анимаций.
  • Экспериментировать с контрольными точками для создания эффектов ускорения, замедления, “пружины” и рывков.

CustomEase в сочетании с GSAP превращает обычные анимации в точные, выразительные и уникальные движения, полностью управляемые через кастомные кривые.

Оглавление