Componenti animati e interpolazione degli stili

react-spring fornisce versioni animate di tutti gli elementi HTML: animated.div, animated.span, animated.img, animated.button e così via. Sono sostituti diretti delle controparti native, con una differenza fondamentale: possono accettare oggetti SpringValue come props di stile.

I normali elementi React ricevono lo stile come un oggetto semplice con valori statici. SpringValues sono oggetti speciali che si aggiornano a ogni frame dell'animazione senza passare dal ciclo di nuovo rendering di React. Solo i componenti animated.* sanno sottoscriversi agli aggiornamenti di SpringValue e modificare direttamente lo stile del DOM, bypassando completamente React per ottenere le massime prestazioni.

Applichi i valori spring direttamente come props di stile CSS sui componenti animated. Ad esempio: style={{ opacity: opacity, transform: transform }}, dove opacity e transform sono SpringValue restituiti da useSpring. animated.div legge questi valori a ogni tick di RAF (requestAnimationFrame) e li applica al nodo DOM.

Gli oggetti SpringValue dispongono di un metodo .to() per trasformare il risultato. Un caso d'uso comune consiste nel convertire un valore spring numerico in una stringa CSS: x.to(v => "translateX(" + v + "px)"). La funzione riceve il valore numerico corrente e restituisce il risultato trasformato, che viene applicato come stile.

Il metodo .to() accetta anche array come input per la mappatura degli intervalli: x.to([0, 1], ["#ff0000", "#00ff00"]) mappa il valore spring dall'intervallo [0, 1] all'intervallo di colori dal rosso al verde. In questo modo è possibile interpolare valori spring numerici in colori, stringhe o qualsiasi valore che non possa essere rappresentato come un semplice numero.

Quando un'animazione spring segue più valori contemporaneamente, è possibile interpolarli insieme. Per un'animazione spring che segue { x, y }, è possibile scrivere: x.to((xVal, yVal) => "translate(" + xVal + "px," + yVal + "px)"). Il callback .to() riceve tutti i valori nell'ordine in cui compaiono nella configurazione dell'animazione spring.

È possibile racchiudere i propri componenti con animated(): const AnimatedCard = animated(Card). Il componente racchiuso deve accettare una prop style e inoltrarla a un elemento DOM. A questo punto AnimatedCard può ricevere oggetti SpringValue nella prop style proprio come animated.div.

Le animazioni complesse spesso combinano più animazioni spring. Ad esempio, un'animazione di ingresso può usare un'animazione spring per l'opacità e un'altra per la posizione verticale. È possibile applicarle entrambe allo stesso animated.div: style={{ opacity: opacitySpring.opacity, transform: positionSpring.y.to(y => "translateY(" + y + "px)") }}.

La caratteristica più importante di react-spring in termini di prestazioni è che gli aggiornamenti dei valori animati bypassano il reconciler di React. Quando un'animazione spring è in esecuzione, React NON esegue il rendering del componente a ogni frame. Invece, il componente animated.* aggiorna direttamente la proprietà style del nodo DOM in ogni callback di requestAnimationFrame, rendendo possibili animazioni a 60 fps senza l'overhead di React.

Pattern di animazione comuni con l'interpolazione: dissolvenza all'avvio tramite opacity.to([0, 1], [0, 1]), ingrandimento al passaggio del mouse tramite scale.to(s => "scale(" + s + ")") e rotazione alla commutazione tramite rotation.to(r => "rotate(" + r + "deg)"). Combinando queste trasformazioni si creano effetti composti.

Per impostazione predefinita, .to() con array di intervalli può estrapolare oltre l'intervallo definito. È possibile controllare questo comportamento con l'opzione extrapolate: x.to({ range: [0, 1], output: [0, 100], extrapolate: "clamp" }) impedisce all'output di scendere sotto 0 o di superare 100, anche se l'animazione spring oltrepassa il limite. È utile per le barre di avanzamento e le animazioni vincolate.

Perché è necessario utilizzare animated.div invece di un semplice div quando si applicano valori spring?

animated.div, animated.span e animated(CustomComponent) sono sostituti immediati che accettano oggetti SpringValue come props di stile. Il metodo .to() interpola i valori spring trasformandoli in stringhe CSS, intervalli di colori o qualsiasi altro formato di output. Più animazioni spring possono essere composte naturalmente sullo stesso elemento. Il principale vantaggio in termini di prestazioni è che gli aggiornamenti delle animazioni spring bypassano i nuovi rendering di React modificando direttamente gli stili del DOM nei callback RAF.