Анимация путей и морфинг

В SVG.js путь определяется с помощью объекта SVG.Path. Путь строится из последовательности команд, таких как M (move), L (line), C (cubic Bézier), Q (quadratic Bézier), Z (close path). Основная структура:

const draw = SVG().addTo('body').size(600, 400);

const path = draw.path('M50 50 L150 50 L150 150 L50 150 Z')
                 .fill('none')
                 .stroke({ width: 2, color: '#000' });

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

  • fill('none') делает путь прозрачным внутри.
  • stroke({ width, color }) задает толщину и цвет линии.
  • M указывает начальную точку, L — линии к следующим точкам.

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

Анимация пути в SVG.js реализуется через метод animate(), который можно применять к объекту path. Основные параметры анимации:

  • Длительность (duration) в миллисекундах.
  • Задержка (delay) перед запуском.
  • Функция интерполяции (ease) для плавного перехода.

Пример плавного изменения формы:

path.animate(2000, '<>').plot('M50 50 C100 0 200 100 150 150 Z');
  • Метод plot() принимает строку с новой последовательностью команд.
  • Символ <> указывает на ease-in-out, плавное ускорение и замедление.

Важно: количество команд и точек в старом и новом пути должно быть сопоставимо для корректного морфинга. Несоответствие приводит к резким скачкам формы.

Морфинг сложных форм

Морфинг позволяет плавно превращать одну форму в другую. Для сложных фигур используется:

  1. Подготовка обоих путей с одинаковым числом точек.
  2. Использование метода animate().plot() для изменения пути.
const path1 = draw.path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
                  .fill('none')
                  .stroke({ color: '#f06', width: 3 });

const path2 = 'M10 80 C 40 50, 65 50, 95 80 S 150 10, 180 80';

path1.animate(3000, '<>').plot(path2);

Советы по морфингу:

  • Использовать одинаковое количество сегментов в обоих путях.
  • Для сложных анимаций лучше подготовить точки через редактор SVG и экспортировать путь.
  • Локальные координаты сегментов должны быть пропорциональны для плавности.

Повторяющиеся и циклические анимации

SVG.js позволяет создавать бесконечные или циклические анимации:

path.animate(2000, '<>')
    .plot('M10 80 C 40 50, 65 50, 95 80 S 150 10, 180 80')
    .loop();
  • Метод loop() запускает повторение анимации бесконечно.
  • Можно задавать параметр true/false для направления чередования (alternate):
path.animate(2000, '<>')
    .plot('M10 80 C 40 50, 65 50, 95 80 S 150 10, 180 80')
    .loop(true, true);
  • Первый true — повторение.
  • Второй true — реверс при каждом цикле.

Комбинирование анимаций с другими объектами

Пути можно анимировать одновременно с другими объектами, например, изменять цвет линии и форму:

path.animate(2500, '<>')
    .plot('M10 80 C 40 50, 65 50, 95 80 S 150 10, 180 80')
    .stroke({ color: '#0f6', width: 5 });

Метод stroke() в анимации позволяет плавно изменять цвет и толщину линии вместе с морфингом.

Синхронизация нескольких морфингов

При необходимости согласовать несколько объектов для одновременного изменения формы и положения можно использовать промисы:

Promise.all([
    path1.animate(2000, '<>').plot(path2).finished,
    path2.animate(2000, '<>').plot(path3).finished
]).then(() => console.log('Анимация завершена'));
  • Свойство finished возвращает промис, который завершается после окончания анимации.
  • Это позволяет создавать цепочки морфингов с точной синхронизацией.

Анимация с SVG.pathArray

Для более детального контроля точек пути используется pathArray:

let arr = path.array(); // Получение массива сегментов
arr[1][1] += 20;        // Смещение первой контрольной точки
path.animate(1000).plot(arr);
  • Каждый элемент массива — массив команды и координат: ['C', x1, y1, x2, y2, x, y].
  • Позволяет программно управлять формой и создавать динамический морфинг на лету.

Оптимизация анимации

  • Использовать минимальное количество точек для ускорения рендеринга.
  • Сохранять ключевые формы заранее и анимировать только необходимые сегменты.
  • Предпочтительнее использовать requestAnimationFrame через SVG.js при сложных интерактивных анимациях для плавности.

Морфинг путей в SVG.js сочетает гибкость и мощность: правильное использование animate(), plot(), pathArray и синхронизация нескольких анимаций позволяет создавать динамичные и плавные графические эффекты, от простых линий до сложных фигур с трансформацией.

Оглавление