updateTransition per movimenti coordinati

Quando diverse proprietà devono cambiare insieme al variare di uno stato, è importante mantenerle sincronizzate. updateTransition coordina più animazioni a partire da un unico stato. ✨

Create una transizione passando lo stato corrente a updateTransition. Compose lo osserva e gestisce ogni animazione figlia quando lo stato cambia.

Chiedete alla transizione ogni valore con animateDp, animateColor e funzioni simili. Fornite una lambda che associa ogni stato al relativo obiettivo.

Aggiungete tutte le child animations che desiderate alla stessa transizione. Dimensioni, colore e raggio degli angoli cambiano insieme a partire da un unico booleano.

Poiché condividono una transizione, i valori restano in perfetta sincronia. Non c’è il rischio che la dimensione termini prima del colore, cosa che può accadere con chiamate animateAsState separate.

Leggete ogni valore animato proprio come un normale state e applicatelo. L’intero elemento si trasforma con fluidità mentre la transizione procede a ogni frame.

Ogni elemento figlio può avere il proprio transitionSpec. Fate scattare rapidamente il colore mentre la dimensione cambia lentamente, il tutto attivato dallo stesso cambiamento di stato.

Lo stato può essere un enum, non solo un valore booleano. Mappi ogni caso su un obiettivo e la transizione anima il passaggio tra tutti questi stati.

La transizione espone currentState e targetState. Può verificare se il movimento è ancora in corso o se ha raggiunto l'obiettivo.

Scelga updateTransition quando un evento deve gestire un insieme di cambiamenti coordinati, ad esempio espandere una scheda mentre il colore e l'elevazione cambiano all'unisono. 🎬

Raggruppare le animazioni in una sola transition è più ordinato e facile da comprendere rispetto a gestire diversi valori indipendenti di animate*AsState.

Ha imparato a usare updateTransition: può ricavare diversi valori animati da un unico stato, facendoli muovere perfettamente sincronizzati, ciascuno con i propri tempi. 🎉