Animazioni basate sui gesti con use-gesture

@use-gesture/react è una libreria per il riconoscimento dei gesti progettata per funzionare senza problemi con react-spring. Riconosce i gesti di trascinamento, pizzicamento, scorrimento, passaggio del puntatore, movimento e rotellina, fornendo uno stato del gesto normalizzato che può essere passato direttamente ai setter delle spring per ottenere interazioni fluide basate sulla fisica.

L'hook useDrag esegue un callback a ogni evento di trascinamento. Il callback riceve un oggetto con lo stato del gesto e alcune proprietà principali: movement (spostamento totale dall'inizio del trascinamento), velocity (velocità corrente), direction (1 o -1 per ciascun asse), first (true all'inizio del trascinamento), last (true al termine del trascinamento) ed event (l'evento DOM grezzo).

Tutti gli hook di use-gesture restituiscono una funzione bind(). La chiamata a bind() restituisce un oggetto di proprietà per i gestori degli eventi (onPointerDown, onTouchStart e così via), che vengono distribuite sull'elemento che si desidera rendere interattivo. Questo è il punto di collegamento tra il riconoscitore dei gesti e l'elemento DOM.

Il modello standard consiste nel creare una spring con l'API imperativa ([springs, api] = useSpring(...)) e poi usare useDrag per chiamare api.start({ x: movement[0], y: movement[1] }) a ogni evento di trascinamento. La spring segue gradualmente il movimento di trascinamento, aggiungendo una fisica naturale a quello che altrimenti sarebbe un rigido tracciamento del cursore.

Quando termina un trascinamento (last: true nello stato del gesto), in genere si riporta l'elemento alla posizione di origine. Si chiama api.start({ x: 0, y: 0 }) all'interno di un controllo if (last). react-spring anima il ritorno con la fisica delle spring — un leggero rimbalzo anziché un ripristino istantaneo — dando all'interazione una piacevole sensazione fisica.

Il valore velocity nello stato del gesto permette di implementare il comportamento di lancio. Quando l'utente rilascia l'elemento con una velocità elevata, è possibile lanciarlo nella direzione del trascinamento invece di riportarlo indietro. Si controlli if (last && velocity[0] > threshold) e poi si animi l'elemento fino alla posizione finale fuori dallo schermo. Questo è essenziale per le interazioni swipe-to-dismiss.

Per limitare il movimento di trascinamento all'interno di un contenitore, si applica il clamping ai valori di movimento prima di passarli alla spring: x: Math.max(-maxX, Math.min(maxX, movement[0])). In alternativa, è possibile usare l'opzione bounds integrata in use-gesture: useDrag(handler, { bounds: { left: -100, right: 100 } }) per applicare automaticamente il clamping allo stato del gesto.

Un'implementazione mobile dello swipe-to-dismiss consiste nell'usare useDrag per tracciare il movimento orizzontale. Se l'utente rilascia l'elemento con una velocità superiore a una soglia OPPURE lo ha spostato per più della metà della larghezza dello schermo, si anima la scheda portandola fuori dallo schermo (api.start({ x: window.innerWidth })) e poi la si rimuove dall'elenco. In caso contrario, la si riporta al centro.

usePinch riconosce i gesti di pizzicamento a due dita sui touchscreen e l'uso di Ctrl+rotellina sui computer desktop. Lo stato del gesto include scale (livello di zoom corrente relativo all'inizio del pizzicamento) e origin (punto centrale del pizzicamento). Collegandolo a una spring che controlla la scala, è possibile creare interazioni di zoom fluide e limitate su immagini o mappe.

useHover si attiva quando il puntatore entra o esce da un elemento e fornisce un valore booleano active. useMove traccia la posizione del mouse all'interno di un elemento e fornisce coordinate normalizzate. Entrambi sono utili per creare effetti hover magnetici, in cui gli elementi si spostano leggermente verso il cursore quando questo si avvicina.

Gli hook di use-gesture possono essere combinati. È possibile usare useDrag e usePinch sullo stesso elemento: const bindDrag = useDrag(...); const bindPinch = usePinch(...), quindi distribuire entrambe le funzioni bind: ...bindDrag() ...bindPinch(). use-gesture distingue automaticamente i diversi tipi di gesto.

@use-gesture/react fornisce useDrag, usePinch, useScroll, useHover e useMove. Ogni hook restituisce una funzione bind(), il cui risultato distribuito collega gli eventi dei gesti agli elementi DOM. Lo stato del gesto fornisce movement, velocity, direction, first e last. La combinazione con la funzione imperativa api.start() di react-spring permette di creare animazioni interattive basate sulla fisica. Si utilizzi velocity per i lanci e le chiusure e bounds per limitare il movimento.