รูปภาพเวกเตอร์แบบเคลื่อนไหวในการเขียน

คุณสามารถทำให้เวกเตอร์เคลื่อนไหวใน Compose ได้หลายวิธี โดยใช้ตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

  • รูปแบบไฟล์ AnimatedVectorDrawable
  • ImageVector พร้อม Compose Animation API เช่น ใน บทความ Medium นี้
  • โซลูชันของบุคคลที่สาม เช่น Lottie

เวกเตอร์ Drawable ที่เคลื่อนไหวได้ (ทดลองใช้)

นาฬิกาทรายเคลื่อนไหวเนื้อหาและหมุน
รูปที่ 1 Animated Vector Drawable ใน Compose

หากต้องการใช้ทรัพยากร AnimatedVectorDrawable ให้โหลดไฟล์ Drawable โดยใช้ animatedVectorResource แล้วส่ง boolean เพื่อสลับระหว่างสถานะเริ่มต้นและสถานะสิ้นสุดของ Drawable เพื่อทำการเคลื่อนไหว

@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

ดูข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบไฟล์ Drawable ได้ที่หัวข้อ ทำให้กราฟิก Drawable เคลื่อนไหว

ก่อนหน้า
ภาพเคลื่อนไหวตามมูลค่า
ถัดไป
ปรับแต่งภาพเคลื่อนไหว