SVG (масштабируемая векторная графика) – популярный формат для создания интерактивной и анимированной графики в Интернете. Один из эффективных способов анимации элементов SVG — использование функции setInterval в JavaScript. В этой статье мы рассмотрим различные методы и приведем примеры кода для анимации SVG с использованием setInterval.

Метод 1: прямое манипулирование атрибутами SVG
Один из простых методов — напрямую манипулировать атрибутами SVG через регулярные промежутки времени для создания анимации. Вот пример фрагмента кода:

const svgElement = document.querySelector('#my-svg-element');
let angle = 0;
setInterval(() => {
  angle += 1;
  svgElement.setAttribute('transform', `rotate(${angle})`);
}, 100);

Метод 2: CSS-анимация с манипулированием классами
Другой подход заключается в определении CSS-анимации и применении ее к элементам SVG путем управления их классами. Этот метод обеспечивает большую гибкость и контроль над анимацией. Вот пример:

const svgElement = document.querySelector('#my-svg-element');
svgElement.classList.add('rotate-animation');
// CSS:
// .rotate-animation {
//   animation: rotate 2s linear infinite;
// }
//
// @keyframes rotate {
//   0% { transform: rotate(0deg); }
//   100% { transform: rotate(360deg); }
// }

Метод 3: библиотеки анимации SVG
Несколько библиотек, таких как Snap.svg и GreenSock Animation Platform (GSAP), предоставляют высокоуровневые API для анимации элементов SVG. Эти библиотеки часто предлагают более продвинутые функции и лучшую производительность. Вот пример использования GSAP:

const svgElement = document.querySelector('#my-svg-element');
gsap.to(svgElement, {
  rotation: 360,
  duration: 2,
  repeat: -1,
  ease: 'linear'
});

Метод 4: анимация SVG SMIL
SVG SMIL (язык синхронизированной интеграции мультимедиа) — это встроенная спецификация анимации для SVG. Хотя его использование постепенно прекращается, его все еще можно использовать для базовой анимации. Вот пример использования SMIL:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <rect x="0" y="0" width="100" height="100">
    <animateTransform attributeType="XML" attributeName="transform" type="rotate" from="0" to="360" dur="2s" repeatCount="indefinite" />
  </rect>
</svg>

Анимация SVG с помощью setInterval обеспечивает универсальный и простой способ оживить вашу графику SVG. Мы исследовали различные методы, включая прямое манипулирование атрибутами, CSS-анимацию, библиотеки анимации SVG и SVG SMIL. В зависимости от ваших конкретных требований и предпочтений вы можете выбрать метод, который лучше всего соответствует вашим потребностям.