Анимации на основе жестов с use-gesture

@use-gesture/react — это библиотека распознавания жестов, созданная для бесшовной работы с react-spring. Она распознаёт перетаскивание, масштабирование двумя пальцами, прокрутку, наведение, перемещение и прокрутку колесом, предоставляя нормализованное состояние жеста, которое можно напрямую передавать в функции установки значений пружины для плавного взаимодействия на основе физической модели.

Хук useDrag вызывает функцию обратного вызова при каждом событии перетаскивания. Функция обратного вызова получает объект состояния жеста с основными свойствами: movement (общее смещение от начала перетаскивания), velocity (текущая скорость), direction (1 или -1 по каждой оси), first (имеет значение true в начале перетаскивания), last (имеет значение true в конце перетаскивания) и event (исходное событие DOM).

Все хуки use-gesture возвращают функцию bind(). Вызов bind() возвращает объект свойств обработчиков событий (onPointerDown, onTouchStart и т. д.), который вы передаёте нужному интерактивному элементу с помощью оператора разворота. Это связующее звено между распознавателем жестов и вашим элементом DOM.

Стандартный подход: создайте пружину с помощью императивного API ([springs, api] = useSpring(...)), а затем используйте useDrag, чтобы при каждом событии перетаскивания вызывать api.start({ x: movement[0], y: movement[1] }). Пружина плавно следует за перемещением, добавляя естественную физику взаимодействию, которое в противном случае сводилось бы к жёсткому отслеживанию курсора.

Когда перетаскивание заканчивается (last: true в состоянии жеста), обычно возвращают элемент в исходное положение. Вызовите api.start({ x: 0, y: 0 }) внутри проверки if (last). react-spring выполнит возврат с помощью пружинной физики — с мягким отскоком вместо мгновенного сброса, — благодаря чему взаимодействие ощущается естественным и приятным.

Значение velocity в состоянии жеста позволяет реализовать бросок элемента. Когда пользователь отпускает его с высокой скоростью, можно запустить элемент в направлении перетаскивания вместо возврата назад. Проверьте if (last && velocity[0] > threshold), а затем анимируйте элемент до конечного положения за пределами экрана. Это необходимо для взаимодействий со смахиванием для закрытия.

Чтобы ограничить перемещение внутри контейнера, ограничьте значения перемещения перед передачей их пружине: x: Math.max(-maxX, Math.min(maxX, movement[0])). Также можно использовать встроенную опцию bounds библиотеки use-gesture: useDrag(handler, { bounds: { left: -100, right: 100 } }), чтобы автоматически ограничивать состояние жеста.

Реализация смахивания для закрытия на мобильном устройстве: используйте useDrag для отслеживания горизонтального перемещения. Если пользователь отпустил элемент со скоростью выше порога OR переместил его больше чем на половину ширины экрана, анимируйте карточку за пределы экрана (api.start({ x: window.innerWidth })), а затем удалите её из списка. В противном случае верните её в центр.

usePinch распознаёт жесты масштабирования двумя пальцами на сенсорных экранах и прокрутку колесом с зажатой клавишей Ctrl на компьютере. Состояние жеста включает scale (текущий уровень масштаба относительно начала жеста) и origin (центральную точку жеста). Подключите пружину, отслеживающую масштаб, чтобы создать плавное масштабирование с ограничениями для изображений или карт.

useHover срабатывает, когда указатель входит в элемент или покидает его, и предоставляет логическое значение active. useMove отслеживает положение мыши внутри элемента и предоставляет нормализованные координаты. Оба хука полезны для создания эффектов магнитного наведения, при которых элементы слегка смещаются в сторону приближающегося курсора.

Хуки use-gesture можно сочетать. Вы можете использовать useDrag и usePinch для одного элемента: const bindDrag = useDrag(...); const bindPinch = usePinch(...), а затем передать обе функции bind с помощью оператора разворота: ...bindDrag() ...bindPinch(). use-gesture автоматически различает типы жестов.

@use-gesture/react предоставляет useDrag, usePinch, useScroll, useHover и useMove. Каждый хук возвращает функцию bind(), результат разворота которой связывает события жестов с элементами DOM. Состояние жеста предоставляет перемещение, скорость, направление, first и last. Сочетайте эти хуки с императивной функцией api.start() из react-spring для создания интерактивных анимаций на основе физической модели. Используйте скорость для резкого запуска и закрытия, а границы — для ограничения перемещения.