useTrail y useChain para secuencias

useTrail(count, config) crea count springs que se animan en secuencia, con un retraso configurable entre cada uno. Cuando comienza el trail, el primer elemento se anima de inmediato, el segundo comienza un poco después, el tercero después de ese y así sucesivamente, lo que crea un efecto de abanico o cascada.

useTrail devuelve un array de objetos spring, uno por cada elemento del trail. Cada spring tiene la misma estructura (las mismas claves), pero comienza su animación con un desfase temporal diferente. Puede recorrer simultáneamente el array del trail y el array de elementos para renderizar cada elemento animado con su spring correspondiente.

Renderice una lista con trail recorriendo el array del trail: trail.map((spring, i) => React.createElement(animated.div, { style: spring, key: items[i].id }, items[i].content)). Cada animated.div recibe su propio objeto spring, por lo que los elementos se animan en secuencia. Los springs se ejecutan en orden de índice: 0, 1, 2, 3...

useTrail admite un patrón de alternancia para animar hacia delante y hacia atrás. Pase un estado booleano open para controlar la dirección: cuando open es true, el trail se anima de oculto a visible; cuando es false, invierte el recorrido de visible a oculto. El trail invierte el orden automáticamente: los elementos desaparecen en secuencia inversa (el último en entrar es el primero en salir).

El objeto de configuración de useTrail es el mismo que el de useSpring: tension, friction, mass. El retraso entre elementos viene determinado por el tiempo que tarda cada spring en comenzar, que depende de la física general del spring. Los springs más rígidos, con mayor tension, crean un escalonamiento más rápido; los springs más suaves crean cascadas más largas.

useSpringRef() crea una ref que se adjunta a un hook de spring mediante su opción ref. La ref permite que useChain controle cuándo comienza ese spring. Cree una ref por cada spring o trail que quiera secuenciar: const springRef = useSpringRef(); después, pásela: useSpring({ ref: springRef, ... }).

useChain([ref1, ref2, ref3], [0, 0.5, 0.8]) secuencia varios springs o trails. El primer argumento es un array de springRefs en el orden en que deben reproducirse. El segundo argumento es un array de marcas de tiempo entre 0 y 1 que indica cuándo comienza cada spring como fracción del intervalo de tiempo total.

En useChain, marcas de tiempo como [0, 0.5] significan que el spring 1 comienza en el 0 % de la secuencia y el spring 2 comienza en el 50 %. El tercer argumento opcional es el intervalo de tiempo total en milisegundos (1000 ms de forma predeterminada). Por tanto, con [0, 0.5] y 2000 ms, el spring 1 comienza en 0 ms y el spring 2 en 1000 ms.

Un patrón habitual consiste en animar la expansión de un contenedor (useSpring para el tamaño) y después animar la aparición gradual de los elementos interiores (useTrail para la lista). Adjunte refs a ambos y utilice useChain([sizeRef, trailRef], [0, 0.5]) para que el contenedor se expanda primero y los elementos aparezcan gradualmente a mitad del proceso. Esto crea una animación de entrada cinematográfica en dos fases.

useChain es ideal para las transiciones entre páginas. Al navegar entre páginas, encadene la animación de salida de la página anterior con la animación de entrada de la nueva. La salida se completa primero (marca de tiempo 0) y después comienza la entrada (marca de tiempo 0.6). Esto crea un cambio fluido en lugar de una sustitución brusca.

useTrail puede crear efectos de desplazamiento parallax al animar los elementos a distintas velocidades según su posición en el trail. Los elementos más profundos del trail comienzan más tarde y pueden tener una configuración diferente (menor tension), lo que hace que se muevan más despacio. Este tiempo basado en la profundidad simula el efecto parallax de objetos situados a distintas distancias.

¿Cómo crea useTrail el retraso escalonado entre los elementos de la animación?

useTrail(count, config) crea count springs que se animan en secuencia, lo que produce entradas de listas escalonadas. Recorra trail y los elementos simultáneamente para renderizarlos. useSpringRef() crea refs que useChain utiliza para secuenciar las animaciones. useChain([ref1, ref2], [0, 0.5]) orquesta varios springs con marcas de tiempo fraccionarias. Juntos permiten crear secuencias complejas de varias fases, como animaciones que primero expanden y después muestran el contenido.