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

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

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

Vector Drawable แบบเคลื่อนไหว (เวอร์ชันทดลอง)

ภาพเคลื่อนไหวของนาฬิกาทรายที่กำลังหมุนและมีทรายไหลอยู่ข้างใน
รูปที่ 1 Vector Drawable แบบเคลื่อนไหวใน Compose

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

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

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