SVG paths как траектории движения

GSAP (GreenSock Animation Platform) предоставляет мощный и гибкий инструментарий для анимации элементов на веб-странице. Одним из наиболее интересных и визуально впечатляющих применений является анимация объектов вдоль SVG paths. SVG path — это кривые, линии и арки, задающие траекторию движения. Использование их в GSAP позволяет создавать сложные, динамичные и точные анимации, где объект следует строго по заданной форме.

Основы работы с SVG paths

SVG path определяется атрибутом d в элементе <path>. Этот атрибут содержит последовательность команд, например:

<svg width="400" height="200">
  <path id="myPath" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>
  • M (move to) — перемещение пера в начальную точку.
  • C (cubic Bezier) — кубическая кривая Безье с двумя управляющими точками.
  • S (smooth cubic Bezier) — сглаженная кубическая кривая Безье.
  • L (line to) — прямая линия до указанной точки.
  • Z — замыкание контура.

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

Использование GSAP MotionPathPlugin

MotionPathPlugin является специализированным плагином GSAP для работы с траекториями. Он позволяет перемещать элементы по SVG path, задавая поведение, вращение и прогресс.

Подключение плагина
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/MotionPathPlugin.min.js"></script>
Базовый пример анимации
gsap.registerPlugin(MotionPathPlugin);

gsap.to("#myObject", {
  duration: 5,
  repeat: -1,
  motionPath: {
    path: "#myPath",
    align: "#myPath",
    autoRotate: true,
    alignOrigin: [0.5, 0.5]
  },
  ease: "power1.inOut"
});

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

  • path — селектор или объект SVG path.
  • align — элемент, относительно которого выравнивается объект вдоль пути.
  • autoRotate — автоматически вращает объект по касательной траектории.
  • alignOrigin — точка привязки элемента при выравнивании.

Контроль прогресса движения по пути

GSAP позволяет управлять положением объекта вдоль пути через свойство progress или используя методы progress():

let animation = gsap.to("#myObject", {
  duration: 5,
  motionPath: {
    path: "#myPath",
    align: "#myPath",
    autoRotate: true
  },
  paused: true
});

// Переместить объект на середину пути
animation.progress(0.5);

progress принимает значение от 0 до 1, где 0 — начало пути, 1 — конец.

Сложные траектории и анимация нескольких объектов

Для нескольких объектов можно использовать один путь с разными смещениями и разными скоростями:

gsap.utils.toArray(".dot").forEach((dot, i) => {
  gsap.to(dot, {
    duration: 5 + i,
    repeat: -1,
    motionPath: {
      path: "#myPath",
      align: "#myPath",
      autoRotate: true,
      alignOrigin: [0.5, 0.5]
    },
    ease: "linear"
  });
});

Это позволяет создать эффект движения объектов с разной фазой, что особенно полезно для анимаций вроде следования за траекторией или создания орбитальных систем.

Динамическое обновление траектории

MotionPathPlugin поддерживает обновление пути в процессе анимации. Если атрибут d у <path> изменяется, объект будет следовать новой форме траектории при следующем кадре:

gsap.to("#myPath", {
  duration: 3,
  attr: { d: "M10 80 Q 95 10 180 80" } // Квадратичная кривая Безье
});

Анимация объектов, привязанных к пути, обновится автоматически, если используется align.

Настройка кривизны и направления

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

  • start: стартовая позиция на пути (0–1)
  • end: конечная позиция на пути (0–1)
  • curviness: степень сглаживания при сложных траекториях (для Bezier-путей)
gsap.to("#myObject", {
  duration: 4,
  motionPath: {
    path: "#myPath",
    align: "#myPath",
    autoRotate: true,
    start: 0.2,
    end: 0.8
  }
});

Практические советы

  • Для сложных анимаций с множеством объектов желательно использовать SVG path с минимальным количеством точек, чтобы снизить нагрузку на рендеринг.
  • autoRotate помогает создавать реалистичное движение объектов, таких как машины, самолёты или стрелки.
  • Для синхронизации движения с временной шкалой GSAP можно использовать timeline, что позволяет комбинировать анимации вдоль разных траекторий.

GSAP с MotionPathPlugin открывает практически неограниченные возможности для создания плавных, гибких и динамичных анимаций объектов по SVG paths, обеспечивая контроль над скоростью, поворотом, фазой и сложностью движения.

Оглавление