Fondamenti di React Spring: hook useSpring

Le animazioni CSS tradizionali usano una durata fissa: l'animazione viene eseguita per X millisecondi e poi si interrompe. react-spring anima i valori usando la fisica delle molle: l'animazione è guidata da tension (rigidità della molla) e friction (resistenza al movimento esercitata dalla molla). Il risultato è un movimento che rallenta in modo naturale e trasmette una sensazione organica.

L'hook useSpring({ from, to }) definisce un valore animato. Specifichi i valori iniziali in from e i valori obiettivo in to. useSpring restituisce un oggetto springs in cui ogni chiave è un SpringValue, cioè una versione animata del corrispondente valore numerico o colore.

L'opzione config controlla il comportamento della molla. tension (valore predefinito 170) controlla la rigidità: valori più alti producono uno scatto più rapido. friction (valore predefinito 26) controlla lo smorzamento: valori più bassi producono un rimbalzo maggiore. mass (valore predefinito 1) aggiunge inerzia. Insieme, questi tre valori definiscono il carattere dell'animazione.

react-spring include configurazioni preimpostate che può usare senza doverle calibrare: config.default è equilibrata e adatta a un uso generale, config.gentle è lenta e fluida, config.wobbly produce rimbalzi con un basso attrito, config.stiff è rapida e scattante, mentre config.slow è molto graduale. Le importi da react-spring.

I valori restituiti da useSpring sono oggetti SpringValue, non normali numeri. Non è possibile eseguirne il rendering direttamente in JSX né utilizzarli in normali oggetti di stile. Devono essere applicati ai componenti animated.*, che sanno come sottoscriversi agli aggiornamenti delle animazioni spring e applicarli al DOM in modo efficiente.

Passare immediate: true a useSpring fa sì che i valori raggiungano istantaneamente il valore obiettivo, ignorando l'animazione spring. È utile per il rendering iniziale, quando l'utente ha attivato "riduci movimento" nelle impostazioni del sistema operativo o quando è necessario reimpostare programmaticamente la posizione senza alcun movimento visibile.

È possibile invertire un'animazione spring alternando i valori presenti in from e to. Un pattern comune consiste nel memorizzare uno stato booleano di commutazione e calcolare from/to in base a tale stato: quando toggle è false, l'animazione va da 0 a 1; quando è true, va da 1 a 0. react-spring esegue una transizione fluida tra gli stati.

useSpring può restituire un array di due elementi: const [springs, api] = useSpring(() => ({ from: { x: 0 } })). L'oggetto api consente di controllare l'animazione programmaticamente. È possibile chiamare api.start({ x: 100 }) per animare verso un nuovo valore, api.stop() per congelare l'animazione e api.set({ x: 50 }) per passare direttamente al valore senza animazione.

Utilizzi la forma dichiarativa useSpring({ from, to }) quando l'animazione dipende dallo stato React che cambia normalmente. Utilizzi la forma imperativa con api.start() quando è necessario attivare animazioni da gestori di eventi, gesture o operazioni asincrone senza causare nuovi rendering di React.

useSpring accetta callback del ciclo di vita nella propria configurazione. onStart viene eseguito quando l'animazione spring ha inizio. onChange viene eseguito a ogni frame con il valore corrente ed è utile per gli effetti collaterali che seguono la posizione. onRest viene eseguito quando l'animazione spring si stabilizza sul valore finale, indicando che l'animazione è completa.

Nella forma dichiarativa, useSpring riesegue automaticamente l'animazione quando cambiano i valori passati. Ad esempio, useSpring({ opacity: isVisible ? 1 : 0 }) anima l'opacità ogni volta che cambia isVisible. Questo è il modo più semplice per collegare le animazioni spring allo stato del componente.

Nella configurazione di react-spring, che cosa controllano tension e friction?

react-spring esegue animazioni basate sulla fisica: tension (rigidità), friction (smorzamento) e mass definiscono il movimento. useSpring({ from, to }) restituisce oggetti SpringValue applicati ai componenti animated.*. Le configurazioni predefinite (gentle, wobbly, stiff, slow) coprono i casi più comuni. L'API imperativa [springs, api] consente il controllo programmatico tramite api.start(), api.stop() e api.set(). onRest viene eseguito quando l'animazione si stabilizza.