24. SVG Animation

Иллюстрация к уроку SVG (Scalable Vector Graphics) – это мощный инструмент для создания векторной графики в вебе. Помимо статических изображений, SVG позволяет создавать потрясающие анимации прямо в браузере, без использования Flash или JavaScript-библиотек. В этом уроке мы рассмотрим базовые способы анимации SVG.

Основы анимации SVG

Анимация SVG достигается путем изменения атрибутов SVG-элементов с течением времени. Существует несколько способов анимации, но мы рассмотрим два основных: атрибуты <animate>, <animateTransform> и CSS анимации.

Атрибут `<animate>`

Атрибут <animate> позволяет плавно изменять числовые атрибуты элементов SVG. Он работает, задавая начальное и конечное значения атрибута, а также продолжительность анимации.

<svg width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="red">
    <animate attributeName="cx"
             from="50" to="150"
             dur="3s"
             repeatCount="indefinite" />
  </circle>
</svg>

В этом примере круг перемещается по горизонтали от x=50 до x=150 за 3 секунды и повторяется бесконечно.

attributeName: Атрибут, который нужно анимировать (в данном случае, cx - координата центра круга по оси X).
from: Начальное значение атрибута.
to: Конечное значение атрибута.
dur: Продолжительность анимации (в секундах или миллисекундах).
repeatCount: Количество повторений анимации. indefinite означает, что анимация будет повторяться бесконечно.

Атрибут `<animateTransform>`

Этот атрибут позволяет анимировать трансформации SVG-элементов, такие как перемещение, вращение, масштабирование и наклон.

<svg width="200" height="200">
  <rect x="50" y="50" width="50" height="50" fill="blue">
    <animateTransform attributeName="transform"
                      attributeType="XML"
                      type="rotate"
                      from="0 50 50" to="360 50 50"
                      dur="5s"
                      repeatCount="indefinite" />
  </rect>
</svg>

В этом примере квадрат вращается вокруг своей центральной точки (50, 50) на 360 градусов за 5 секунд и повторяется бесконечно.

attributeType: Указывает тип атрибута. Для animateTransform обычно используется XML.
type: Тип трансформации (rotate, translate, scale, skewX, skewY).
from: Начальное значение трансформации.
to: Конечное значение трансформации.

CSS анимации

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

<svg width="200" height="200">
  <style>
    .animated-circle {
      animation: pulse 2s infinite alternate;
    }

    @keyframes pulse {
      from { r: 40; fill: red; }
      to { r: 50; fill: blue; }
    }
  </style>
  <circle cx="100" cy="100" r="40" fill="red" class="animated-circle" />
</svg>

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

Жизненный пример

Анимации SVG широко используются в веб-дизайне для создания интерактивных и привлекательных элементов интерфейса. Например, иконки с анимацией при наведении, индикаторы загрузки, анимированные графики и диаграммы. Многие библиотеки JavaScript, такие как D3.js и GSAP (GreenSock Animation Platform), активно используют SVG для создания сложных визуализаций и анимаций данных. Вы можете найти примеры использования SVG анимации в таких фреймворках, как React и Vue, где SVG используется для создания динамических компонентов.

Ключевые моменты

SVG анимация позволяет создавать плавные и масштабируемые анимации в браузере.
Атрибуты <animate> и <animateTransform> позволяют анимировать числовые атрибуты и трансформации SVG-элементов.
CSS анимации предоставляют более гибкий и мощный способ анимации SVG.
SVG анимация широко используется в веб-дизайне для улучшения пользовательского опыта.
Библиотеки JavaScript, такие как D3.js и GSAP, предоставляют инструменты для создания сложных SVG анимаций.