Animaciones controladas por gestos con use-gesture

@use-gesture/react es una biblioteca de reconocimiento de gestos diseñada para funcionar de forma fluida con react-spring. Reconoce gestos de arrastre, pellizco, desplazamiento, hover, movimiento y rueda, y proporciona un estado del gesto normalizado que puede pasar directamente a los setters de spring para crear interacciones fluidas basadas en física.

El hook useDrag ejecuta un callback en cada evento de arrastre. El callback recibe un objeto de estado del gesto con varias propiedades clave: movement (desplazamiento total desde el inicio del arrastre), velocity (velocidad actual), direction (1 o -1 por eje), first (true al iniciar el arrastre), last (true al finalizarlo) y event (el evento DOM sin procesar).

Todos los hooks de use-gesture devuelven una función bind(). Al llamar a bind(), se devuelve un objeto con propiedades de controladores de eventos (onPointerDown, onTouchStart, etc.) que puede extender sobre el elemento que desea hacer interactivo. Este es el punto de conexión entre el reconocedor de gestos y su elemento DOM.

El patrón estándar consiste en crear un spring con la API imperativa ([springs, api] = useSpring(...)) y, después, utilizar useDrag para llamar a api.start({ x: movement[0], y: movement[1] }) en cada evento de arrastre. El spring sigue suavemente el movimiento del arrastre y añade una física natural a lo que, de otro modo, sería un seguimiento rígido del cursor.

Cuando termina un arrastre (last: true en el estado del gesto), normalmente debe devolver el elemento a su origen. Llame a api.start({ x: 0, y: 0 }) dentro de una comprobación if (last). react-spring anima el regreso con física de spring —un rebote suave en lugar de un restablecimiento instantáneo—, lo que proporciona una sensación física satisfactoria a la interacción.

El valor velocity del estado del gesto permite implementar un comportamiento de lanzamiento. Cuando el usuario suelta el elemento con mucha velocidad, puede lanzarlo en la dirección del arrastre en lugar de devolverlo a su posición inicial. Compruebe if (last && velocity[0] > threshold) y, después, anime el elemento hasta su posición final fuera de la pantalla. Esto es fundamental para las interacciones de deslizar para descartar.

Para restringir el movimiento de arrastre dentro de un contenedor, acote los valores del movimiento antes de pasarlos al spring: x: Math.max(-maxX, Math.min(maxX, movement[0])). Como alternativa, utilice la opción integrada bounds de use-gesture: useDrag(handler, { bounds: { left: -100, right: 100 } }) para acotar automáticamente el estado del gesto.

Para implementar deslizar para descartar en dispositivos móviles, utilice useDrag para seguir el movimiento horizontal. Si el usuario suelta el elemento con una velocidad superior al umbral O lo ha desplazado más de la mitad del ancho de la pantalla, anime la tarjeta fuera de la pantalla (api.start({ x: window.innerWidth })) y, después, elimínela de la lista. De lo contrario, devuélvala al centro.

usePinch reconoce gestos de pellizco con dos dedos en pantallas táctiles y Ctrl+wheel en equipos de escritorio. El estado del gesto incluye scale (nivel de zoom actual relativo al inicio del pellizco) y origin (punto central del pellizco). Conecte estos valores a un spring que siga la escala para crear interacciones de zoom fluidas y limitadas en imágenes o mapas.

useHover se activa cuando el puntero entra o sale de un elemento y proporciona un booleano active. useMove sigue la posición del ratón dentro de un elemento y proporciona coordenadas normalizadas. Ambos son útiles para crear efectos de hover magnéticos, en los que los elementos se desplazan sutilmente hacia el cursor a medida que este se acerca.

Los hooks de use-gesture se pueden combinar. Puede utilizar useDrag y usePinch en el mismo elemento: const bindDrag = useDrag(...); const bindPinch = usePinch(...); después, extienda ambas funciones bind: ...bindDrag() ...bindPinch(). use-gesture distingue automáticamente entre los distintos tipos de gestos.

¿Qué hace la función bind() que devuelven los hooks de use-gesture?

@use-gesture/react proporciona useDrag, usePinch, useScroll, useHover y useMove. Cada hook devuelve una función bind() cuyo resultado extendido conecta los eventos de gestos con los elementos DOM. El estado del gesto proporciona movement, velocity, direction, first y last. Combine estos hooks con la función imperativa api.start() de react-spring para crear animaciones interactivas basadas en física. Utilice velocity para los lanzamientos y descartes, y bounds para acotar el movimiento.