Gambar vektor animasi di Compose

Vektor animasi di Compose dapat dilakukan dengan beberapa cara. Anda dapat menggunakan salah satu dari berikut:

  • Format file AnimatedVectorDrawable
  • ImageVector dengan API animasi Compose, seperti dalam artikel Medium ini
  • Solusi pihak ketiga seperti Lottie

Vektor drawable animasi (eksperimental)

Hourglass menganimasikan kontennya dan berputar
Gambar 1. Vektor drawable animasi di Compose

Untuk menggunakan resource AnimatedVectorDrawable, muat file drawable menggunakan animatedVectorResource dan teruskan boolean untuk beralih antara status awal dan akhir drawable Anda, dengan melakukan animasi.

@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

Untuk informasi selengkapnya tentang format file drawable, lihat Menganimasikan grafik drawable.

Sebelumnya
Animasi berbasis nilai
Berikutnya
Menyesuaikan animasi