Animacje sterowane gestami z use-gesture

@use-gesture/react to biblioteka rozpoznawania gestów zaprojektowana do bezproblemowej współpracy z react-spring. Rozpoznaje gesty przeciągania, szczypania, przewijania, najechania kursorem, ruchu i kółka myszy, udostępniając znormalizowany stan gestu, który można bezpośrednio przekazywać do setterów sprężyny w celu tworzenia płynnych interakcji opartych na fizyce.

Hook useDrag wywołuje callback przy każdym zdarzeniu przeciągania. Callback otrzymuje obiekt stanu gestu z najważniejszymi właściwościami: movement (łączne przesunięcie od rozpoczęcia przeciągania), velocity (bieżąca prędkość), direction (1 lub -1 dla każdej osi), first (ma wartość true na początku przeciągania), last (ma wartość true na końcu przeciągania) oraz event (surowe zdarzenie DOM).

Wszystkie hooki use-gesture zwracają funkcję bind(). Wywołanie bind() zwraca obiekt właściwości obsługi zdarzeń (onPointerDown, onTouchStart itd.), które należy rozpropagować na elemencie, który ma stać się interaktywny. To punkt połączenia między mechanizmem rozpoznawania gestów a elementem DOM.

Standardowy wzorzec polega na utworzeniu sprężyny za pomocą imperatywnego API ([springs, api] = useSpring(...)), a następnie użyciu useDrag do wywoływania api.start({ x: movement[0], y: movement[1] }) przy każdym zdarzeniu przeciągania. Sprężyna płynnie podąża za ruchem przeciągania, dodając naturalną fizykę do interakcji, która w przeciwnym razie sprowadzałaby się do sztywnego śledzenia kursora.

Po zakończeniu przeciągania (last: true w stanie gestu) zazwyczaj należy przywrócić element do pozycji początkowej. Należy wywołać api.start({ x: 0, y: 0 }) wewnątrz instrukcji if (last). react-spring animuje powrót z użyciem fizyki sprężyny — zapewnia delikatne odbicie zamiast natychmiastowego resetu, dzięki czemu interakcja daje satysfakcjonujące, fizyczne odczucie.

Wartość velocity w stanie gestu umożliwia implementację efektu wyrzucenia. Gdy użytkownik zwolni element z dużą prędkością, można wyrzucić go w kierunku przeciągania zamiast przywracać go do pozycji początkowej. Należy sprawdzić if (last && velocity[0] > threshold), a następnie animować element do jego końcowej pozycji poza ekranem. Jest to niezbędne w interakcjach zamykania przez przesunięcie.

Aby ograniczyć ruch przeciągania do obszaru kontenera, należy ograniczyć wartości przesunięcia przed przekazaniem ich do sprężyny: x: Math.max(-maxX, Math.min(maxX, movement[0])). Można też użyć wbudowanej w use-gesture opcji bounds: useDrag(handler, { bounds: { left: -100, right: 100 } }), aby automatycznie ograniczać stan gestu.

Mobilna implementacja zamykania przez przesunięcie polega na użyciu useDrag do śledzenia ruchu poziomego. Jeśli użytkownik zwolni element z prędkością powyżej ustalonego progu LUB przesunie go o więcej niż połowę szerokości ekranu, należy animować kartę poza ekran (api.start({ x: window.innerWidth })), a następnie usunąć ją z listy. W przeciwnym razie należy przywrócić ją na środek.

usePinch rozpoznaje gesty szczypania dwoma palcami na ekranach dotykowych oraz Ctrl+wheel na komputerach. Stan gestu zawiera scale (bieżący poziom powiększenia względem początku szczypania) i origin (punkt centralny gestu szczypania). Połączenie go ze sprężyną śledzącą wartość scale pozwala tworzyć płynne, ograniczone interakcje powiększania obrazów lub map.

useHover wywołuje się, gdy wskaźnik wchodzi na element lub go opuszcza, udostępniając wartość logiczną active. useMove śledzi położenie myszy wewnątrz elementu, udostępniając znormalizowane współrzędne. Oba hooki są przydatne przy tworzeniu magnetycznych efektów najechania, w których elementy delikatnie przesuwają się w stronę kursora, gdy ten się zbliża.

Hooki use-gesture można ze sobą łączyć. Na tym samym elemencie można użyć useDrag i usePinch: const bindDrag = useDrag(...); const bindPinch = usePinch(...), a następnie rozpropagować obie funkcje bind: ...bindDrag() ...bindPinch(). use-gesture automatycznie rozstrzyga, z którym typem gestu ma do czynienia.

Co robi funkcja bind() zwracana przez hooki use-gesture?

@use-gesture/react udostępnia useDrag, usePinch, useScroll, useHover i useMove. Każdy hook zwraca funkcję bind(), której rozpropagowanie podłącza zdarzenia gestów do elementów DOM. Stan gestu udostępnia wartości movement, velocity, direction, first i last. Połączenie z imperatywną funkcją api.start() biblioteki react-spring pozwala tworzyć interaktywne animacje oparte na fizyce. Wartości velocity można użyć do wyrzucania elementów i zamykania przez przesunięcie, a bounds — do ograniczania ruchu.