Compose'da animasyonlu vektör resimler

Compose'da vektörlere birkaç farklı şekilde animasyon eklemek mümkündür. Aşağıdakilerden herhangi birini kullanabilirsiniz:

  • AnimatedVectorDrawable dosya biçimi
  • Bu Medium makalesindeki gibi Compose animasyon API'leriyle ImageVector
  • Lottie gibi bir üçüncü taraf çözümü

Animasyonlu vektör çekilebilir öğeleri (deneysel)

İçindekileri hareket ettiren ve döndüren kum saati
Şekil 1. Compose'da çekilebilir animasyonlu vektör

Bir AnimatedVectorDrawable kaynağı kullanmak için animatedVectorResource ile çekilebilir dosyayı yükleyin ve animasyonu gerçekleştirmek için çekilebilir öğenin başlangıç ve bitiş durumu arasında geçiş yapmak üzere bir boolean iletin.

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

Çekilebilir dosyanızın biçimi hakkında daha fazla bilgi için Çekilebilir grafikleri canlandırma konusuna bakın.