Animierte Vektorbilder in Compose

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

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

Animierte Vektor-Drawables (experimentell)

Abbildung 1: Animiertes Vektor-Drawable in Compose

Wenn Sie eine AnimatedVectorDrawable-Ressource verwenden möchten, laden Sie die drawable-Datei mit animatedVectorResource und übergeben Sie eine boolean, um zwischen dem Start- und Endzustand des drawable zu wechseln und die Animation auszuführen.

@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
    )
}
AnimationSnippets.kt

Weitere Informationen zum Format Ihrer drawable-Datei finden Sie unter Zeichnen Sie animierte Grafiken.