หน้านี้ได้รับการแปลโดย Cloud Translation API

ตัวอย่าง MotionLayout

Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนําสําหรับ Android ดูวิธีใช้ภาพเคลื่อนไหวใน Compose

เอกสารนี้มีตัวอย่างวิธีใช้ MotionLayout แต่ละตัวอย่างจะมีวิดีโอสาธิตการเคลื่อนไหว รวมถึงโค้ดที่สอดคล้องกันสำหรับฉากภาพเคลื่อนไหวและเลย์เอาต์

การเคลื่อนไหวพื้นฐาน

ตัวอย่างนี้มีมุมมองเดียวที่คุณแตะและลากเพื่อย้ายในแนวนอนได้

รูปที่ 1 การลากมุมมอง

ตัวอย่างนี้คล้ายกับตัวอย่างการเคลื่อนไหวพื้นฐาน นอกจากการเคลื่อนไหวพื้นฐานแล้ว สีพื้นหลังของมุมมองจะเปลี่ยนไปเมื่อมุมมองเคลื่อนไหว

รูปที่ 2 การลากมุมมองขณะที่สีพื้นหลังของมุมมองนั้นเปลี่ยนแปลง

ตัวอย่างนี้แสดงวิธีเปลี่ยนค่าความอิ่มตัวของ ImageFilterView

รูปที่ 3 การลากรูปภาพขณะที่ความอิ่มตัวของสีมีการเปลี่ยนแปลง

ตัวอย่างนี้ใช้ <KeyFrameSet> เพื่อเปลี่ยนตำแหน่ง Y ของมุมมองระหว่างการเคลื่อนไหว

รูปที่ 4 การลากมุมมองและการเปลี่ยนตำแหน่ง Y

ตัวอย่างนี้ต่อยอดมาจากตัวอย่างตำแหน่งคีย์เฟรม โดยเพิ่มการหมุนและการปรับขนาดให้กับการเปลี่ยนมุมมอง

รูปที่ 5 การลากมุมมองและการเปลี่ยนแปลงตำแหน่ง Y, การหมุน และการปรับขนาด

ตัวอย่างนี้เพิ่มองค์ประกอบ <KeyCycle> เพื่อเพิ่มการเคลื่อนไหวแบบคลื่นให้กับมุมมอง

รูปที่ 6 การลากมุมมองด้วยการเคลื่อนไหวแบบคลื่นขณะเปลี่ยนสี

ตัวอย่างนี้เพิ่ม MotionLayout ลงใน AppBarLayout ที่มีอยู่เพื่อเพิ่มการเคลื่อนไหวให้กับแถบแอป ดูตัวอย่างเพิ่มเติมได้ในข้อมูลเบื้องต้นเกี่ยวกับ MotionLayout (ส่วนที่ 3)