Componentes animados e interpolação de estilos

O react-spring fornece versões animadas de todos os elementos HTML: animated.div, animated.span, animated.img, animated.button e assim por diante. Elas são substituições diretas de suas contrapartes nativas, com uma diferença fundamental: podem aceitar objetos SpringValue como propriedades de estilo.

Elementos comuns do React recebem o estilo como um objeto simples com valores estáticos. SpringValues são objetos especiais que se atualizam a cada quadro da animação sem passar pelo ciclo de nova renderização do React. Somente componentes animated.* sabem como se inscrever nas atualizações de SpringValue e modificar diretamente o estilo do DOM, ignorando completamente o React para obter o máximo desempenho.

Aplique os valores da mola diretamente como propriedades de estilo CSS em componentes animados. Por exemplo: style={{ opacity: opacity, transform: transform }}, em que opacity e transform são SpringValues de useSpring. animated.div lê esses valores a cada intervalo de RAF (requestAnimationFrame) e os aplica ao nó do DOM.

SpringValues têm um método .to() para transformar sua saída. Um caso de uso comum é converter um valor numérico de mola em uma cadeia CSS: x.to(v => "translateX(" + v + "px)"). A função recebe o valor numérico atual e retorna a saída transformada, que é aplicada como estilo.

O método .to() também aceita entradas em matrizes para mapear intervalos: x.to([0, 1], ["#ff0000", "#00ff00"]) mapeia o valor da mola do intervalo [0, 1] para o intervalo de cores que vai do vermelho ao verde. É assim que você interpola molas numéricas para cores, cadeias de texto ou qualquer valor que não possa ser representado como um número simples.

Quando uma mola acompanha vários valores simultaneamente, é possível interpolá-los em conjunto. Para uma mola que acompanha { x, y }, você pode escrever: x.to((xVal, yVal) => "translate(" + xVal + "px," + yVal + "px)"). A função de retorno de .to() recebe todos os valores na ordem em que aparecem na configuração da mola.

Você pode envolver seus próprios componentes com animated(): const AnimatedCard = animated(Card). O componente envolvido deve aceitar uma propriedade style e encaminhá-la para um elemento do DOM. Agora AnimatedCard pode receber SpringValues em sua propriedade de estilo, assim como animated.div.

Animações complexas geralmente combinam várias molas. Por exemplo, uma animação de entrada pode usar uma mola para a opacidade e outra para a posição vertical. Você pode aplicar ambas ao mesmo animated.div: style={{ opacity: opacitySpring.opacity, transform: positionSpring.y.to(y => "translateY(" + y + "px)") }}.

A característica de desempenho mais importante do react-spring é que as atualizações dos valores animados ignoram o reconciliador do React. Quando uma mola está sendo animada, o React NOT faz uma nova renderização do componente a cada quadro. Em vez disso, o componente animated.* atualiza diretamente a propriedade de estilo do nó do DOM em cada função de retorno de requestAnimationFrame, possibilitando animações a 60 quadros por segundo sem a sobrecarga do React.

Padrões comuns de animação com interpolação: aparecer gradualmente na montagem usando opacity.to([0, 1], [0, 1]), aumentar a escala ao passar o cursor usando scale.to(s => "scale(" + s + ")") e girar ao alternar usando rotation.to(r => "rotate(" + r + "deg)"). Encadear essas transformações cria efeitos compostos.

Por padrão, .to() com matrizes de intervalo pode extrapolar além do intervalo definido. É possível controlar isso com a opção de extrapolação: x.to({ range: [0, 1], output: [0, 100], extrapolate: "clamp" }) impede que a saída fique abaixo de 0 ou acima de 100, mesmo que a mola ultrapasse esses limites. Isso é útil para barras de progresso e animações limitadas.

Por que é necessário usar animated.div em vez de um div comum ao aplicar valores de mola?

animated.div, animated.span e animated(CustomComponent) são substituições diretas que aceitam SpringValues como propriedades de estilo. O método .to() interpola valores de mola: mapeia-os para cadeias CSS, intervalos de cores ou qualquer formato de saída. Várias molas são compostas naturalmente em um único elemento. O principal benefício de desempenho é que as atualizações das molas ignoram novas renderizações do React ao modificar diretamente os estilos do DOM em funções de retorno de RAF.