Animierte Komponenten und Style-Interpolation

react-spring stellt animierte Versionen aller HTML-Elemente bereit: animated.div, animated.span, animated.img, animated.button und so weiter. Diese sind direkte Ersatzkomponenten für ihre nativen Gegenstücke, mit einem entscheidenden Unterschied: Sie können SpringValue-Objekte als Style-Props akzeptieren.

Gewöhnliche React-Elemente erhalten style als einfaches Objekt mit statischen Werten. SpringValues sind spezielle Objekte, die bei jedem Animationsframe aktualisiert werden, ohne Reacts Re-Render-Zyklus zu durchlaufen. Nur animated.*-Komponenten wissen, wie sie Updates von SpringValue abonnieren und den DOM-Style direkt ändern können, wodurch React vollständig umgangen wird und maximale Performance erreicht wird.

Wenden Sie Spring-Werte direkt als CSS-Style-Props auf animierten Komponenten an. Zum Beispiel: style={{ opacity: opacity, transform: transform }}, wobei opacity und transform SpringValues aus useSpring sind. animated.div liest diese Werte bei jedem RAF-Tick (requestAnimationFrame) aus und wendet sie auf den DOM-Knoten an.

SpringValues verfügen über eine .to()-Methode, mit der sich ihre Ausgabe transformieren lässt. Ein häufiger Anwendungsfall ist die Umwandlung eines numerischen Spring-Werts in einen CSS-String: x.to(v => "translateX(" + v + "px)"). Die Funktion erhält den aktuellen numerischen Wert und gibt die transformierte Ausgabe zurück, die als Style angewendet wird.

Die .to()-Methode akzeptiert außerdem Array-Eingaben zur Bereichszuordnung: x.to([0, 1], ["#ff0000", "#00ff00"]) ordnet den Spring-Wert aus dem Bereich [0, 1] dem Farbbereich von Rot bis Grün zu. So interpolieren Sie numerische Springs zu Farben, Strings oder beliebigen Werten, die nicht als einfache Zahl dargestellt werden können.

Wenn ein Spring mehrere Werte gleichzeitig verfolgt, können Sie sie gemeinsam interpolieren. Bei einem Spring, der { x, y } verfolgt, können Sie schreiben: x.to((xVal, yVal) => "translate(" + xVal + "px," + yVal + "px)"). Der .to()-Callback erhält alle Werte in der Reihenfolge, in der sie in der Spring-Konfiguration vorkommen.

Sie können eigene Komponenten mit animated() umschließen: const AnimatedCard = animated(Card). Die umschlossene Komponente muss eine style-Prop akzeptieren und an ein DOM-Element weiterleiten. Nun kann AnimatedCard in seiner style-Prop SpringValues empfangen, genau wie animated.div.

Komplexe Animationen kombinieren häufig mehrere Springs. Eine Eingangsanimation kann beispielsweise einen Spring für die Opazität und einen weiteren für die vertikale Position verwenden. Sie können beide auf dasselbe animated.div anwenden: style={{ opacity: opacitySpring.opacity, transform: positionSpring.y.to(y => "translateY(" + y + "px)") }}.

Das wichtigste Performance-Merkmal von react-spring besteht darin, dass Updates animierter Werte Reacts Reconciler umgehen. Während ein Spring animiert wird, rendert React die Komponente NICHT bei jedem Frame neu. Stattdessen aktualisiert die animated.*-Komponente die Style-Eigenschaft des DOM-Knotens in jedem requestAnimationFrame-Callback direkt, wodurch Animationen mit 60 fps ohne den Overhead von React möglich werden.

Häufige Animationsmuster mit Interpolation: beim Mounten mit opacity.to([0, 1], [0, 1]) einblenden, beim Hover mit scale.to(s => "scale(" + s + ")") vergrößern und beim Umschalten mit rotation.to(r => "rotate(" + r + "deg)") drehen. Durch das Verketten dieser Transformationen entstehen kombinierte Effekte.

Standardmäßig kann .to() mit Bereichsarrays über den definierten Bereich hinaus extrapolieren. Sie können dies mit der Option extrapolate steuern: x.to({ range: [0, 1], output: [0, 100], extrapolate: "clamp" }) verhindert, dass die Ausgabe unter 0 oder über 100 liegt, selbst wenn der Spring überschwingt. Dies ist nützlich für Fortschrittsbalken und begrenzte Animationen.

Warum müssen Sie beim Anwenden von Spring-Werten animated.div statt eines einfachen div verwenden?

animated.div, animated.span und animated(CustomComponent) sind direkte Ersatzkomponenten, die SpringValues als Style-Props akzeptieren. Die .to()-Methode interpoliert Spring-Werte in CSS-Strings, Farbbereiche oder beliebige Ausgabeformate. Mehrere Springs lassen sich auf einem Element problemlos kombinieren. Der entscheidende Performance-Vorteil: Spring-Updates umgehen React-Neu-Renderings, indem sie DOM-Styles direkt in RAF-Callbacks ändern.