Особенности анимации SVG-атрибутов

GSAP (GreenSock Animation Platform) предоставляет мощный и гибкий инструмент для анимации SVG-элементов в браузере. Анимация SVG отличается от анимации обычных HTML-элементов тем, что она работает не только с CSS-свойствами, но и с SVG-атрибутами, такими как d у <path>, cx и cy у <circle>, points у <polygon> и другими.

В GSAP для работы с SVG чаще всего используется метод gsap.to(), который позволяет изменять как CSS-свойства, так и SVG-атрибуты напрямую через объект attr.

gsap.to("#circle", {
  duration: 2,
  attr: { cx: 300, cy: 150 },
  ease: "power2.inOut"
});

В этом примере изменяются координаты центра круга <circle>. Ключевой момент: атрибуты SVG передаются через объект attr, что отличает их от стандартных CSS-свойств.

Анимация пути <path>

Атрибут d у <path> позволяет создавать сложные кривые и линии. GSAP предоставляет поддержку морфинга (morphing), который позволяет плавно преобразовывать одну форму в другую.

gsap.to("#shape", {
  duration: 2,
  attr: { d: "M10 80 Q 95 10 180 80 T 330 80" },
  ease: "power1.inOut"
});

Особенности анимации d:

  • Начальная и конечная формы должны содержать одинаковое количество сегментов;
  • Использование плагина MorphSVGPlugin упрощает задачу и обеспечивает корректное интерполирование кривых;
  • Можно комбинировать с другими свойствами, например fill или stroke.

Работа с координатами и размерами

SVG-атрибуты для координат (x, y, cx, cy) и размеров (width, height, r) можно анимировать напрямую:

gsap.to("#rect", {
  duration: 1.5,
  attr: { x: 200, y: 50, width: 150, height: 100 },
  ease: "elastic.out(1, 0.3)"
});

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

Анимация stroke и fill

GSAP позволяет изменять не только геометрию, но и визуальные свойства линии и заливки:

gsap.to("#line", {
  duration: 2,
  attr: { stroke: "#FF0000", "stroke-width": 5 },
  ease: "power2.inOut"
});

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

  • Для stroke-dasharray и stroke-dashoffset можно создавать эффект “рисования линии”;
  • Для сложных заливок и градиентов можно анимировать атрибуты градиента через attr.
gsap.from("#path", {
  duration: 2,
  attr: { "stroke-dashoffset": 1000 },
  ease: "linear"
});

Эта техника широко используется для создания эффектов рисования в SVG.

Комбинированные анимации

GSAP позволяет комбинировать изменения атрибутов с трансформациями и CSS-свойствами, создавая сложные интерактивные эффекты:

gsap.to("#circle", {
  duration: 2,
  attr: { cx: 300 },
  x: 100,
  rotation: 360,
  transformOrigin: "50% 50%",
  ease: "power1.inOut"
});

В этом примере одновременно анимируются координаты SVG и CSS-трансформации, что обеспечивает плавное и визуально богатое движение.

Управление последовательностью анимаций

Для сложных SVG-анимаций GSAP предлагает Timeline, позволяющий строить последовательности с точным контролем времени:

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

tl.to("#circle", { attr: { cx: 300 } })
  .to("#circle", { attr: { cy: 150 }, delay: 0.5 })
  .to("#circle", { attr: { r: 50 } });

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

  • Синхронизация нескольких анимаций;
  • Возможность обратного воспроизведения (tl.reverse());
  • Легкая настройка задержек и последовательности.

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

  • Всегда использовать объект attr для атрибутов SVG, чтобы избежать конфликтов с CSS;
  • Для морфинга сложных кривых применять MorphSVGPlugin;
  • Для анимации “рисования” использовать stroke-dasharray и stroke-dashoffset;
  • При комбинировании transform и атрибутов учитывать особенности coordinate system SVG;
  • Для интерактивных анимаций использовать Timeline и события GSAP (onComplete, onUpdate).

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

Оглавление