Bounds для ограничения области

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

Задание ограничений при анимации

В GSAP bounds можно использовать в сочетании с методами Draggable, ScrollTrigger и базовыми tween/ timeline-анимациями. Наиболее часто bounds применяются к объектам, которые перемещаются мышью или касанием, чтобы они не выходили за границы определённого контейнера.

Пример синтаксиса для Draggable:

gsap.registerPlugin(Draggable);

Draggable.create(".box", {
  type: "x,y",
  bounds: ".container",
  edgeResistance: 0.65,
  inertia: true
});

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

  • type: "x,y" — позволяет перемещать элемент по обеим осям.
  • bounds: ".container" — ограничивает перемещение элементом .box внутри .container.
  • edgeResistance — коэффициент сопротивления у края контейнера (от 0 до 1).
  • inertia — плавное затухание движения после отпускания элемента.

Типы Bounds

1. CSS-селектор или DOM-элемент Наиболее распространённый способ — указать контейнер через CSS-селектор или ссылку на элемент:

bounds: document.querySelector(".container")

GSAP автоматически вычисляет размеры контейнера и ограничивает движение объекта.

2. Объект с координатами Можно задать кастомные границы с помощью объекта:

bounds: {minX: 0, maxX: 500, minY: 0, maxY: 300}
  • minX и maxX — минимальное и максимальное положение по оси X.
  • minY и maxY — минимальное и максимальное положение по оси Y.

Этот подход полезен для анимаций вне DOM-контекста или при работе с канвасом.

Edge Resistance и плавное ограничение

Свойство edgeResistance управляет «упругостью» элемента при достижении границ. Значения варьируются от 0 до 1:

  • 0 — элемент моментально останавливается на границе.
  • 1 — элемент не останавливается, полностью скользит за пределы.
  • 0.5 — частичное сопротивление, движение замедляется.

Пример:

Draggable.create(".ball", {
  type: "x,y",
  bounds: ".playground",
  edgeResistance: 0.7
});

Здесь элемент замедляется при подходе к границам контейнера .playground, создавая эффект «упругого удара».

Использование Bounds с ScrollTrigger

Bounds часто применяются в анимациях, привязанных к прокрутке. Например, при ограничении вертикального перемещения контента:

gsap.registerPlugin(ScrollTrigger);

gsap.to(".panel", {
  y: 400,
  scrollTrigger: {
    trigger: ".panel",
    start: "top top",
    end: "bottom bottom",
    scrub: true,
    bounds: {minY: 0, maxY: 400}
  }
});

Особенности:

  • Bounds здесь контролируют значение y, гарантируя, что панель не выйдет за заданный диапазон.
  • scrub: true синхронизирует анимацию с прокруткой, делая движение плавным.

Динамическое изменение Bounds

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

const box = document.querySelector(".box");

function updateBounds() {
  Draggable.get(box).applyBounds({
    minX: 0,
    maxX: window.innerWidth - box.offsetWidth,
    minY: 0,
    maxY: window.innerHeight - box.offsetHeight
  });
}

window.addEventListener("resize", updateBounds);

При изменении размеров окна bounds пересчитываются, предотвращая выход элемента за видимую область.

Анимация с кастомными границами и easing

Bounds можно комбинировать с GSAP Tween и easing для создания сложных анимационных эффектов:

gsap.to(".circle", {
  duration: 2,
  x: 600,
  y: 300,
  ease: "power2.out",
  onUpdate: function() {
    const bounds = {minX: 0, maxX: 500, minY: 0, maxY: 250};
    this.x(this.x() > bounds.maxX ? bounds.maxX : this.x());
    this.y(this.y() > bounds.maxY ? bounds.maxY : this.y());
  }
});
  • onUpdate проверяет текущие координаты и корректирует их в пределах заданного диапазона.
  • Такой подход позволяет комбинировать bounds с нелинейными кривыми движения.

Итоговые рекомендации по работе с Bounds

  1. Использовать DOM-селекторы для типичных задач draggable и контейнеров.
  2. Применять объектные границы для точного контроля координат.
  3. Настраивать edgeResistance для создания естественных эффектов отскока.
  4. Динамически пересчитывать bounds при изменении размеров окна или контейнера.
  5. Совмещать bounds с easing и событиями onUpdate для более сложных анимаций.

Bounds в GSAP — мощный инструмент для контроля движения элементов. Их правильное использование позволяет создавать интуитивно понятные интерфейсы с плавной и предсказуемой анимацией.

Оглавление