useTrail og useChain til sekvenser

useTrail(count, config) opretter count springs, der animeres i rækkefølge med en konfigurerbar forsinkelse mellem hvert spring. Når trailen starter, animeres det første element med det samme, det andet starter lidt efter, det tredje derefter og så videre – det skaber en vifte- eller kaskadeeffekt.

useTrail returnerer et array med spring-objekter, ét for hvert element i trailen. Hvert spring har samme struktur (de samme nøgler), men starter sin animation med en forskellig tidsforskydning. Du itererer samtidigt over både trail-arrayet og dit array med elementer for at gengive hvert animeret element med det tilsvarende spring.

Gengiv en liste med trail ved at iterere over trail-arrayet: trail.map((spring, i) => React.createElement(animated.div, { style: spring, key: items[i].id }, items[i].content)). Hvert animated.div modtager sit eget spring-objekt, så elementerne animeres i rækkefølge. Springs kører i indeksrækkefølge: 0, 1, 2, 3...

useTrail understøtter et mønster med toggle til animation frem og tilbage. Send en boolesk open-tilstand for at styre retningen: når open er true, animeres trailen fra skjult til synlig; når den er false, vender den fra synlig til skjult. Trailens rækkefølge vendes automatisk – elementerne animeres ud i omvendt rækkefølge (sidste ind, første ud).

Konfigurationsobjektet til useTrail er det samme som til useSpring: tension, friction, mass. Forsinkelsen mellem elementerne bestemmes af, hvor lang tid hvert spring bruger på at starte, og styres af den samlede spring-fysik. Stivere springs med højere tension skaber hurtigere forskydning; blødere springs skaber længere kaskader.

useSpringRef() opretter en ref, som du knytter til en spring-hook via dens ref-indstilling. Ref'en giver useChain kontrol over, hvornår det pågældende spring starter. Du opretter én ref pr. spring eller trail, som du vil sætte i rækkefølge: const springRef = useSpringRef(), og sender den derefter med: useSpring({ ref: springRef, ... }).

useChain([ref1, ref2, ref3], [0, 0.5, 0.8]) sætter flere springs eller trails i rækkefølge. Det første argument er et array med springRefs i den rækkefølge, de skal afspilles i. Det andet argument er et array med tidsstempler mellem 0 og 1, som angiver, hvornår hvert spring starter, angivet som en brøkdel af det samlede tidsforløb.

I useChain betyder tidsstempler som [0, 0.5], at spring 1 starter ved 0 % af sekvensen, og spring 2 starter ved 50 %. Det valgfri tredje argument er det samlede tidsforløb i millisekunder (standardværdien er 1000 ms). Med [0, 0.5] og 2000 ms starter spring 1 altså ved 0 ms, og spring 2 starter ved 1000 ms.

Et almindeligt mønster er at animere en container, der udvider sig (useSpring til størrelsen), og derefter animere elementerne indeni, så de toner frem (useTrail til listen). Knyt refs til begge, og brug derefter useChain([sizeRef, trailRef], [0, 0.5]), så containeren udvider sig først, hvorefter elementerne toner frem halvvejs igennem. Det skaber en filmisk indgangsanimation i to faser.

useChain er ideel til sideovergange. Når du navigerer mellem sider, kan du kæde den gamle sides exit-animation sammen med den nye sides indgangsanimation. Exit-animationen afsluttes først (tidsstempel 0), hvorefter indgangsanimationen begynder (tidsstempel 0,6). Det skaber en jævn overgang i stedet for et pludseligt skift.

useTrail kan skabe parallakse-scroll-effekter ved at animere elementer med forskellige hastigheder baseret på deres placering i trailen. Elementer længere tilbage i trailen starter senere og kan have en anden konfiguration (lavere tension), hvilket får dem til at bevæge sig langsommere. Denne dybdebaserede timing simulerer parallakse-effekten for objekter på forskellige afstande.

useTrail(count, config) opretter count springs, der animeres i rækkefølge og dermed skaber forskudte indgangsanimationer for lister. Iterér over trail og elementerne samtidigt for at gengive dem. useSpringRef() opretter refs, som useChain bruger til at sætte animationer i rækkefølge. useChain([ref1, ref2], [0, 0.5]) orkestrerer flere springs med brøkdele af tidsstempler. Sammen gør de komplekse sekvenser i flere faser mulige, f.eks. animationer, der først udvider og derefter viser elementer.