Анимация трансформаций

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

const draw = SVG().addTo('body').size(600, 400);
const rect = draw.rect(100, 100).fill('#f06');

Метод .animate()

Метод .animate() принимает три основных параметра: длительность анимации, тип анимации (например, '<>' — easing), и функцию обратного вызова after().

rect.animate(2000, '<>').move(300, 150).after(() => {
    rect.fill({ color: '#0f6' });
});

В этом примере объект rect плавно перемещается на координаты (300, 150) за 2 секунды с линейным easing, после чего изменяется цвет заливки.

Применение трансформаций

Перемещение (translate)

Для перемещения объекта используется метод .transform() или комбинированный вызов .animate().transform():

rect.animate(1500, '<>').transform({ translateX: 200, translateY: 50 });

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

  • translateX и translateY задают смещение по осям X и Y.
  • Можно комбинировать с другими трансформациями: масштабирование или вращение.

Масштабирование (scale)

Масштабирование изменяет размер объекта относительно выбранной точки. Точка масштабирования по умолчанию — (0,0) объекта, но её можно изменить через origin.

rect.animate(1000, '<>').transform({ scaleX: 2, scaleY: 1.5, origin: 'center' });

Особенности:

  • scaleX — масштаб по горизонтали.
  • scaleY — масштаб по вертикали.
  • origin может быть 'center', 'top-left', или координаты [x, y].

Вращение (rotate)

Метод вращения задаётся в градусах и также поддерживает изменение точки вращения:

rect.animate(1200, '<>').transform({ rotate: 45, origin: 'center' });

Важные моменты:

  • Положительные значения угла вращают по часовой стрелке.
  • Можно комбинировать с translate и scale для сложных эффектов.

Наклон (skew)

Наклон по осям X и Y задается через свойства skewX и skewY:

rect.animate(800, '<>').transform({ skewX: 20, skewY: 10 });

Комбинированные трансформации

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

rect.animate(2000, '<>')
    .transform({
        translateX: 100,
        translateY: 50,
        rotate: 30,
        scaleX: 1.5,
        scaleY: 0.8,
        skewX: 15
    });

Порядок применения трансформаций важен: сначала масштабирование, затем вращение, наклон и перемещение.

Управление анимацией

Цикличность (loop)

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

rect.animate(1000, '<>').transform({ rotate: 360 }).loop(true);

Обратная анимация (reverse)

Метод .reverse() меняет направление текущей анимации:

const anim = rect.animate(1500, '<>').transform({ translateX: 200 });
anim.reverse();

Пауза и возобновление (pause / play)

const anim = rect.animate(2000).transform({ scale: 2 });
anim.pause(); // останавливает анимацию
setTimeout(() => anim.play(), 1000); // возобновление через 1 секунду

Анимация групп и вложенных элементов

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

const group = draw.group();
group.add(draw.circle(50).fill('#f06').move(50,50));
group.add(draw.rect(100, 50).fill('#0f6').move(120,50));

group.animate(2000).transform({ rotate: 45, origin: 'center' });

Все элементы внутри группы вращаются и перемещаются синхронно относительно общей точки origin.

Easing и плавность анимации

SVG.js поддерживает стандартные функции easing:

  • <> — linear
  • < — ease-in
  • > — ease-out
  • `<>’ — ease-in-out
rect.animate(1500, '<>').transform({ translateX: 200, translateY: 100 });

Easing позволяет создавать реалистичные движения, имитируя физические законы.

Анимация с кривыми Безье

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

rect.animate(2000, '<>').during((pos, morph) => {
    rect.transform({ rotate: pos * 360 });
});

pos принимает значения от 0 до 1, позволяя плавно изменять параметры в течение всей анимации.

Советы по оптимизации трансформаций

  • Использовать transform() вместо отдельных методов .move(), .scale(), .rotate(), так как это снижает нагрузку на рендеринг.
  • Для анимации большого количества элементов использовать группы (group()), чтобы применять трансформации сразу ко всем объектам.
  • Устанавливать origin явно для точного контроля над вращением и масштабированием.

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

Оглавление