Анимация по произвольному пути

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

Подключение MotionPathPlugin

Для использования MotionPathPlugin необходимо подключить сам плагин отдельно, если он не встроен в основной пакет GSAP:

gsap.registerPlugin(MotionPathPlugin);

Регистрация обязательна, иначе методы, связанные с анимацией по пути, работать не будут.

Создание анимации по SVG-пути

SVG-путь может быть определен как <path> в документе HTML. Пример:

<svg width="600" height="400">
  <path id="motionPath" d="M50,300 C150,50 450,50 550,300" stroke="black" fill="transparent"/>
</svg>
<div id="ball" style="width:50px; height:50px; background:red; border-radius:50%; position:absolute;"></div>

Анимация объекта по этому пути выполняется с помощью следующего кода:

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

Ключевые параметры:

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

Анимация по массиву координат

Помимо SVG, MotionPathPlugin поддерживает массив координат:

const points = [
  { x: 50, y: 300 },
  { x: 150, y: 50 },
  { x: 450, y: 50 },
  { x: 550, y: 300 }
];

gsap.to("#ball", {
  duration: 5,
  motionPath: {
    path: points,
    autoRotate: true
  },
  ease: "power1.inOut"
});

Массив точек предоставляет гибкость для динамически генерируемых траекторий.

Управление прогрессом движения

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

const tween = gsap.to("#ball", {
  duration: 5,
  motionPath: {
    path: "#motionPath",
    align: "#motionPath",
    autoRotate: true,
    alignOrigin: [0.5, 0.5]
  },
  paused: true
});

// Движение по пути при событии мыши
document.addEventListener("mousemove", e => {
  let progress = e.clientX / window.innerWidth;
  tween.progress(progress);
});

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

Использование кривых Безье и Catmull-Rom

MotionPathPlugin поддерживает сложные кривые:

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

Пример с Catmull-Rom:

const points = [
  { x: 50, y: 300 },
  { x: 150, y: 50 },
  { x: 450, y: 50 },
  { x: 550, y: 300 }
];

gsap.to("#ball", {
  duration: 5,
  motionPath: {
    path: points,
    type: "cubic",
    autoRotate: true
  },
  ease: "power1.inOut"
});

type: "cubic" указывает GSAP использовать кубические кривые для плавного движения.

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

GSAP позволяет одновременно анимировать позицию по пути и свойства объекта, например масштаб, цвет или прозрачность:

gsap.to("#ball", {
  duration: 5,
  scale: 2,
  rotation: 360,
  backgroundColor: "blue",
  motionPath: {
    path: "#motionPath",
    align: "#motionPath",
    autoRotate: true
  },
  ease: "power2.inOut"
});

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

Контроль скорости и повторений

  • Скорость движения: параметр ease и duration напрямую влияют на скорость. Для равномерной скорости можно использовать ease: "linear".
  • Повторение анимации: repeat и yoyo позволяют создавать бесконечные циклы или обратное движение по пути.
gsap.to("#ball", {
  duration: 5,
  motionPath: {
    path: "#motionPath",
    align: "#motionPath",
    autoRotate: true
  },
  repeat: -1,
  yoyo: true,
  ease: "linear"
});

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

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

Хотите, я могу составить отдельный раздел с практическими примерами интерактивных анимаций по пути с пользовательским управлением и динамическими траекториями?

Оглавление