Начальная и конечная позиции на пути

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

Определение начальной и конечной позиции

Начальная позиция задается через текущее состояние элемента или явно через свойства from. Конечная позиция определяется через свойства to объекта анимации. Например:

gsap.to(".box", {
  x: 300,
  y: 150,
  duration: 2
});

В этом примере элемент с классом .box перемещается от текущей позиции до координат (300, 150) за 2 секунды.

Для явного указания начальной позиции используется метод from:

gsap.from(".box", {
  x: -200,
  y: 0,
  duration: 2
});

Здесь объект стартует с координаты x = -200 и постепенно движется к текущему состоянию на странице.

Методы fromTo для точного контроля

Метод fromTo позволяет одновременно задавать начальное и конечное состояние объекта:

gsap.fromTo(".box", 
  { x: 0, y: 0 }, 
  { x: 400, y: 200, duration: 3 }
);

Преимущество fromTo в том, что не требуется зависеть от текущего состояния элемента — анимация всегда начинается и заканчивается строго там, где указано.

Работа с кривыми и сложными путями

GSAP поддерживает анимации по кривым через motionPathPlugin. Можно задавать точные начальные и конечные позиции для сложных траекторий. Пример:

gsap.registerPlugin(MotionPathPlugin);

gsap.to(".circle", {
  duration: 4,
  motionPath: {
    path: [{x: 0, y: 0}, {x: 200, y: 100}, {x: 400, y: 0}],
    curviness: 1.5
  }
});

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

Использование относительных значений

Начальные и конечные позиции можно задавать относительно текущего состояния с помощью символов += или -=:

gsap.to(".box", { x: "+=100", y: "-=50", duration: 1.5 });

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

Влияние transformOrigin и позиционирования

Для точного контроля движения важно учитывать transformOrigin и тип позиционирования (absolute, relative, fixed). Позиция объекта при анимации рассчитывается исходя из этих свойств. Например, при вращении вокруг центра:

gsap.to(".box", { rotation: 360, transformOrigin: "50% 50%", duration: 2 });

Анимация с задержкой и последовательные движения

Начальная и конечная позиции можно комбинировать с delay и stagger для создания цепочек анимаций:

gsap.to(".box", {
  x: 300,
  y: 100,
  duration: 1,
  delay: 0.5,
  stagger: 0.2
});

Каждый элемент последовательно начинает движение через 0.2 секунды, а сама анимация стартует через 0.5 секунды после вызова.

Управление временными кривыми (easing)

Easing влияет на восприятие движения между начальной и конечной точками. Например, линейная анимация:

gsap.to(".box", { x: 400, duration: 2, ease: "linear" });

Или с эффектом замедления в начале и ускорения в конце:

gsap.to(".box", { x: 400, duration: 2, ease: "power2.inOut" });

Easing позволяет задавать не только положение, но и динамику движения между начальными и конечными координатами.

Сложные комбинации и динамическое вычисление

GSAP позволяет использовать функции для вычисления начальных и конечных позиций в реальном времени:

gsap.to(".box", {
  x: () => window.innerWidth / 2,
  y: () => Math.random() * 300,
  duration: 2
});

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

Оглавление