Gestengesteuerte Animationen mit use-gesture

@use-gesture/react ist eine Bibliothek zur Gestenerkennung, die für die nahtlose Zusammenarbeit mit react-spring entwickelt wurde. Sie erkennt Gesten wie Drag, Pinch, Scroll, Hover, Move und Wheel und stellt einen normalisierten Gestenstatus bereit, den Sie direkt an Spring-Setter weitergeben können, um flüssige, physikbasierte Interaktionen zu erzeugen.

Der useDrag-Hook ruft bei jedem Drag-Ereignis einen Callback auf. Der Callback erhält ein Gestenstatusobjekt mit wichtigen Eigenschaften: movement (gesamte Verschiebung seit Beginn des Drags), velocity (aktuelle Geschwindigkeit), direction (1 oder -1 pro Achse), first (beim Start des Drags true), last (beim Ende des Drags true) und event (das unverarbeitete DOM-Ereignis).

Alle use-gesture-Hooks geben eine bind()-Funktion zurück. Der Aufruf von bind() gibt ein Objekt mit Props für Event-Handler zurück (onPointerDown, onTouchStart usw.), die Sie per Spread-Syntax auf das Element anwenden, das interaktiv werden soll. Dies ist die Verbindungsstelle zwischen der Gestenerkennung und Ihrem DOM-Element.

Das Standardmuster: Erstellen Sie einen Spring mit der imperativen API ([springs, api] = useSpring(...)) und verwenden Sie anschließend useDrag, um bei jedem Drag-Ereignis api.start({ x: movement[0], y: movement[1] }) aufzurufen. Der Spring folgt der Bewegung gleichmäßig und verleiht dem ansonsten starren Verfolgen des Cursors eine natürliche Physik.

Wenn ein Drag endet (last: true im Gestenstatus), lassen Sie das Element normalerweise zu seinem Ausgangspunkt zurückschnappen. Rufen Sie innerhalb einer if (last)-Prüfung api.start({ x: 0, y: 0 }) auf. react-spring animiert die Rückkehr mit Federphysik – mit einem sanften Abprallen statt einer sofortigen Zurücksetzung. Dadurch fühlt sich die Interaktion angenehm physisch an.

Der Wert velocity im Gestenstatus ermöglicht ein Wurfverhalten. Wenn der Benutzer das Element mit hoher Geschwindigkeit loslässt, können Sie es in Drag-Richtung schleudern, statt es zurückschnappen zu lassen. Prüfen Sie if (last && velocity[0] > threshold) und animieren Sie das Element anschließend zu seiner endgültigen Position außerhalb des Bildschirms. Das ist entscheidend für Interaktionen zum Wegwischen und Schließen.

Um die Drag-Bewegung auf einen Container zu beschränken, begrenzen Sie die Bewegungswerte, bevor Sie sie an den Spring übergeben: x: Math.max(-maxX, Math.min(maxX, movement[0])). Alternativ können Sie die integrierte Option bounds von use-gesture verwenden: useDrag(handler, { bounds: { left: -100, right: 100 } }). Dadurch wird der Gestenstatus automatisch begrenzt.

Eine mobile Implementierung zum Wegwischen und Schließen: Verwenden Sie useDrag, um die horizontale Bewegung zu verfolgen. Wenn der Benutzer das Element mit einer Geschwindigkeit oberhalb eines Schwellenwerts loslässt ODER es um mehr als die halbe Bildschirmbreite bewegt hat, animieren Sie die Karte aus dem sichtbaren Bereich (api.start({ x: window.innerWidth })) und entfernen sie anschließend aus der Liste. Andernfalls lassen Sie sie zur Mitte zurückschnappen.

usePinch erkennt Pinch-Gesten mit zwei Fingern auf Touchscreens sowie Ctrl+wheel auf dem Desktop. Der Gestenstatus enthält scale (die aktuelle Zoomstufe relativ zum Beginn der Pinch-Geste) und origin (den Mittelpunkt der Pinch-Geste). Verbinden Sie den Hook mit einem Spring, der die Skalierung verfolgt, um gleichmäßige, begrenzte Zoom-Interaktionen für Bilder oder Karten zu erzeugen.

useHover wird ausgelöst, wenn der Zeiger ein Element betritt oder verlässt, und stellt einen booleschen Wert active bereit. useMove verfolgt die Mausposition innerhalb eines Elements und stellt normalisierte Koordinaten bereit. Beide Hooks eignen sich für magnetische Hover-Effekte, bei denen sich Elemente subtil zum Cursor bewegen, sobald er sich nähert.

use-gesture-Hooks lassen sich kombinieren. Sie können useDrag und usePinch auf demselben Element verwenden: const bindDrag = useDrag(...); const bindPinch = usePinch(...). Wenden Sie anschließend beide Bind-Funktionen per Spread-Syntax an: ...bindDrag() ...bindPinch(). use-gesture unterscheidet automatisch zwischen den verschiedenen Gestentypen.

Was bewirkt die von use-gesture-Hooks zurückgegebene Funktion bind()?

@use-gesture/react stellt useDrag, usePinch, useScroll, useHover und useMove bereit. Jeder Hook gibt eine bind()-Funktion zurück, deren Spread-Ergebnis Gestenereignisse mit DOM-Elementen verbindet. Der Gestenstatus stellt movement, velocity, direction, first und last bereit. Kombinieren Sie diese Werte mit dem imperativen api.start() von react-spring, um interaktive Animationen auf Grundlage von Physik zu erstellen. Verwenden Sie velocity für Wurf- und Schließaktionen und bounds zum Begrenzen der Bewegung.