React Spring: useSpring-Hook

Herkömmliche CSS-Animationen verwenden eine feste Dauer: Die Animation läuft über X Millisekunden und endet dann. react-spring animiert Werte mithilfe von Federphysik – die Animation wird durch tension (Steifigkeit der Feder) und friction (Widerstand der Feder gegen Bewegung) bestimmt. Dadurch entsteht eine natürlich abbremsende, organisch wirkende Bewegung.

Der Hook useSpring({ from, to }) definiert einen animierten Wert. Sie legen die Ausgangswerte in from und die Zielwerte in to fest. useSpring gibt ein springs-Objekt zurück, dessen jeder Schlüssel ein SpringValue ist – eine animierte Version des entsprechenden Zahlen- oder Farbwerts.

Die Option config steuert das Verhalten der Feder. tension (Standardwert 170) steuert die Steifigkeit – höhere Werte schnappen schneller zurück. friction (Standardwert 26) steuert die Dämpfung – niedrigere Werte führen zu stärkerem Nachfedern. mass (Standardwert 1) fügt Trägheit hinzu. Diese drei Werte bestimmen gemeinsam den Charakter der Animation.

react-spring wird mit voreingestellten Konfigurationen geliefert, die Sie ohne Feinabstimmung verwenden können: config.default ist ausgewogen und vielseitig einsetzbar, config.gentle ist langsam und flüssig, config.wobbly federt mit geringer Reibung, config.stiff ist schnell und reagiert unmittelbar, und config.slow ist sehr allmählich. Importieren Sie sie aus react-spring.

Die von useSpring zurückgegebenen Werte sind SpringValue-Objekte und keine gewöhnlichen Zahlen. Sie können sie weder direkt in JSX rendern noch in gewöhnlichen Style-Objekten verwenden. Sie müssen auf animated.*-Komponenten angewendet werden, die wissen, wie sie Spring-Updates abonnieren und effizient auf das DOM anwenden.

Wenn Sie immediate: true an useSpring übergeben, springen die Werte sofort zu ihrem Zielwert und umgehen die Spring-Animation. Das ist beim initialen Rendern nützlich, wenn Sie in den Betriebssystemeinstellungen „Bewegungen reduzieren“ aktiviert haben oder wenn Sie die Position programmgesteuert ohne sichtbare Bewegung zurücksetzen müssen.

Sie können eine Spring-Animation umkehren, indem Sie umschalten, welche Werte sich in from und to befinden. Ein gängiges Muster besteht darin, einen booleschen toggle-Zustand zu speichern und from/to anhand dieses Zustands zu berechnen: Wenn toggle false ist, animieren Sie von 0 bis 1; wenn toggle true ist, von 1 bis 0. react-spring wechselt gleichmäßig zwischen den Zuständen.

useSpring kann ein Array mit zwei Elementen zurückgeben: const [springs, api] = useSpring(() => ({ from: { x: 0 } })). Das Objekt api ermöglicht Ihnen die programmgesteuerte Steuerung. Rufen Sie api.start({ x: 100 }) auf, um zu einem neuen Wert zu animieren, api.stop(), um die Animation einzufrieren, und api.set({ x: 50 }), um ohne Animation direkt zu einem Wert zu springen.

Verwenden Sie die deklarative Form useSpring({ from, to }), wenn die Animation von React-State abhängt, der sich auf normale Weise ändert. Verwenden Sie die imperative Form mit api.start(), wenn Sie Animationen aus Event-Handlern, Gesten oder asynchronen Vorgängen herauslösen müssen, ohne dadurch React-Neu-Renderings zu verursachen.

useSpring akzeptiert Lifecycle-Callbacks in seiner Konfiguration. onStart wird ausgelöst, wenn der Spring mit der Animation beginnt. onChange wird bei jedem Frame mit dem aktuellen Wert ausgelöst – nützlich für Seiteneffekte, die die Position verfolgen. onRest wird ausgelöst, wenn der Spring seinen finalen Wert erreicht hat, und signalisiert damit, dass die Animation abgeschlossen ist.

In der deklarativen Form führt useSpring die Animation automatisch erneut aus, wenn sich die an ihn übergebenen Werte ändern. Beispielsweise animiert useSpring({ opacity: isVisible ? 1 : 0 }) die Opazität jedes Mal, wenn sich isVisible ändert. Dies ist die einfachste Möglichkeit, Spring-Animationen an den Zustand einer Komponente zu binden.

react-spring animiert physikbasiert: tension (Steifigkeit), friction (Dämpfung) und mass bestimmen die Bewegung. useSpring({ from, to }) gibt SpringValue-Objekte zurück, die auf animated.*-Komponenten angewendet werden. Voreingestellte Konfigurationen (gentle, wobbly, stiff, slow) decken häufige Anwendungsfälle ab. Die imperative API [springs, api] ermöglicht die programmgesteuerte Steuerung über api.start(), api.stop() und api.set(). onRest wird ausgelöst, wenn die Animation zur Ruhe kommt.