Immagini vettoriali animate in Compose

L'animazione dei vettori in Compose è possibile in diversi modi. Puoi utilizzare una delle seguenti opzioni:

  • Formato file AnimatedVectorDrawable
  • ImageVector con le API di animazione di Compose, come in questo articolo di Medium
  • Una soluzione di terze parti come Lottie

Drawable vettoriali animati (sperimentale)

Animazione di una clessidra che ruota e il cui contenuto si sposta
Figura 1. Drawable vettoriale animato in Compose

Per utilizzare una risorsa AnimatedVectorDrawable, carica il file risorsa drawable utilizzando animatedVectorResource e passa un boolean per alternare lo stato iniziale e finale della risorsa drawable, eseguendo l'animazione.

@Composable
fun AnimatedVectorDrawable() {
    val image = AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated)
    var atEnd by remember { mutableStateOf(false) }
    Image(
        painter = rememberAnimatedVectorPainter(image, atEnd),
        contentDescription = "Timer",
        modifier = Modifier.clickable {
            atEnd = !atEnd
        },
        contentScale = ContentScale.Crop
    )
}

Per ulteriori informazioni sul formato del file drawable, vedi Animare le grafiche drawable.

Indietro
Animazioni basate sul valore
Avanti
Personalizza le animazioni