สร้างภาพเคลื่อนไหวด้วยเครื่องมือแก้ไขการเคลื่อนไหว

Android Studio มีเครื่องมือแก้ไขการออกแบบภาพสำหรับเลย์เอาต์ประเภท MotionLayout ซึ่งช่วยให้สร้างและแสดงตัวอย่างภาพเคลื่อนไหวได้ง่ายขึ้น

Motion Editor มีอินเทอร์เฟซที่ใช้งานง่ายสำหรับการจัดการองค์ประกอบจากไลบรารี MotionLayout ซึ่งเป็นรากฐานของภาพเคลื่อนไหวในแอป Android หากไม่มี Android Studio การสร้างและแก้ไของค์ประกอบเหล่านี้จะต้อง แก้ไขข้อจำกัดในไฟล์ทรัพยากร XML ด้วยตนเอง อย่างไรก็ตาม โปรแกรมแก้ไขการเคลื่อนไหว สามารถสร้าง XML นี้ให้คุณได้ โดยรองรับสถานะเริ่มต้นและสถานะสิ้นสุด คีย์เฟรม การเปลี่ยนฉาก และไทม์ไลน์

วิธีเริ่มต้นใช้งานเครื่องมือแก้ไขการเคลื่อนไหว

  1. สร้าง ConstraintLayout
  2. คลิกขวาที่ตัวอย่างในเครื่องมือแก้ไขเลย์เอาต์
  3. คลิก Convert to MotionLayout ดังที่แสดงด้านล่าง

หลังจาก Android Studio แปลง ConstraintLayout เป็น MotionLayout แล้ว ระบบจะเพิ่มไฟล์ Motion Scene (ไฟล์ .xml ที่มี _scene ต่อท้ายชื่อไฟล์เลย์เอาต์) ลงในไดเรกทอรีที่มี XML ด้วย

จากนั้น MotionLayout จะกลายเป็นเลย์เอาต์รูท และปรากฏใน UI ของ Motion Editor เลย์เอาต์มีConstraintSetเริ่มต้น ConstraintSetสิ้นสุด และการเปลี่ยนจากจุดเริ่มต้นไปยังจุดสิ้นสุดอยู่แล้ว

คุณสามารถใช้กราฟิกภาพรวมเพื่อเลือก ConstraintSet หรือ Transition และเลือกคอมโพเนนต์ในแผงการเลือก

จากนั้นคุณจะแก้ไขข้อจำกัดและแอตทริบิวต์ของจุดเริ่มต้นหรือจุดสิ้นสุด ConstraintSet ได้ในลักษณะเดียวกับการแก้ไข ConstraintLayout

หากต้องการสร้างองค์ประกอบเพิ่มเติมในกราฟ คุณสามารถใช้ไอคอนการสร้าง เพื่อเพิ่มท่าทาง ConstraintSet, Transition หรือ OnClick/OnSwipe ได้อย่างรวดเร็ว

หากต้องการเพิ่มคีย์เฟรม ให้คลิกลูกศรการเปลี่ยนฉากก่อน

จากนั้นในแผงไทม์ไลน์การเปลี่ยน ให้คลิกที่มุมขวาบน แล้วเลือก KeyPosition

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

นอกจากนี้ คุณยังเพิ่มแฮนเดิล OnClick และ OnSwipe ลงในทรานซิชันในแผงแอตทริบิวต์ได้ด้วย

การดำเนินการนี้จะเปิดกล่องโต้ตอบที่คุณสามารถตั้งค่าแอตทริบิวต์ของการคลิก เช่น คอมโพเนนต์เป้าหมายและทิศทางการลาก

Motion Editor รองรับการแสดงตัวอย่างภาพเคลื่อนไหวบนพื้นผิวการออกแบบ เมื่อเลือกภาพเคลื่อนไหวแล้ว ให้คลิกเล่น เหนือไทม์ไลน์เพื่อดูตัวอย่างภาพเคลื่อนไหว