เอกสารนี้มีตัวอย่างวิธีใช้
MotionLayout
แต่ละตัวอย่างจะมีวิดีโอที่แสดงภาพเคลื่อนไหว พร้อมด้วยโค้ดที่เกี่ยวข้องสำหรับฉากภาพเคลื่อนไหวและเลย์เอาต์
ภาพเคลื่อนไหวพื้นฐาน
ตัวอย่างนี้มีมุมมองเดียวที่คุณแตะและลากเพื่อเลื่อนในแนวนอนได้
แอตทริบิวต์ที่กำหนดเอง - backgroundColor
ตัวอย่างนี้คล้ายกับตัวอย่างภาพเคลื่อนไหวพื้นฐาน นอกจากภาพเคลื่อนไหวพื้นฐานแล้ว สีพื้นหลังของมุมมองจะเปลี่ยนไปเมื่อมุมมองเคลื่อนที่
ImageFilterView - การเปลี่ยนรูปภาพ
ตัวอย่างนี้แสดงวิธีเปลี่ยนค่าความอิ่มตัวของ ImageFilterView
ตำแหน่งคีย์เฟรม
ตัวอย่างนี้ใช้ <KeyFrameSet> เพื่อเปลี่ยนตำแหน่ง Y ของมุมมองระหว่าง
ภาพเคลื่อนไหว
การประมาณค่าคีย์เฟรม
ตัวอย่างนี้สร้างขึ้นจากตัวอย่างตำแหน่งคีย์เฟรม โดยเพิ่มการหมุนและการปรับขนาดลงในการเปลี่ยนมุมมอง
วงจรคีย์เฟรม
ตัวอย่างนี้เพิ่มองค์ประกอบ <KeyCycle> เพื่อเพิ่มภาพเคลื่อนไหวแบบคลื่นให้กับมุมมอง
CoordinatorLayout (1/2)
ตัวอย่างนี้เพิ่ม MotionLayout ลงใน AppBarLayout ที่มีอยู่เพื่อเพิ่มภาพเคลื่อนไหวให้กับแถบแอป ตัวอย่างนี้อธิบายไว้เพิ่มเติมใน
บทนำเกี่ยวกับ MotionLayout (ส่วนที่ 3)
CoordinatorLayout (2/2)
ตัวอย่างนี้เพิ่ม MotionLayout ลงใน AppBarLayout ที่มีอยู่เพื่อเพิ่มภาพเคลื่อนไหวให้กับแถบแอป
DrawerLayout (1/2)
ตัวอย่างนี้แสดงวิธีเพิ่มภาพเคลื่อนไหวลงใน DrawerLayout ตัวอย่างนี้
อธิบายไว้เพิ่มเติมใน
บทนำเกี่ยวกับ MotionLayout (ส่วนที่ 3)
DrawerLayout (2/2)
ตัวอย่างนี้แสดงวิธีเพิ่มภาพเคลื่อนไหวลงใน DrawerLayout
แผงด้านข้าง
ตัวอย่างนี้แสดงวิธีแสดงแผงด้านข้างเมื่อลากพื้นที่เนื้อหาหลักไปทางขวา
พารัลแลกซ์
ตัวอย่างนี้แสดงพื้นหลังแบบพารัลแลกซ์ ซึ่งเลเยอร์พื้นหลังต่างๆ จะเคลื่อนที่ด้วยความเร็วที่แตกต่างกัน
ViewPager
ตัวอย่างนี้แสดงวิธีเพิ่มภาพเคลื่อนไหวเมื่อปัดระหว่างแท็บ ViewPager
ตัวอย่างนี้อธิบายไว้เพิ่มเติมใน
บทนำเกี่ยวกับ MotionLayout (ส่วนที่ 3)
ViewPager - Lottie
ตัวอย่างนี้แสดงวิธีเพิ่มภาพเคลื่อนไหวเมื่อปัดระหว่างแท็บ ViewPager
ภาพเคลื่อนไหวแบบซับซ้อน (1/3)
ตัวอย่างนี้รวมองค์ประกอบจากตัวอย่างก่อนหน้าเพื่อแสดงภาพเคลื่อนไหวแบบซับซ้อน
ภาพเคลื่อนไหวแบบซับซ้อน (2/3)
ตัวอย่างนี้รวมองค์ประกอบจากตัวอย่างก่อนหน้าเพื่อแสดงภาพเคลื่อนไหวแบบซับซ้อน
ภาพเคลื่อนไหวแบบซับซ้อน (3/3)
ตัวอย่างนี้รวมองค์ประกอบจากตัวอย่างก่อนหน้าเพื่อแสดงภาพเคลื่อนไหวแบบซับซ้อน
การเปลี่ยน Fragment (1/2)
ตัวอย่างนี้แสดงวิธีใช้ MotionLayout เพื่อเปลี่ยนระหว่าง Fragment
การเปลี่ยน Fragment (2/2)
ตัวอย่างนี้แสดงวิธีใช้ MotionLayout เพื่อเปลี่ยนระหว่าง Fragment
ภาพเคลื่อนไหวคล้าย YouTube
ตัวอย่างนี้แสดงการเปลี่ยนระหว่างมุมมองขนาดกะทัดรัดกับการใช้งานแบบเต็มหน้าจอที่มีเนื้อหาเพิ่มเติม
KeyTrigger
ตัวอย่างนี้แสดงวิธีแสดงและซ่อนปุ่มการทำงานแบบลอยเมื่อการเปลี่ยนข้ามเกณฑ์ความคืบหน้า
หลายรัฐ
ตัวอย่างนี้แสดงวิธีใช้สถานะเพื่อกำหนดภาพเคลื่อนไหวที่จะใช้