animate*AsState per interpolazioni semplici

Compose può animare i cambiamenti al posto vostro. Lo strumento più semplice è la famiglia animate*AsState, che sposta gradualmente un valore dal vecchio al nuovo. ✨

Quando cambia il valore obiettivo, animateDpAsState restituisce uno State che vi si avvicina gradualmente in alcuni frame, invece di saltare direttamente al nuovo valore.

Il valore animato è semplicemente uno State che leggete con by. Usatelo in un Modifier e l’interfaccia seguirà l’animazione a ogni frame.

Esiste una funzione per ogni tipo: animateFloatAsState, animateColorAsState, animateDpAsState e altre ancora. Scegliete quella che corrisponde al valore da interpolare.

Usate animateColorAsState per sfumare tra due colori. Cambiate un booleano e osservate lo sfondo passare gradualmente da una tonalità all’altra. 🎨

Per una comparsa o una scomparsa graduale, animate un float e passatelo ad alpha. Un valore di 0f è invisibile, mentre 1f è completamente opaco.

Passate un animationSpec per controllare i tempi. Un tween permette di impostare la durata in millisecondi e una curva di easing.

Sostituite la specifica con una spring per ottenere un movimento naturale basato sulla fisica. Regolate dampingRatio e stiffness per aggiungere un leggero rimbalzo giocoso.

Non dovete mai chiamare start o stop. Quando il target value cambia durante la ricomposizione, l’animazione riparte automaticamente verso il nuovo obiettivo.

L’easing predefinito rende il movimento più naturale, accelerandolo e poi rallentandolo. Curve di Easing come FastOutSlowInEasing evitano un movimento robotico a velocità costante.

Dovete reagire al termine del movimento? Passate una lambda finishedListener, che viene eseguita una volta con il valore finale quando l’animazione si è stabilizzata.

Avete imparato a usare animate*AsState: cambiate un obiettivo, leggete lo State animato e scegliete tween o spring. È il modo più rapido per aggiungere un movimento fluido a un singolo valore. 🎉