แสดงภาพเคลื่อนไหว

คุณสร้างประสบการณ์การใช้งานแบบอินเทอร์แอกทีฟและดึงดูดผู้ใช้ให้มีส่วนร่วมมากขึ้นในแอปได้ด้วยการโหลดไฟล์ที่วาดได้เพื่อแสดงภาพเคลื่อนไหว รูปภาพเคลื่อนไหวมีประโยชน์ในการสร้างตัวบ่งชี้การโหลด ตัวบ่งชี้ความสําเร็จหรือข้อผิดพลาด อำนวยความสะดวกในการพัฒนาเกม และฟังก์ชัน UI อื่นๆ อีกมากมาย

ความเข้ากันได้ของเวอร์ชัน

การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป

ทรัพยากร Dependency

แสดงภาพเคลื่อนไหว

โค้ดต่อไปนี้แสดงเวกเตอร์ภาพเคลื่อนไหวที่สลับระหว่าง 2 สถานะโดยอัตโนมัติ

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

ประเด็นสำคัญเกี่ยวกับรหัส

  • โหลดทรัพยากรเวกเตอร์ ซึ่งจะแสดงภาพเคลื่อนไหวของแอตทริบิวต์การวาดเมื่อเวลาผ่านไป
  • อินสแตนซ์ Image ที่ใช้อินสแตนซ์ Painter เพื่อแสดงภาพเคลื่อนไหว ซึ่งสร้างขึ้นจากสถานะ AnimatedImageVector และ boolean โดยฟังก์ชัน rememberAnimatedVectorPainter()
  • เมื่อ atEnd เป็น true อินสแตนซ์ Painter จะหยุดแสดงภาพเคลื่อนไหว

ผลลัพธ์

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

คอลเล็กชันที่มีคู่มือนี้

คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้

ดูเทคนิคการใช้ภาพสดใสที่ดึงดูดความสนใจเพื่อให้แอป Android ของคุณมีรูปลักษณ์ที่สวยงาม

หากมีคำถามหรือความคิดเห็น

ไปที่หน้าคำถามที่พบบ่อยเพื่อดูคู่มือฉบับย่อหรือติดต่อเราเพื่อบอกความคิดเห็นของคุณ