SVG path анимации

SVG-пути представляют собой последовательность команд, описывающих геометрию линии: линии, кривые Безье, дуги. Ключевое свойство, которое делает их пригодными для анимации, — возможность интерпретировать путь как непрерывную длину.

В контексте Motion One работа с SVG path чаще всего сводится к двум стратегиям:

  • анимация «рисования» линии (draw effect)
  • морфинг геометрии пути
  • комбинированные эффекты с трансформациями и opacity

Основной принцип: визуальный эффект создаётся не изменением формы как таковой, а управлением параметрами обводки или нормализованной длины пути.

Базовая анимация рисования через stroke-dasharray

Классический подход основан на свойствах stroke-dasharray и stroke-dashoffset.

Идея:

  • задаётся длина штриха равная длине пути
  • смещение штриха изменяется от полной длины к нулю
  • создаётся эффект постепенного проявления линии
<svg viewBox="0 0 400 200">
  <path id="line"
        d="M10 100 C 100 0, 200 200, 390 100"
        fill="none"
        stroke="black"
        stroke-width="3" />
</svg>
import { animate } from "motion";

const path = document.querySelector("#line");
const length = path.getTotalLength();

path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;

animate(path, {
  strokeDashoffset: [length, 0]
}, {
  duration: 2,
  easing: "ease-in-out"
});

Такой подход универсален и работает во всех браузерах, но требует ручного вычисления длины пути.

Упрощённая модель через pathLength

Motion One предоставляет более высокоуровневую абстракцию — свойство pathLength.

Вместо работы с пикселями используется нормализованная шкала от 0 до 1.

import { animate } from "motion";

animate("#line", {
  pathLength: [0, 1]
}, {
  duration: 2
});

Принцип работы

  • 0 — путь полностью скрыт
  • 1 — путь полностью отрисован
  • библиотека автоматически управляет stroke-dashoffset

Это устраняет необходимость в getTotalLength() и ручных вычислениях.

Комбинирование pathLength и opacity

Чистая «рисующаяся линия» часто дополняется изменением прозрачности.

animate("#line", {
  pathLength: [0, 1],
  opacity: [0, 1]
}, {
  duration: 1.5,
  easing: "ease-out"
});

Такой подход особенно полезен для:

  • схем и диаграмм
  • UI-индикаторов
  • иллюстративной графики

Синхронизация нескольких path

SVG часто содержит несколько путей, которые нужно анимировать согласованно.

<svg viewBox="0 0 400 200">
  <path class="shape" d="M10 10 L390 10" />
  <path class="shape" d="M10 100 L390 100" />
  <path class="shape" d="M10 190 L390 190" />
</svg>
import { animate, stagger } from "motion";

animate(".shape", {
  pathLength: [0, 1]
}, {
  duration: 1.2,
  delay: stagger(0.2)
});

Stagger-логика

  • каждый следующий path запускается с задержкой
  • создаётся эффект «рисования схемы»

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

SVG path может содержать сложные сегменты:

  • cubic Bézier curves (C)
  • quadratic curves (Q)
  • arcs (A)

Motion One не требует различать типы сегментов — интерпретация происходит на уровне общей длины пути.

animate("#curve", {
  pathLength: [0, 1]
}, {
  duration: 3,
  easing: "ease-in-out"
});

Особенности поведения:

  • кривые с высокой плотностью точек визуально «замедляют» анимацию
  • резкие углы могут давать визуальные скачки при низком FPS
  • сложные path желательно оптимизировать через упрощение геометрии

Использование motion timeline для SVG

Timeline позволяет синхронизировать несколько стадий анимации.

import { timeline } from "motion";

timeline([
  ["#line", { pathLength: [0, 1] }, { duration: 1 }],
  ["#line", { opacity: [1, 0.2] }, { duration: 0.5 }]
]);

Принцип:

  • каждая анимация добавляется в очередь
  • можно строить сложные последовательности
  • поддерживается параллельное выполнение

Морфинг SVG path

Помимо «рисования», важной техникой является морфинг — преобразование одной формы в другую.

animate("#shape", {
  d: [
    "M10 100 C 100 0, 200 200, 390 100",
    "M10 100 C 100 200, 200 0, 390 100"
  ]
}, {
  duration: 2
});

Ограничения морфинга

  • количество команд path должно совпадать
  • несовместимые структуры требуют предварительной нормализации
  • сложные формы лучше приводить к одинаковому сегментному виду

Подготовка path к морфингу

Типовая стратегия подготовки:

  • разбиение сложных фигур на кривые Безье
  • унификация количества сегментов
  • использование инструментов оптимизации SVG (например, SVGO)

После подготовки:

  • каждый path имеет одинаковую структуру
  • анимация становится предсказуемой
  • уменьшается вероятность артефактов

Динамическая генерация path-анимаций

Motion One позволяет комбинировать вычисляемые значения с анимацией.

const radius = 80;

animate("#circlePath", {
  d: `
    M 100 100
    m -${radius}, 0
    a ${radius},${radius} 0 1,0 ${radius * 2},0
    a ${radius},${radius} 0 1,0 -${radius * 2},0
  `
}, {
  duration: 1.5
});

Использование шаблонных строк позволяет:

  • изменять геометрию в реальном времени
  • привязывать path к состоянию приложения
  • строить реактивные SVG-сцены

Анимация частичных сегментов path

Иногда требуется анимировать не весь путь, а его часть.

Подходы:

  • разбиение path на несколько элементов <path>
  • использование масок (clipPath)
  • комбинирование strokeDasharray с сегментацией
animate("#segment", {
  pathLength: [0, 0.5]
}, {
  duration: 1
});

Это позволяет создавать эффекты:

  • прогресс-баров по траектории
  • маршрутов на карте
  • индикаторов движения

Производительность SVG path анимаций

Ключевые факторы оптимизации:

  • минимизация количества точек в path
  • избегание избыточно сложных кривых
  • использование GPU-ускоряемых свойств (opacity, transform)
  • ограничение одновременных анимаций

В контексте Motion One оптимизация особенно важна при массовых анимациях, так как библиотека стремится сохранять высокую частоту кадров за счёт лёгкого runtime.

Сочетание transform и pathLength

Часто SVG path анимации комбинируются с трансформациями:

animate("#line", {
  pathLength: [0, 1],
  scale: [0.8, 1],
  rotate: [0, 10]
}, {
  duration: 2
});

Эффект:

  • линия не только «рисуется»
  • но и слегка «оживает» за счёт движения формы
  • создаётся ощущение глубины

Реактивные сценарии SVG анимаций

SVG path часто связывается с состоянием интерфейса:

  • загрузка данных
  • прогресс операций
  • визуализация маршрутов
  • интерактивные графики

Motion One интегрируется с такими сценариями через динамическое обновление параметров анимации:

function updateProgress(value) {
  animate("#progressPath", {
    pathLength: [0, value]
  }, {
    duration: 0.4
  });
}

Сложные композиции SVG сцен

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

  • pathLength-анимации
  • opacity fade-in/out
  • transform-origin и scale
  • stagger-задержек
  • timeline-последовательностей

Это позволяет создавать:

  • анимированные инфографики
  • визуализации алгоритмов
  • интерактивные диаграммы потоков данных
Оглавление