useTrail und useChain für Sequenzen

useTrail(count, config) erstellt count Springs, die mit einer konfigurierbaren Verzögerung nacheinander animiert werden. Wenn der Trail beginnt, wird das erste Element sofort animiert, das zweite beginnt kurz danach, das dritte wiederum danach und so weiter – dadurch entsteht ein Auffächerungs- oder Kaskadeneffekt.

useTrail gibt ein Array von Spring-Objekten zurück, eines für jedes Element im Trail. Jeder Spring hat dieselbe Struktur (dieselben Schlüssel), beginnt seine Animation jedoch zu einem anderen Zeitpunkt. Sie durchlaufen gleichzeitig sowohl das Trail-Array als auch Ihr Items-Array, um jedes animierte Element mit dem zugehörigen Spring zu rendern.

Rendern Sie eine Liste mit Trail-Effekt, indem Sie das Trail-Array durchlaufen: trail.map((spring, i) => React.createElement(animated.div, { style: spring, key: items[i].id }, items[i].content)). Jedes animated.div erhält sein eigenes Spring-Objekt, sodass die Elemente nacheinander animiert werden. Die Springs werden in Indexreihenfolge ausgeführt: 0, 1, 2, 3 ...

useTrail unterstützt ein Umschaltmuster für die Vorwärts- und Rückwärtsanimation. Übergeben Sie einen booleschen Zustand open, um die Richtung zu steuern: Wenn open true ist, animiert der Trail vom verborgenen zum sichtbaren Zustand; wenn open false ist, kehrt er vom sichtbaren zum verborgenen Zustand zurück. Der Trail kehrt die Reihenfolge automatisch um – die Elemente werden in umgekehrter Reihenfolge ausgeblendet (zuletzt hinein, zuerst hinaus).

Das Konfigurationsobjekt für useTrail entspricht dem von useSpring: tension, friction, mass. Die Verzögerung zwischen den Elementen wird dadurch bestimmt, wie lange jeder Spring zum Starten braucht; dies wird von der gesamten Spring-Physik gesteuert. Steifere Springs mit höherer tension erzeugen eine schnellere Staffelung, sanftere Springs längere Kaskaden.

useSpringRef() erstellt eine Ref, die Sie über die ref-Option an einen Spring-Hook anhängen. Die Ref ermöglicht useChain zu steuern, wann dieser Spring startet. Sie erstellen eine Ref pro Spring oder Trail, die Sie sequenzieren möchten: const springRef = useSpringRef(), und übergeben sie anschließend: useSpring({ ref: springRef, ... }).

useChain([ref1, ref2, ref3], [0, 0.5, 0.8]) sequenziert mehrere Springs oder Trails. Das erste Argument ist ein Array von springRefs in der Reihenfolge, in der sie abgespielt werden sollen. Das zweite Argument ist ein Array von Zeitstempeln zwischen 0 und 1. Diese geben an, wann jeder Spring als Anteil am gesamten Zeitrahmen startet.

In useChain bedeuten Zeitstempel wie [0, 0.5], dass Spring 1 bei 0 % der Sequenz startet und Spring 2 bei 50 %. Das optionale dritte Argument ist der gesamte Zeitrahmen in Millisekunden (Standard: 1000 ms). Bei [0, 0.5] und 2000 ms startet Spring 1 also bei 0 ms und Spring 2 bei 1000 ms.

Ein gängiges Muster besteht darin, einen Container zu vergrößern (useSpring für die Größe) und anschließend die darin enthaltenen Elemente einzublenden (useTrail für die Liste). Hängen Sie an beide Refs an und verwenden Sie anschließend useChain([sizeRef, trailRef], [0, 0.5]), damit sich der Container zuerst vergrößert und die Elemente ab der Hälfte eingeblendet werden. So entsteht eine filmische zweiphasige Eingangsanimation.

useChain eignet sich ideal für Seitenübergänge. Beim Navigieren zwischen Seiten verketten Sie die Exit-Animation der alten Seite mit der Eingangsanimation der neuen Seite. Die Exit-Animation wird zuerst abgeschlossen (Zeitstempel 0), anschließend beginnt die Eingangsanimation (Zeitstempel 0.6). So entsteht eine gleichmäßige Übergabe statt eines abrupten Wechsels.

Mit useTrail lassen sich Parallaxeffekte beim Scrollen erzeugen, indem Elemente abhängig von ihrer Position im Trail mit unterschiedlichen Geschwindigkeiten animiert werden. Elemente, die weiter hinten im Trail liegen, starten später und verwenden möglicherweise eine andere Konfiguration (geringere tension), wodurch sie sich langsamer bewegen. Diese tiefenbasierte zeitliche Abstimmung simuliert den Parallaxeffekt von Objekten in unterschiedlichen Entfernungen.

Wie erzeugt useTrail die gestaffelte Verzögerung zwischen den Elementen der Animation?

useTrail(count, config) erstellt count Springs, die nacheinander animiert werden und dadurch gestaffelte Einblendungen von Listen erzeugen. Durchlaufen Sie Trail und Items gleichzeitig, um die Elemente zu rendern. useSpringRef() erstellt Refs, die useChain zur Sequenzierung verwendet. useChain([ref1, ref2], [0, 0.5]) orchestriert mehrere Springs mit Zeitstempeln als Bruchteilen des gesamten Zeitrahmens. Zusammen ermöglichen diese Hooks komplexe mehrphasige Abläufe wie Animationen nach dem Muster „erst vergrößern, dann einblenden“.