Типы перетаскивания: x, y, rotation

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

Drag по оси X и Y

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

gsap.registerPlugin(Draggable);

Draggable.create(".box", {
  type: "x,y", // разрешение перемещения по обеим осям
  bounds: ".container", // ограничение движения контейнером
  inertia: true, // добавление эффекта инерции
  edgeResistance: 0.65, // сопротивление при достижении края
  onDrag: function() {
    console.log("Текущие координаты:", this.x, this.y);
  }
});

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

  • type: определяет направление перетаскивания ("x", "y", "x,y"). Можно ограничить движение одной осью.
  • bounds: задаёт контейнер или границы, внутри которых элемент может перемещаться.
  • inertia: добавляет эффект замедления после отпуска элемента, создавая более естественное движение.
  • edgeResistance: контролирует сопротивление при достижении границ, помогает избежать резких «выбрасываний» за пределы контейнера.

Перетаскивание с вращением

Управление вращением элемента (rotation) становится особенно полезным для создания интерактивных интерфейсов с эффектом «крутящегося диска» или элементов, реагирующих на движение мыши.

Draggable.create(".wheel", {
  type: "rotation", // перетаскивание с вращением
  bounds: { minRotation: 0, maxRotation: 360 }, // ограничение вращения
  inertia: true,
  onDrag: function() {
    console.log("Текущий угол:", this.rotation);
  }
});

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

  • type: “rotation” позволяет пользователю вращать элемент вокруг его центра.
  • bounds: { minRotation, maxRotation } ограничивают угол вращения, предотвращая бесконечное вращение.
  • onDrag дает возможность отслеживать угол в реальном времени и синхронизировать с другими анимациями или интерфейсными эффектами.

Совмещение перемещения и вращения

GSAP поддерживает комбинацию различных типов перетаскивания. Например, можно одновременно двигать элемент по оси X и вращать его при перемещении.

Draggable.create(".interactive", {
  type: "x,rotation",
  bounds: { minX: 0, maxX: 500, minRotation: -45, maxRotation: 45 },
  inertia: true,
  onDrag: function() {
    gsap.to(".interactive", { rotation: this.rotation });
  }
});

Преимущества:

  • Обеспечивает более сложные и естественные взаимодействия.
  • Позволяет создавать динамические интерфейсы, где движение и вращение синхронизированы.
  • Можно легко комбинировать с другими GSAP анимациями, например, изменением цвета, масштабированием или изменением прозрачности.

Настройка инерции и физики движения

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

Draggable.create(".draggable", {
  type: "x,y",
  inertia: {
    resistance: 20, // сопротивление замедления
    minVelocity: 50 // минимальная скорость для инерции
  }
});

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

  • resistance — коэффициент замедления. Чем выше, тем быстрее объект останавливается.
  • minVelocity — минимальная скорость, необходимая для срабатывания инерции. Позволяет игнорировать случайные микро-смещения мыши.

Связь с Timeline и другими анимациями

Draggable прекрасно интегрируется с gsap.timeline(). Это позволяет создавать цепочки анимаций, которые реагируют на движение пользователя.

const tl = gsap.timeline({ paused: true });

tl.to(".box", { x: 300, duration: 1 })
  .to(".box", { rotation: 180, duration: 0.5 });

Draggable.create(".box", {
  type: "x",
  onDrag: function() {
    tl.progress(this.x / 300);
  }
});

Эффект: положение элемента по оси X напрямую управляет прогрессом анимации в Timeline, что открывает возможности для интерактивных презентаций и интерфейсов.

Итоговая структура для сложных интерфейсов

  1. Выбор типа движения: "x", "y", "x,y", "rotation" или их комбинации.
  2. Ограничение границ: bounds обеспечивает контроль за перемещением и вращением.
  3. Эффект инерции: делает движение плавным и естественным.
  4. Комбинация с анимациями GSAP: интеграция с Timeline или другими tween’ами.
  5. Отслеживание состояний: onDrag, onRelease, onThrowUpdate позволяют взаимодействовать с приложением в реальном времени.

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

Оглавление