Параметры: align, alignOrigin, autoRotate

Библиотека GSAP предоставляет мощные средства для анимации объектов в JavaScript, включая точное управление движением вдоль траекторий и поворотами элементов. Три ключевых параметра, которые позволяют тонко настраивать движение вдоль пути и ориентацию объекта — это align, alignOrigin и autoRotate. Они чаще всего используются в сочетании с плагином MotionPathPlugin, который отвечает за анимацию объектов по кривым и сложным траекториям.

Параметр align

Назначение: Определяет элемент, который будет использоваться в качестве ориентира для выравнивания объекта при движении по траектории.

Тип: CSS-селектор, DOM-элемент или null.

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

  • При значении null объект движется строго по траектории без выравнивания относительно других элементов.
  • Если указать CSS-селектор или DOM-элемент, объект будет ориентироваться относительно заданного элемента.
  • Часто используется в комбинации с autoRotate для динамического поворота вдоль кривой.

Пример использования:

gsap.to(".box", {
  duration: 3,
  motionPath: {
    path: "#curve",
    align: "#curve",
    alignOrigin: [0.5, 0.5],
    autoRotate: true
  }
});

В этом примере .box будет двигаться по кривой #curve, при этом выравнивание будет относительно самой кривой.

Параметр alignOrigin

Назначение: Определяет точку на элементе, которая будет совмещена с траекторией при использовании align.

Тип: Массив из двух чисел [x, y], где x и y задаются в диапазоне от 0 до 1.

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

  • [0, 0] — верхний левый угол элемента будет привязан к траектории.
  • [0.5, 0.5] — центр элемента совмещается с траекторией (значение по умолчанию).
  • [1, 1] — нижний правый угол элемента привязывается к траектории.

Пример использования:

gsap.to(".circle", {
  duration: 2,
  motionPath: {
    path: "#path",
    align: "#path",
    alignOrigin: [0, 0], // верхний левый угол
    autoRotate: true
  }
});

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

Параметр autoRotate

Назначение: Автоматически поворачивает объект в направлении движения по траектории.

Тип: Булевое значение true/false или массив с дополнительными настройками.

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

  • При значении true GSAP вычисляет угол между текущей и следующей точкой на пути и поворачивает объект в направлении движения.

  • Можно передавать массив вида [rotationOffset, rotationProp] для более тонкой настройки:

    • rotationOffset — угол смещения поворота в градусах.
    • rotationProp — CSS-свойство для поворота, например "rotation" или "rotateZ".

Пример использования:

gsap.to(".arrow", {
  duration: 4,
  motionPath: {
    path: "#track",
    align: "#track",
    alignOrigin: [0.5, 0.5],
    autoRotate: [90, "rotation"]
  }
});

В этом примере стрелка будет следовать по траектории #track, центр элемента совпадает с траекторией, а угол поворота дополнительно смещен на 90°.

Совместное использование параметров

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

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

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

Сложный пример:

gsap.to(".plane", {
  duration: 6,
  motionPath: {
    path: "#flightPath",
    align: "#flightPath",
    alignOrigin: [0.5, 0.5],
    autoRotate: [45, "rotation"]
  },
  ease: "power1.inOut"
});

Здесь самолет плавно движется по траектории #flightPath, центр самолета точно совпадает с кривой, а угол поворота дополнительно смещен на 45°, создавая эффект естественного наклона при поворотах.

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

Оглавление