Responsive SVG-анимации

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

Для начала, каждый SVG-элемент можно анимировать с помощью GSAP через функцию gsap.to() или gsap.fromTo(). Например, анимация движения круга по оси X:

gsap.to("#circle", {
  duration: 2,
  x: 200,
  ease: "power2.inOut"
});

Ключевой момент: GSAP напрямую манипулирует свойствами CSS и SVG-атрибутами, такими как cx, cy, r, stroke-dasharray, stroke-dashoffset.

Анимация путей с использованием stroke-dasharray и stroke-dashoffset

Для создания эффекта “рисования” линии используется комбинация stroke-dasharray и stroke-dashoffset.

  1. Вычисление длины пути: Метод getTotalLength() возвращает длину пути в пикселях:

    const path = document.querySelector("#line");
const length = path.getTotalLength();

  2. Инициализация атрибутов:

    path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;

  3. Анимация рисования:

    gsap.to(path, {
  strokeDashoffset: 0,
  duration: 2,
  ease: "power1.inOut"
});

Эта техника особенно эффективна для анимации логотипов и интерактивных диаграмм.

Работа с transformOrigin и масштабированием

SVG-элементы имеют свои особенности при трансформациях. Свойство transformOrigin определяет точку, вокруг которой происходят вращения и масштабирование. Значения можно задавать в процентах или пикселях:

gsap.to("#square", {
  rotation: 45,
  scale: 1.5,
  transformOrigin: "50% 50%",
  duration: 1
});

Важно: при анимации сложных SVG-групп <g> точка трансформации применяется ко всей группе, а не к отдельным элементам.

Использование Timeline для комплексных анимаций

gsap.timeline() позволяет объединять последовательные анимации в единый поток, упрощая синхронизацию нескольких SVG-элементов:

const tl = gsap.timeline({ repeat: -1, yoyo: true });

tl.to("#circle", { x: 100, duration: 1 })
  .to("#rect", { y: 50, duration: 1 }, "<")
  .to("#line", { strokeDashoffset: 0, duration: 2 }, "-=0.5");

Ключевой момент: относительные позиции ("<" и "-=0.5") позволяют запускать анимации одновременно или с перекрытием.

Responsive-анимации SVG

Для адаптивного дизайна важно, чтобы SVG-элементы корректно масштабировались на различных экранах. Основные подходы:

  1. Использование viewBox и preserveAspectRatio

    • viewBox="0 0 200 200" задает координатную систему SVG.
    • preserveAspectRatio="xMidYMid meet" сохраняет пропорции при изменении размеров контейнера.

  2. Анимация относительно процентов Вместо абсолютных пикселей применять относительные единицы:

    gsap.to("#circle", {
  x: "50%", // смещение на 50% ширины контейнера
  duration: 1.5
});

  3. Обновление при ресайзе Использование события resize для пересчета координат:

    window.addEventListener("resize", () => {
  const width = window.innerWidth;
  gsap.set("#circle", { x: width * 0.5 });
});

Анимация сложных SVG-путей с MorphSVGPlugin

MorphSVGPlugin позволяет плавно трансформировать один путь в другой. Это особенно полезно для интерактивных и визуально выразительных интерфейсов.

gsap.to("#shape1", {
  duration: 2,
  morphSVG: "#shape2",
  ease: "power2.inOut"
});

Особенности использования:

  • Количество точек в исходном и целевом пути желательно согласовывать для плавной анимации.
  • Плагины GSAP (MorphSVGPlugin) требуют лицензии для коммерческого использования.

Контроль скорости и easing

GSAP предоставляет большое количество easing-функций (power1, power2, elastic, bounce) для создания естественного движения. Пример:

gsap.to("#circle", {
  x: 300,
  duration: 2,
  ease: "elastic.out(1, 0.3)"
});

Использование stagger позволяет добавлять последовательное смещение для группы элементов:

gsap.to(".dots", {
  y: 50,
  duration: 1,
  stagger: 0.2,
  ease: "power1.inOut"
});

Оптимизация производительности

  1. Использовать will-change: transform для элементов, которые анимируются.
  2. Минимизировать сложность SVG: меньше узлов и атрибутов ускоряет рендер.
  3. Использовать Timeline вместо отдельных анимаций для синхронизации и уменьшения нагрузки на браузер.

Итоговые рекомендации по Responsive SVG-анимациям

  • Всегда задавать viewBox и preserveAspectRatio.
  • Применять относительные единицы или пересчитывать координаты при изменении размеров.
  • Использовать Timeline и стэггеры для сложных последовательностей.
  • Для эффекта рисования использовать stroke-dasharray и stroke-dashoffset.
  • При сложной морфинге путей подключать MorphSVGPlugin.

Эти практики обеспечивают плавные, адаптивные и масштабируемые SVG-анимации с высокой производительностью на всех устройствах.

Оглавление