useTrail e useChain per le sequenze

useTrail(count, config) crea count animazioni spring che si susseguono con un ritardo configurabile tra l'una e l'altra. Quando il trail ha inizio, il primo elemento si anima immediatamente, il secondo inizia poco dopo, il terzo ancora dopo e così via, creando un effetto a ventaglio o a cascata.

useTrail restituisce un array di oggetti spring, uno per ogni elemento del trail. Ogni animazione spring ha la stessa struttura (le stesse chiavi), ma avvia l'animazione con un offset temporale diverso. È possibile eseguire il mapping contemporaneamente sull'array del trail e sull'array degli elementi per eseguire il rendering di ogni elemento animato con l'animazione spring corrispondente.

Esegua il rendering di un elenco con trail eseguendo il mapping sull'array del trail: trail.map((spring, i) => React.createElement(animated.div, { style: spring, key: items[i].id }, items[i].content)). Ogni animated.div riceve il proprio oggetto spring, quindi gli elementi si animano in sequenza. Le animazioni spring vengono eseguite nell'ordine degli indici: 0, 1, 2, 3...

useTrail supporta un pattern di commutazione per le animazioni in avanti e all'indietro. Passi uno stato booleano open per controllare la direzione: quando open è true, il trail passa da nascosto a visibile; quando è false, si inverte passando da visibile a nascosto. Il trail inverte automaticamente l'ordine: gli elementi escono nella sequenza inversa, ovvero l'ultimo a entrare è il primo a uscire.

L'oggetto config di useTrail è uguale a quello di useSpring: tension, friction, mass. Il ritardo tra gli elementi dipende dal tempo impiegato da ciascuna animazione spring per iniziare, determinato dalla fisica complessiva dell'animazione. Le animazioni spring più rigide, con tension maggiore, creano uno sfalsamento più rapido; quelle più delicate creano cascate più lunghe.

useSpringRef() crea un ref da collegare a un hook spring tramite la relativa opzione ref. Il ref consente a useChain di controllare quando l'animazione spring ha inizio. Crei un ref per ogni animazione spring o trail che desidera mettere in sequenza: const springRef = useSpringRef(), quindi lo passi: useSpring({ ref: springRef, ... }).

useChain([ref1, ref2, ref3], [0, 0.5, 0.8]) mette in sequenza più animazioni spring o trail. Il primo argomento è un array di springRef nell'ordine in cui devono essere eseguiti. Il secondo argomento è un array di timestamp compresi tra 0 e 1, che indicano quando inizia ciascuna animazione spring come frazione dell'intervallo di tempo totale.

In useChain, timestamp come [0, 0.5] indicano che la spring 1 inizia allo 0% della sequenza e la spring 2 al 50%. Il terzo argomento opzionale è l'intervallo di tempo totale in millisecondi (1000 ms per impostazione predefinita). Quindi, con [0, 0.5] e 2000 ms, la spring 1 inizia a 0 ms e la spring 2 a 1000 ms.

Un pattern comune consiste nell'animare l'espansione di un contenitore (useSpring per le dimensioni) e quindi la comparsa graduale degli elementi al suo interno (useTrail per l'elenco). Colleghi i ref a entrambi, quindi utilizzi useChain([sizeRef, trailRef], [0, 0.5]) affinché il contenitore si espanda prima e gli elementi inizino a comparire a metà della sequenza. In questo modo si crea un'animazione di ingresso scenografica in due fasi.

useChain è ideale per le transizioni di pagina. Quando si passa da una pagina all'altra, concateni l'animazione di uscita della pagina precedente con quella di ingresso della nuova pagina. L'uscita viene completata per prima (timestamp 0), quindi l'ingresso ha inizio (timestamp 0.6). In questo modo si crea un passaggio fluido anziché un cambio brusco.

useTrail può creare effetti di scorrimento parallattici animando gli elementi a velocità diverse in base alla loro posizione nel trail. Gli elementi più in profondità nel trail iniziano più tardi e possono avere una configurazione diversa (tension inferiore), facendo sì che si muovano più lentamente. Questa temporizzazione basata sulla profondità simula l'effetto parallasse degli oggetti posti a distanze diverse.

useTrail(count, config) crea count animazioni spring che si susseguono, creando ingressi sfalsati per gli elenchi. Esegua il mapping contemporaneamente sul trail e sugli elementi per eseguire il rendering. useSpringRef() crea ref che useChain utilizza per mettere le animazioni in sequenza. useChain([ref1, ref2], [0, 0.5]) orchestra più animazioni spring con timestamp frazionari. Insieme, consentono di creare sequenze complesse in più fasi, come le animazioni di ingresso che prima espandono e poi rivelano gli elementi.