ThrowProps для бросков

ThrowProps — это мощный плагин для библиотеки GSAP, предназначенный для создания естественных анимаций с эффектом инерции и «бросков». Он позволяет объектам продолжать движение после завершения пользовательского взаимодействия, создавая реалистичное ощущение физики без сложных расчетов вручную.

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

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

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

import { gsap } from "gsap";
import { ThrowPropsPlugin } from "gsap/ThrowPropsPlugin";

gsap.registerPlugin(ThrowPropsPlugin);

После регистрации плагина можно создавать анимации с «бросками».

Основные методы и свойства

1. throwProps()

Метод throwProps используется для запуска анимации с инерцией. Он принимает объект с параметрами:

gsap.to(element, {
  duration: 2,
  throwProps: {
    x: { velocity: 500, resistance: 200 },
    y: { velocity: 300 }
  }
});
  • velocity — начальная скорость объекта (пиксели/секунда).
  • resistance — коэффициент сопротивления, замедляющий движение. Чем выше значение, тем быстрее объект останавливается.
  • Можно задавать отдельно для каждой оси (x, y) или для любых свойств, которые поддерживают числовое изменение.

2. track() и getVelocity()

Метод track() используется для отслеживания свойств объекта во время взаимодействия (например, при перетаскивании мышью или касанием):

ThrowPropsPlugin.track(element, "x,y");

После отслеживания можно получить текущую скорость объекта через getVelocity():

let velocityX = ThrowPropsPlugin.getVelocity(element, "x");

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

Интеграция с Draggable

Чаще всего ThrowProps используется совместно с плагином Draggable для создания плавного и реалистичного перетаскивания элементов:

import { Draggable } from "gsap/Draggable";

Draggable.create(element, {
  type: "x,y",
  throwProps: true
});

Ключевой момент: установка throwProps: true позволяет Draggable автоматически применять плагин ThrowProps и рассчитывать инерцию при отпускании объекта. Можно также задавать параметры сопротивления и ограничения движения:

Draggable.create(element, {
  type: "x,y",
  edgeResistance: 0.8,
  throwProps: {
    resistance: 300,
    maxVelocity: 1000
  }
});
  • edgeResistance — ограничивает движение объекта у краев контейнера.
  • maxVelocity — максимальная скорость, с которой объект может продолжить движение после броска.

Ограничение движения и bounds

ThrowProps поддерживает ограничение движения объекта в определённых пределах:

gsap.to(element, {
  duration: 2,
  throwProps: {
    x: { velocity: 600, resistance: 200, max: 500, min: 0 }
  }
});
  • min и max ограничивают перемещение объекта.
  • При достижении границ объект плавно останавливается, создавая эффект столкновения.

Комбинация с другими анимациями

ThrowProps можно совмещать с классическими GSAP-анимациями. Например, сначала элемент анимируется к определенной позиции, а затем продолжает движение с инерцией:

gsap.to(element, { x: 300, duration: 1 });
gsap.to(element, {
  throwProps: {
    x: { velocity: 500, resistance: 250 }
  }
});

Такой подход позволяет создавать сложные цепочки анимаций с естественными эффектами физики.

Полезные советы

  • Слежение за свойствами: всегда используйте ThrowPropsPlugin.track() для тех свойств, которые будут подвержены инерции. Без отслеживания начальная скорость не будет корректно вычислена.
  • Плавная остановка: регулировка resistance позволяет управлять длительностью замедления. Малое значение создаёт долгую инерцию, большое — быстрое торможение.
  • Совместимость с Draggable: в большинстве случаев для интерактивных интерфейсов комбинация Draggable + ThrowProps даёт наилучшие результаты.
  • Использование maxVelocity: полезно для ограничения анимации в интерфейсах с высокой чувствительностью движения.

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

Оглавление