Compose'da animasyonlu vektör resimler

Compose'da vektörleri canlandırmak için birkaç farklı yöntem kullanabilirsiniz. Aşağıdakilerden herhangi birini kullanabilirsiniz:

  • AnimatedVectorDrawable dosya biçimi
  • ImageVector, bu Medium makalesinde olduğu gibi Compose Animation API'leri ile
  • Lottie gibi bir üçüncü taraf çözümü

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

İçeriği animasyonlu olarak gösteren ve dönen kum saati
Şekil 1. Compose'da animasyonlu drawable vektör

AnimatedVectorDrawable kaynağını kullanmak için animatedVectorResource kullanarak çizilebilir dosyayı yükleyin ve animasyonu gerçekleştirmek üzere çizilebilir öğenizin başlangıç ve bitiş durumu arasında geçiş yapmak için boolean öğesini 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
    )
}

Çizilebilir dosyanızın biçimi hakkında daha fazla bilgi için Çizilebilir grafikleri animasyonla hareketlendirme başlıklı makaleyi inceleyin.

  • Not: JavaScript kapalıyken bağlantı metni gösterilir.
  • Resim yükleme