Animierte Vektorbilder in Compose

Es gibt verschiedene Möglichkeiten, Vektoren in „Compose“ zu animieren. Sie haben folgende Möglichkeiten:

  • AnimatedVectorDrawable-Dateiformat
  • ImageVector mit Compose Animation APIs, wie in diesem Medium-Artikel
  • Eine Drittanbieterlösung wie Lottie

Animierte Vektor-Drawables (experimentell)

<ph type="x-smartling-placeholder">
</ph> Sanduhr mit animiertem Inhalt und Rotation
Abbildung 1: Animiertes Vektor-Drawable in „Compose“

Wenn du eine AnimatedVectorDrawable-Ressource verwenden möchtest, lade die Drawable-Datei mit animatedVectorResource und übergib ein boolean-Element, um zwischen dem Start- und Endzustand deines Drawable-Elements zu wechseln, indem du die Animation durchführst.

@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
    )
}

Weitere Informationen zum Format von Drawable-Dateien findest du unter Drawable-Grafiken animieren.