Geststyrda animationer med use-gesture

@use-gesture/react är ett bibliotek för gestigenkänning som är utformat för att fungera sömlöst med react-spring. Det känner igen gesterna drag, pinch, scroll, hover, move och wheel, och tillhandahåller ett normaliserat gesttillstånd som kan kopplas direkt till spring-setters för följsamma, fysikbaserade interaktioner.

Hooken useDrag utlöser en callback vid varje draghändelse. Callbacken tar emot ett gesttillståndsobjekt med följande nyckelegenskaper: movement (den totala förflyttningen från dragningens början), velocity (den aktuella hastigheten), direction (1 eller -1 per axel), first (true när dragningen börjar), last (true när dragningen slutar) och event (den råa DOM-händelsen).

Alla use-gesture-hookar returnerar en bind()-funktion. När bind() anropas returneras ett objekt med props för händelsehanterare (onPointerDown, onTouchStart med flera) som sprids över det element som ska göras interaktivt. Detta är kopplingspunkten mellan gesttolken och DOM-elementet.

Standardmönstret är att skapa en spring med det imperativa API:et ([springs, api] = useSpring(...)) och sedan använda useDrag för att anropa api.start({ x: movement[0], y: movement[1] }) vid varje draghändelse. Spring-animationen följer dragförflyttningen mjukt och ger en naturlig fysikbaserad känsla åt det som annars skulle vara stel pekarspårning.

När en dragning avslutas (last: true i gesttillståndet) återställer man vanligtvis elementet till dess ursprungliga position. Anropa api.start({ x: 0, y: 0 }) inuti en kontroll med if (last). react-spring animerar återgången med springfysik – en mjuk studs i stället för en omedelbar återställning – vilket ger interaktionen en tillfredsställande fysisk känsla.

Värdet velocity i gesttillståndet möjliggör kastbeteenden. När användaren släpper med hög hastighet kan elementet slungas i dragriktningen i stället för att studsa tillbaka. Kontrollera if (last && velocity[0] > threshold) och animera sedan elementet till dess slutliga position utanför skärmen. Detta är viktigt för interaktioner av typen svep-för-att-stänga.

För att begränsa dragförflyttningen inom en behållare kan movement-värdena clampas innan de skickas till spring: x: Math.max(-maxX, Math.min(maxX, movement[0])). Alternativt kan det inbyggda alternativet bounds i use-gesture användas: useDrag(handler, { bounds: { left: -100, right: 100 } }) för att automatiskt clampa gesttillståndet.

En mobil implementering av svep-för-att-stänga: använd useDrag för att spåra horisontell förflyttning. Om användaren släpper med en velocity över en tröskel ELLER har förflyttat sig mer än halva skärmbredden, animeras kortet utanför skärmen (api.start({ x: window.innerWidth })) och tas sedan bort från listan. Annars återställs det till mitten.

usePinch känner igen tvåfingersgester på pekskärmar samt Ctrl+wheel på datorer. Gesttillståndet innehåller scale (den aktuella zoomnivån relativt gestens början) och origin (gestens mittpunkt). Koppla till en spring som följer scale för att skapa mjuka, begränsade zoominteraktioner i bilder eller kartor.

useHover utlöses när pekaren går in i eller lämnar ett element och tillhandahåller en boolesk active-egenskap. useMove spårar musens position inom ett element och tillhandahåller normaliserade koordinater. Båda är användbara för magnetiska hover-effekter där element förskjuts subtilt mot pekaren när den närmar sig.

use-gesture-hookar kan kombineras. Du kan använda både useDrag och usePinch på samma element: const bindDrag = useDrag(...); const bindPinch = usePinch(...) och sedan sprida båda bind-funktionerna: ...bindDrag() ...bindPinch(). use-gesture skiljer automatiskt mellan olika gesttyper.

@use-gesture/react tillhandahåller useDrag, usePinch, useScroll, useHover och useMove. Varje hook returnerar en bind()-funktion vars spridda resultat kopplar gesthändelser till DOM-element. Gesttillståndet tillhandahåller movement, velocity, direction, first och last. Kombinera detta med react-springs imperativa api.start() för interaktiva animationer baserade på fysik. Använd velocity för kast och avvisning samt bounds för att clampa förflyttningen.