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

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

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

SVG path как основа траектории

SVG-путь задаётся строкой команд, например:

M0,0 C150,0 150,200 300,200

где:

  • M — начальная точка
  • C — кубическая кривая Безье
  • координаты определяют форму траектории

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

Базовое движение объекта по path

В mo.js движение по траектории реализуется через tween-анимацию, в которую передаётся SVG path. Объекту задаётся процент прохождения пути, а библиотека автоматически вычисляет координаты.

const pathMotion = new mojs.Tween({
  duration: 2000,
  onUpdate: (progress) => {
    const point = path.getPointAtLength(pathLength * progress);

    element.style.transform = `translate(${point.x}px, ${point.y}px)`;
  }
});

Здесь используется базовый принцип:

  • progress изменяется от 0 до 1
  • координаты берутся через getPointAtLength
  • DOM-элемент перемещается через transform

Использование SVGPathElement для вычисления координат

Для точной работы с траекторией используется API SVG:

const path = document.querySelector('path');
const pathLength = path.getTotalLength();

Каждая точка на пути вычисляется через:

path.getPointAtLength(distance)

где distance — текущая позиция вдоль кривой.

Такой подход позволяет:

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

Анимация через параметр pathStart / pathEnd

В mo.js используется концепция сегментного отображения пути. Вместо перемещения объекта можно анимировать видимую часть линии.

const tween = new mojs.Tween({
  duration: 3000,
  onUpdate: (progress) => {
    path.style.strokeDasharray = `${progress * 1000} 1000`;
  }
});

В более абстрактной форме это выражается через:

  • pathStart — начало видимого сегмента
  • pathEnd — конец видимого сегмента

Такой подход применяется для:

  • эффекта «рисования линии»
  • динамического раскрытия траектории
  • визуализации потоков движения

Поворот объекта по направлению движения

Для реалистичной анимации объект часто поворачивается по касательной к кривой. Это требует вычисления угла между двумя соседними точками.

const p1 = path.getPointAtLength(distance);
const p2 = path.getPointAtLength(distance + 1);

const angle = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;

Применение:

element.style.transform =
  `translate(${p1.x}px, ${p1.y}px) rotate(${angle}deg)`;

Такой метод обеспечивает:

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

Интеграция с mo.js Shape и Burst

Анимация по пути часто комбинируется с визуальными эффектами mo.js, такими как Shape и Burst.

Пример движения частицы вдоль пути с одновременным масштабированием:

const tween = new mojs.Tween({
  duration: 2500,
  onUpdate: (p) => {
    const point = path.getPointAtLength(pathLength * p);

    const scale = 1 - p;

    element.style.transform =
      `translate(${point.x}px, ${point.y}px) scale(${scale})`;
  }
});

Это позволяет:

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

Синхронизация нескольких объектов на одном пути

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

const offset = 0.2;

const progress = (globalProgress + offset) % 1;

const point = path.getPointAtLength(pathLength * progress);

Так создаются:

  • цепочки частиц
  • эффекты следа
  • потоковые анимации

Использование easing вдоль траектории

Хотя движение по пути линейно по длине, можно управлять скоростью через easing-функции:

const eased = mojs.easing.cubic.out(progress);
const point = path.getPointAtLength(pathLength * eased);

Это позволяет:

  • ускорять старт движения
  • замедлять завершение
  • создавать инерционные эффекты

Работа с несколькими сегментами пути

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

const segmentLength = pathLength * 0.5;
const point = path.getPointAtLength(segmentLength * progress);

Так можно:

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

Синхронизация с timeline mo.js

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

const timeline = new mojs.Timeline();

timeline.add(pathTween, shapeTween, burstTween);
timeline.play();

Это даёт возможность:

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

Оптимизация вычислений

При большом количестве объектов критично снижать нагрузку:

  • кэширование pathLength
  • предварительное вычисление точек
  • ограничение частоты обновлений через requestAnimationFrame

Пример оптимизированного цикла:

function animate(time) {
  const progress = (time % duration) / duration;

  const point = lookupTable[Math.floor(progress * tableSize)];

  element.style.transform =
    `translate(${point.x}px, ${point.y}px)`;

  requestAnimationFrame(animate);
}

Использование lookup-table снижает количество вызовов getPointAtLength.

Комбинирование с пользовательскими кривыми

mo.js не ограничивает тип траектории. Можно создавать:

  • экспоненциальные пути через генерацию SVG
  • случайные кривые через алгоритмы шума
  • физически корректные траектории (гравитация, импульс)

Генерация пути:

const path = `M0,0 C${x1},${y1} ${x2},${y2} ${x3},${y3}`;

После этого путь используется как стандартная траектория движения.

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

Анимация по пути применяется в:

  • интерфейсах навигации
  • обучающих визуализациях
  • интерактивных графах
  • визуальных эффектов уведомлений
  • игровых UI-элементах

Основное преимущество — высокая выразительность при минимальном коде управления геометрией движения.

Оглавление