Animations pilotées par les gestes avec use-gesture

@use-gesture/react est une bibliothèque de reconnaissance des gestes conçue pour fonctionner parfaitement avec react-spring. Elle reconnaît les gestes de glissement, de pincement, de défilement, de survol, de déplacement et de molette, en fournissant un état de geste normalisé que vous transmettez directement aux fonctions de mise à jour des ressorts pour obtenir des interactions fluides fondées sur la physique.

La fonction useDrag exécute une fonction de rappel à chaque événement de glissement. La fonction de rappel reçoit un objet d'état du geste contenant plusieurs propriétés importantes : déplacement (déplacement total depuis le début du glissement), vitesse (vitesse actuelle), direction (1 ou -1 sur chaque axe), premier (vrai au début du glissement), dernier (vrai à la fin du glissement) et événement (l'événement DOM brut).

Toutes les fonctions de use-gesture renvoient une fonction bind(). L'appel de bind() renvoie un objet de propriétés de gestionnaires d'événements (onPointerDown, onTouchStart, etc.) que vous appliquez à l'élément que vous souhaitez rendre interactif. C'est le point de liaison entre le dispositif de reconnaissance des gestes et votre élément DOM.

Le modèle standard consiste à créer un ressort avec l'API impérative ([springs, api] = useSpring(...)), puis à utiliser useDrag pour appeler api.start({ x: movement[0], y: movement[1] }) à chaque événement de glissement. Le ressort suit progressivement le déplacement, ce qui ajoute une physique naturelle à un suivi du curseur qui serait autrement rigide.

Lorsqu'un glissement se termine (last: true dans l'état du geste), vous ramenez généralement l'élément à son origine. Appelez api.start({ x: 0, y: 0 }) dans une vérification if (last). react-spring effectue le retour avec la physique d'un ressort — un léger rebond plutôt qu'une réinitialisation instantanée — ce qui donne à l'interaction une sensation physique satisfaisante.

La valeur velocity dans l'état du geste permet de créer un comportement de projection. Lorsque l'utilisateur relâche l'élément avec une vitesse élevée, vous pouvez le lancer dans la direction du glissement au lieu de le ramener à sa position initiale. Vérifiez if (last && velocity[0] > threshold), puis animez l'élément jusqu'à sa position finale hors écran. Cette technique est essentielle pour les interactions de balayage permettant de fermer un élément.

Pour limiter le déplacement dans un conteneur, restreignez les valeurs de déplacement avant de les transmettre au ressort : x: Math.max(-maxX, Math.min(maxX, movement[0])). Vous pouvez également utiliser l'option bounds intégrée à use-gesture : useDrag(handler, { bounds: { left: -100, right: 100 } }) afin de restreindre automatiquement l'état du geste.

Voici une implémentation mobile permettant de fermer un élément par balayage : utilisez useDrag pour suivre le déplacement horizontal. Si l'utilisateur relâche l'élément avec une vitesse supérieure à un seuil OR s'il l'a déplacé de plus de la moitié de la largeur de l'écran, animez la carte hors écran (api.start({ x: window.innerWidth })), puis supprimez-la de la liste. Sinon, ramenez-la au centre.

usePinch reconnaît les gestes de pincement à deux doigts sur les écrans tactiles ainsi que les mouvements de molette avec Ctrl sur ordinateur. L'état du geste comprend scale (niveau de zoom actuel par rapport au début du pincement) et origin (point central du pincement). Reliez un ressort qui suit l'échelle pour créer des interactions de zoom fluides et limitées sur des images ou des cartes.

useHover s'exécute lorsque le pointeur entre dans un élément ou le quitte, et fournit une valeur booléenne active. useMove suit la position de la souris dans un élément et fournit des coordonnées normalisées. Ces deux fonctions sont utiles pour créer des effets de survol magnétique, où les éléments se déplacent légèrement vers le curseur à mesure qu'il s'approche.

Les fonctions de use-gesture peuvent être composées. Vous pouvez utiliser useDrag et usePinch sur le même élément : const bindDrag = useDrag(...); const bindPinch = usePinch(...), puis appliquer les deux fonctions bind : ...bindDrag() ...bindPinch(). use-gesture gère automatiquement la distinction entre les types de gestes.

@use-gesture/react fournit useDrag, usePinch, useScroll, useHover et useMove. Chaque fonction renvoie une fonction bind() dont le résultat appliqué relie les événements de geste aux éléments DOM. L'état du geste fournit le déplacement, la vitesse, la direction, les valeurs premier et dernier. Combinez ces fonctions avec l'appel impératif api.start() de react-spring pour créer des animations interactives fondées sur la physique. Utilisez la vitesse pour les projections et les fermetures, et les limites pour restreindre les déplacements.