Простые и эффективные техники анимации SVG с GSAP

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

Введение в GSAP и SVG

Что такое GSAP?
GSAP — это высокопроизводительная библиотека для анимации, позволяющая анимировать практически любые CSS-свойства и DOM-элементы. В отличие от CSS-анимации, GSAP предлагает больший контроль и лёгкость управления.

Как подключить GSAP?
Подключить GSAP можно через CDN:

ВыделитьHTML

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

Простые техники анимации SVG с GSAP

Анимация движения (Motion Path)
GSAP позволяет анимировать путь (motion path) по траектории, заданной в SVG. Это особенно полезно для создания плавных перемещений объектов:

ВыделитьHTML

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <path d="M10,10 Q50,90 90,10" id="motion-path" />
    <circle cx="10" cy="10" r="5" fill="red" id="ball" />
</svg>

ВыделитьJavaScript

gsap.to("#ball", {
    duration: 2,
    motionPath: "#motion-path",
    repeat: -1,
    yoyo: true
});

Масштабирование и вращения
Можно легко анимировать масштаб и угол поворота элементов SVG:

ВыделитьHTML

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="20" width="60" height="60" fill="blue" id="square" />
</svg>

ВыделитьJavaScript

gsap.fromTo("#square", {
    scale: 0,
    rotation: 0
}, {
    scale: 1,
    rotation: 360,
    duration: 2,
    ease: "power2.out"
});

Изменение цвета и прозрачности
GSAP позволяет плавно менять цвет и прозрачность SVG-элементов:

ВыделитьHTML

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="purple" id="circle" />
</svg>

ВыделитьJavaScript

gsap.to("#circle", {
    duration: 2,
    fill: "orange",
    opacity: 0.5,
    repeat: -1,
    yoyo: true
});

Последовательные анимации с TimelineMax
GSAP позволяет строить сложные последовательности анимаций с помощью TimelineMax:

ВыделитьHTML

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="80" height="80" fill="teal" id="rect" />
</svg>

ВыделитьJavaScript

let tl = gsap.timeline();
tl
    .to("#rect", { x: 50, duration: 1 })
    .to("#rect", { y: 50, duration: 1 })
    .to("#rect", { scale: 0.5, duration: 1 });

Практические примеры

Пример 1: Анимация логотипа
Создадим плавную анимацию логотипа с помощью SVG и GSAP:

ВыделитьHTML

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="none" stroke="black" stroke-width="4" id="logo" />
</svg>

ВыделитьJavaScript

gsap.to("#logo", {
    duration: 2,
    strokeDashoffset: 0,
    strokeDasharray: "251.2",
    ease: "power2.inOut"
});

Пример 2: Инфографика с анимацией
Создадим динамичную инфографику с интерактивными элементами:

ВыделитьHTML

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="none" stroke="blue" stroke-width="4" id="infographic" />
</svg>

ВыделитьJavaScript

gsap.to("#infographic", {
    duration: 2,
    attr: { r: 60 },
    ease: "elastic.out"
});

Заключение

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