Анимированные иконки

Библиотека SVG.js предоставляет гибкий и мощный инструмент для создания анимированных элементов SVG. Анимация в SVG.js строится на цепочках методов, позволяющих изменять атрибуты объектов во времени. Основной метод для анимации — animate().

const draw = SVG().addTo('body').size(200, 200);
const circle = draw.circle(50).fill('#f06');

circle.animate(1000).move(100, 100).fill('#0f9');

В этом примере круг перемещается и меняет цвет за 1 секунду. Методы move(), fill(), size() и другие могут использоваться внутри animate() для динамического изменения свойств.

Управление временными параметрами

Метод animate() принимает объект с дополнительными настройками:

  • duration — длительность анимации в миллисекундах.
  • ease — функция плавности движения ('linear', 'ease-in', 'ease-out', 'bounce').
  • delay — задержка перед стартом анимации.
circle.animate({ duration: 1500, ease: '<>', delay: 500 }).radius(30).fill('#ff0');

Использование easing-функций позволяет создать более естественное движение объектов.

Последовательные и параллельные анимации

Для последовательного выполнения анимаций используется метод after().

circle.animate(1000).move(150, 150).after(() => {
  circle.animate(500).fill('#00f');
});

Параллельные анимации можно запускать без цепочек:

circle.animate(1000).move(150, 150);
circle.animate(1000).fill('#00f');

Объект будет одновременно двигаться и менять цвет.

Работа с трансформациями

SVG.js поддерживает трансформации объектов через метод transform() или отдельные методы rotate(), scale(), skew(), translate().

circle.animate(1000).rotate(180).scale(2).translate(50, 50);

Трансформации можно комбинировать для создания сложных эффектов вращения и масштабирования.

Повороты вокруг точки

По умолчанию вращение выполняется относительно центра объекта. Чтобы вращать относительно другой точки, используется объект с координатами:

circle.animate(1000).rotate(90, 50, 50); // Поворот вокруг точки (50, 50)

Масштабирование с центрированием

Масштабирование часто требует фиксированной точки привязки:

circle.animate(1000).scale(1.5, 1.5, 75, 75);

Здесь (75, 75) — точка, относительно которой выполняется масштабирование.

Создание анимированных иконок

Анимированные иконки строятся на комбинации форм, групп и анимации трансформаций. Использование group() позволяет объединять несколько элементов и анимировать их как единое целое.

const group = draw.group();
const rect = group.rect(40, 40).fill('#f06');
const circle2 = group.circle(30).fill('#0f9').move(20, 20);

group.animate(1000).rotate(360);

В этом примере весь набор объектов вращается вместе.

Анимация сложных иконок

Для иконок с несколькими этапами анимации удобно использовать функции обратного вызова:

function animateIcon() {
  rect.animate(500).move(60, 0).after(() => {
    circle2.animate(500).scale(1.5).after(() => {
      group.animate(1000).rotate(180, 50, 50).after(animateIcon);
    });
  });
}

animateIcon();

Такая структура позволяет создавать бесконечные циклы анимации.

Работа с цветом и градиентами

Цвета и градиенты могут изменяться в процессе анимации. SVG.js поддерживает анимирование заполнения (fill) и обводки (stroke):

rect.animate(1000).fill({ color: '#ff0', opacity: 0.5 });
rect.animate(1000).stroke({ color: '#00f', width: 4 });

Градиенты задаются через gradient() и могут использоваться в анимации:

const grad = draw.gradient('linear', (add) => {
  add.stop(0, '#f06');
  add.stop(1, '#0f9');
});
rect.fill(grad);

grad.animate(2000).from(0, 0).to(1, 1);

Это позволяет создавать эффект перемещения цвета по иконке.

Анимация пути и линий

SVG.js имеет мощные возможности работы с кривыми и линиями через plot():

const path = draw.path('M10 80 C 40 10, 65 10, 95 80').fill('none').stroke({ width: 2, color: '#000' });
path.animate(1500).plot('M10 80 C 40 150, 65 150, 95 80');

Метод plot() изменяет атрибут d пути, что позволяет создавать эффекты «рисования» линий и кривых.

Анимация по траектории

Для движения объектов вдоль пути используется motion():

const dot = draw.circle(10).fill('#f06');
dot.animate(2000).during((pos) => {
  const point = path.pointAt(pos * path.length());
  dot.center(point.x, point.y);
});

Метод during() передает прогресс анимации от 0 до 1, позволяя синхронизировать движение объекта с кривой.

Управление временем и повторением

Цикличность и обратное воспроизведение анимаций задаются через loop() и reverse():

circle.animate(1000).move(150, 150).loop(3, true); // Повтор 3 раза с реверсом

Параметры loop(count, reverse) обеспечивают детальный контроль над повторением и направлением анимации.

Анимация масок и клиппатов

SVG.js поддерживает маскировку и клиппинг, что расширяет возможности анимированных иконок:

const mask = draw.rect(50, 50).fill('#fff');
const icon = draw.circle(50).fill('#f06').maskWith(mask);

mask.animate(1000).move(50, 0).loop();

Таким образом, маска движется, создавая эффект динамического проявления иконки.

Практические советы

  • Группировать элементы через group() для одновременной анимации.
  • Использовать after() и during() для сложных последовательностей.
  • Применять loop() для бесконечных иконок с цикличной анимацией.
  • Комбинировать трансформации, цвета и градиенты для выразительных визуальных эффектов.
  • Для производительности избегать одновременной анимации большого числа сложных объектов без группировки.

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

Оглавление