Анимация обводки SVG

Для создания анимации обводки SVG (stroke animation) в GSAP используется сочетание свойств stroke-dasharray и stroke-dashoffset. Эти свойства позволяют имитировать постепенное “рисование” линий, кривых и фигур.

stroke-dasharray задаёт шаблон пунктирной линии: длины сегментов и пробелов. Для плавной анимации линии обычно устанавливают значение равное общей длине контура SVG. stroke-dashoffset определяет смещение начала линии. Анимация от полной длины к нулю создаёт эффект прорисовки.

gsap.fromTo("#line", 
  { strokeDasharray: 500, strokeDashoffset: 500 }, 
  { strokeDashoffset: 0, duration: 2, ease: "power1.inOut" }
);

В этом примере:

  • #line — идентификатор SVG-элемента;
  • strokeDasharray и strokeDashoffset равны длине линии, что полностью скрывает контур;
  • strokeDashoffset: 0 открывает линию по мере анимации;
  • duration задаёт длительность;
  • ease контролирует плавность движения.

Вычисление длины контура

Для динамических SVG часто требуется автоматически вычислять длину пути. GSAP не делает этого автоматически, поэтому используется метод getTotalLength():

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

gsap.fromTo(path, 
  { strokeDasharray: length, strokeDashoffset: length }, 
  { strokeDashoffset: 0, duration: 3, ease: "power2.out" }
);

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

Последовательная анимация нескольких контуров

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

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

tl.fromTo("#path1", 
  { strokeDasharray: path1Length, strokeDashoffset: path1Length }, 
  { strokeDashoffset: 0 }
)
.fromTo("#path2", 
  { strokeDasharray: path2Length, strokeDashoffset: path2Length }, 
  { strokeDashoffset: 0 }, 
  "-=0.5"
);

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

Анимация с цветом и прозрачностью

Для усиления визуального эффекта можно комбинировать обводку с изменением stroke и opacity:

gsap.fromTo("#line", 
  { strokeDasharray: length, strokeDashoffset: length, stroke: "#ff0000", opacity: 0 }, 
  { strokeDashoffset: 0, stroke: "#0000ff", opacity: 1, duration: 2 }
);

В этом примере:

  • Контур появляется постепенно;
  • Цвет линии меняется от красного к синему;
  • Появление сопровождается увеличением прозрачности.

Интерактивные анимации

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

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

line.addEventListener("mouseenter", () => {
  gsap.fromTo(line, 
    { strokeDasharray: length, strokeDashoffset: length }, 
    { strokeDashoffset: 0, duration: 1 }
  );
});

Такой подход делает SVG более интерактивным и динамичным.

Контроль скорости и синхронизации

Свойство timeScale позволяет управлять скоростью всей анимации timeline:

tl.timeScale(2); // ускоряет анимацию в 2 раза

Для циклических эффектов применяется repeat и yoyo:

gsap.fromTo("#line", 
  { strokeDasharray: length, strokeDashoffset: length }, 
  { strokeDashoffset: 0, duration: 2, repeat: -1, yoyo: true, ease: "power1.inOut" }
);

Это создаёт бесконечную анимацию “рисования и стирания” контура.

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

Анимацию обводки SVG можно комбинировать с масками и другими элементами SVG:

<svg width="400" height="200">
  <mask id="mask">
    <path id="line" d="M10 80 C 40 10, 65 10, 95 80" stroke="white" fill="transparent" stroke-width="4"/>
  </mask>
  <rect width="100%" height="100%" fill="blue" mask="url(#mask)"/>
</svg>

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

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

  • Всегда вычислять длину пути через getTotalLength() для надёжной анимации любых SVG.
  • Использовать timeline для комплексных сцен и синхронизации нескольких элементов.
  • Комбинировать strokeDashoffset с цветом и прозрачностью для более выразительных эффектов.
  • Применять интерактивные события для улучшения UX.
  • Маски и группы позволяют создавать сложные визуальные композиции без изменения структуры SVG.

Такой подход делает работу с обводкой SVG в GSAP гибкой, эффективной и визуально привлекательной.

Оглавление