useTrail e useChain para sequências

useTrail(count, config) cria count molas que são animadas em sequência, com um atraso configurável entre cada uma. Quando a trilha começa, o primeiro item é animado imediatamente, o segundo começa um pouco depois, o terceiro depois dele e assim por diante — criando um efeito de leque ou cascata.

useTrail retorna uma matriz de objetos de mola, um para cada item da trilha. Cada mola tem a mesma estrutura (as mesmas chaves), mas começa sua animação em um momento diferente. Você percorre simultaneamente a matriz da trilha e a matriz de itens para renderizar cada item animado com sua mola correspondente.

Renderize uma lista com trilha percorrendo a matriz da trilha: trail.map((spring, i) => React.createElement(animated.div, { style: spring, key: items[i].id }, items[i].content)). Cada animated.div recebe seu próprio objeto de mola, então os itens são animados em sequência. As molas são executadas na ordem dos índices: 0, 1, 2, 3...

useTrail aceita um padrão de alternância para animações para frente e para trás. Passe um estado booleano open para controlar a direção: quando open é verdadeiro, a trilha é animada de oculta para visível; quando é falso, ela é revertida de visível para oculta. A trilha inverte a ordem automaticamente — os itens saem na sequência inversa (o último a entrar é o primeiro a sair).

O objeto de configuração de useTrail é igual ao de useSpring: tensão, atrito e massa. O atraso entre os itens é determinado pelo tempo que cada mola leva para começar, que é controlado pela física geral da mola. Molas mais rígidas, com maior tensão, criam um escalonamento mais rápido; molas mais suaves criam cascatas mais longas.

useSpringRef() cria uma referência que você vincula a um recurso de mola por meio da opção ref. A referência permite que useChain controle quando essa mola começa. Você cria uma referência para cada mola ou trilha que deseja sequenciar: const springRef = useSpringRef() e depois a passa: useSpring({ ref: springRef, ... }).

useChain([ref1, ref2, ref3], [0, 0.5, 0.8]) organiza várias molas ou trilhas em sequência. O primeiro argumento é uma matriz de springRefs na ordem em que devem ser executadas. O segundo argumento é uma matriz de marcas de tempo entre 0 e 1, indicando quando cada mola começa como uma fração do período total.

Em useChain, marcas de tempo como [0, 0.5] significam que a mola 1 começa em 0% da sequência e a mola 2 começa em 50% dela. O terceiro argumento opcional é o período total em milissegundos (o padrão é 1000 milissegundos). Portanto, com [0, 0.5] e 2000 milissegundos, a mola 1 começa em 0 milissegundo e a mola 2 começa em 1000 milissegundos.

Um padrão comum é animar a expansão de um contêiner (useSpring para o tamanho) e depois animar o aparecimento gradual dos itens internos (useTrail para a lista). Vincule referências a ambos e use useChain([sizeRef, trailRef], [0, 0.5]) para que o contêiner se expanda primeiro e os itens apareçam gradualmente na metade do processo. Isso cria uma animação de entrada cinematográfica em duas fases.

useChain é ideal para transições de página. Ao navegar entre páginas, encadeie a animação de saída da página antiga com a animação de entrada da nova página. A saída é concluída primeiro (marca de tempo 0) e, em seguida, a entrada começa (marca de tempo 0,6). Isso cria uma transição suave em vez de uma troca abrupta.

useTrail pode criar efeitos de rolagem de paralaxe ao animar itens em velocidades diferentes, com base na posição deles na trilha. Os itens mais ao fundo da trilha começam mais tarde e podem ter uma configuração diferente (menor tensão), fazendo com que se movam mais lentamente. Esse tempo baseado na profundidade simula o efeito de paralaxe de objetos a diferentes distâncias.

Como useTrail cria o atraso escalonado entre os itens da animação?

useTrail(count, config) cria count molas que são animadas em sequência, criando entradas escalonadas para listas. Percorra simultaneamente a trilha e os itens para renderizá-los. useSpringRef() cria referências que useChain usa para organizar a sequência. useChain([ref1, ref2], [0, 0.5]) orquestra várias molas com marcas de tempo fracionárias. Juntos, eles permitem sequências complexas em várias fases, como animações de expandir e depois revelar.