Базовые принципы анимации

Для работы с SVG.js необходимо создать основной контейнер SVG, в котором будут размещаться все графические элементы. Контейнер создаётся с помощью функции SVG():

const draw = SVG().addTo('body').size(600, 400);
  • addTo('body') — добавляет SVG в указанный элемент DOM.
  • size(width, height) — задаёт размеры контейнера.

После создания контейнера можно добавлять фигуры и применять к ним анимацию.

Основные методы анимации

Анимация в SVG.js строится на цепочке вызовов через метод animate(). Базовая форма:

element.animate(duration, easing).attr({x: 100, y: 50});
  • duration — длительность анимации в миллисекундах.
  • easing — функция сглаживания (например, '<>', '<', '>', 'linear').
  • attr() — обновление атрибутов элемента во время анимации.

Метод animate() создаёт объект анимации, позволяющий использовать дополнительные функции:

  • loop(times, reverse) — повтор анимации указанное количество раз; reverse задаёт чередование движения.
  • delay(ms) — задержка перед стартом анимации.
  • during(callback) — вызов функции на каждом кадре анимации с аргументом pos (позиция от 0 до 1).

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

SVG.js позволяет анимировать трансформации объектов: перемещение, вращение, масштабирование.

rect.animate(2000, '<>').move(200, 100).rotate(45).scale(1.5);
  • move(x, y) — перемещает элемент.
  • rotate(angle, cx, cy) — вращение на angle градусов относительно точки (cx, cy); если не указаны, используется центр элемента.
  • scale(factor) — масштабирование относительно центра элемента.

Трансформации можно комбинировать, и SVG.js корректно интерполирует их между кадрами анимации.

Анимация цвета и стиля

С помощью метода animate() можно менять свойства стиля, такие как цвет заливки, цвет обводки, прозрачность:

circle.animate(1000, '>').fill('#ff0000').stroke({color: '#000', width: 5}).opacity(0.5);
  • fill(color) — цвет заливки.
  • stroke({color, width, opacity}) — свойства обводки.
  • opacity(value) — прозрачность элемента.

SVG.js автоматически интерполирует цвета между начальным и конечным состоянием.

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

Для сложных сценариев используется цепочка анимаций:

rect.animate(1000).move(200, 0)
    .animate(500).rotate(90)
    .animate(800).scale(1.2);

Каждая анимация стартует после завершения предыдущей. Для параллельных анимаций используется метод animate().during() без последовательного вызова:

rect.animate(2000).move(300, 100);
rect.animate(2000).fill('#00ff00');

Здесь обе анимации происходят одновременно.

Использование кривых Безье и кастомного easing

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

element.animate(1500, '<>')
       .attr({x: 300})
       .during((pos) => {
           element.attr({y: 200 * Math.sin(pos * Math.PI)});
       });
  • pos варьируется от 0 до 1.
  • Позволяет создавать сложные траектории, которые невозможно задать только через стандартные move и rotate.

Контроль анимаций

SVG.js предоставляет методы для управления анимацией:

  • stop() — немедленно останавливает анимацию.
  • pause() / play() — приостанавливает и возобновляет анимацию.
  • finish() — завершает анимацию и устанавливает конечное состояние.

Пример:

let anim = rect.animate(3000).move(400, 200);
setTimeout(() => anim.pause(), 1500);
setTimeout(() => anim.play(), 2000);

Анимация групп объектов

Группировка объектов через group() позволяет анимировать несколько элементов одновременно:

const group = draw.group();
group.add(rect).add(circle);
group.animate(2000).move(100, 50).rotate(30);
  • Все элементы внутри группы двигаются и вращаются как единый объект.
  • Внутренние элементы сохраняют свои относительные позиции и размеры.

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

  • Анимировать атрибуты, а не свойства CSS, так как это быстрее и корректнее для SVG.
  • Минимизировать количество одновременно анимируемых элементов, особенно сложных кривых и больших групп.
  • Использовать requestAnimationFrame через встроенный движок SVG.js, который автоматически синхронизирует обновления с частотой обновления экрана.

Подсказки по плавности и визуальной выразительности

  • Для плавного старта и остановки используйте easing: '<>' (ease-in-out).
  • Для циклических эффектов добавляйте loop(true, true).
  • Комбинируйте движения, трансформации и изменение цвета, чтобы создавать более динамичные визуальные эффекты.

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

Оглавление