ข้อมูลเบื้องต้นเกี่ยวกับภาพเคลื่อนไหว

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

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

Android มี API ภาพเคลื่อนไหวหลายรายการ โดยขึ้นอยู่กับประเภทภาพเคลื่อนไหวที่ต้องการ เอกสารประกอบนี้จะแสดงภาพรวมของวิธีต่างๆ ในการเพิ่มการเคลื่อนไหวไปยัง UI

หากต้องการทําความเข้าใจได้ดียิ่งขึ้นว่าควรใช้ภาพเคลื่อนไหวเมื่อใด โปรดดูคู่มือการออกแบบ Material Design เกี่ยวกับการเคลื่อนไหว

ภาพเคลื่อนไหวบิตแมป

รูปที่ 1 องค์ประกอบที่วาดได้แบบเคลื่อนไหว

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

ตัวอย่างเช่น วิธีที่ดีในการบอกผู้ใช้ว่าการดำเนินการ 2 อย่างมีความเกี่ยวข้องกันคือการทำภาพปุ่มเล่นเคลื่อนไหวให้เปลี่ยนเป็นปุ่มหยุดชั่วคราวเมื่อแตะ

ดูข้อมูลเพิ่มเติมได้ที่สร้างภาพเคลื่อนไหวของกราฟิกที่ถอนออกได้

ทำให้ UI ปรากฏและเคลื่อนไหว

รูปที่ 2 ภาพเคลื่อนไหวเล็กๆ น้อยๆ เมื่อกล่องโต้ตอบปรากฏขึ้น และหายไปจะทำให้การเปลี่ยน UI น่ารำคาญน้อยลง

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

หากต้องการย้าย แสดง หรือซ่อนมุมมองภายในเลย์เอาต์ปัจจุบัน คุณสามารถใช้ระบบภาพเคลื่อนไหวของพร็อพเพอร์ตี้ที่แพ็กเกจ android.animation มีให้ ซึ่งใช้ได้ใน Android 3.0 (API ระดับ 11) ขึ้นไป API เหล่านี้จะอัปเดตพร็อพเพอร์ตี้ของออบเจ็กต์ View ในช่วงเวลาหนึ่ง และจะดึงมุมมองใหม่อย่างต่อเนื่องตามการเปลี่ยนแปลงของพร็อพเพอร์ตี้ เช่น เมื่อคุณเปลี่ยนคุณสมบัติตำแหน่ง มุมมองจะเลื่อนไปทั่วหน้าจอ เมื่อคุณเปลี่ยนพร็อพเพอร์ตี้อัลฟ่า มุมมองจะค่อยๆ ปรากฏขึ้นหรือจางหายไป

วิธีสร้างภาพเคลื่อนไหวเหล่านี้ที่ง่ายที่สุดคือเปิดใช้ภาพเคลื่อนไหวในเลย์เอาต์เพื่อให้ภาพเคลื่อนไหวมีผลโดยอัตโนมัติเมื่อคุณเปลี่ยนระดับการมองเห็นของมุมมอง โปรดดูข้อมูลเพิ่มเติมที่หัวข้อสร้างภาพเคลื่อนไหวของการอัปเดตเลย์เอาต์โดยอัตโนมัติ

หากต้องการดูวิธีสร้างภาพเคลื่อนไหวโดยใช้ระบบภาพเคลื่อนไหวของพร็อพเพอร์ตี้ โปรดอ่านภาพรวมภาพเคลื่อนไหวของพร็อพเพอร์ตี้ นอกจากนี้ คุณยังดูหน้าต่อไปนี้เพื่อสร้างภาพเคลื่อนไหวทั่วไปได้

การเคลื่อนไหวที่อิงตามหลักฟิสิกส์

รูปที่ 3 ภาพเคลื่อนไหวที่สร้างด้วย ObjectAnimator

รูปที่ 4 ภาพเคลื่อนไหวที่สร้างด้วย API อิงตามหลักฟิสิกส์

ใช้ฟิสิกส์ในชีวิตจริงกับภาพเคลื่อนไหวเมื่อเป็นไปได้ เพื่อให้ภาพเคลื่อนไหวดูเป็นธรรมชาติ เช่น ควรรักษาโมเมนตัมเมื่อเป้าหมายมีการเปลี่ยนแปลง และทําการเปลี่ยนแปลงอย่างราบรื่น

ไลบรารีการสนับสนุนของ Android มี API ภาพเคลื่อนไหวที่อิงตามฟิสิกส์ซึ่งใช้กฎของฟิสิกส์เพื่อควบคุมลักษณะการทำงานของภาพเคลื่อนไหว

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

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

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

สร้างภาพเคลื่อนไหวการเปลี่ยนแปลงเลย์เอาต์

รูปที่ 5 ภาพเคลื่อนไหวเพื่อแสดงรายละเอียดเพิ่มเติมทำได้โดยการเปลี่ยนเลย์เอาต์หรือเริ่มกิจกรรมใหม่

ใน Android 4.4 (API ระดับ 19) ขึ้นไป คุณสามารถใช้เฟรมเวิร์กการเปลี่ยนเพื่อสร้างภาพเคลื่อนไหวเมื่อสลับเลย์เอาต์ภายในกิจกรรมหรือส่วนที่เป็นปัจจุบัน คุณเพียงต้องระบุเลย์เอาต์เริ่มต้นและสิ้นสุด รวมถึงประเภทภาพเคลื่อนไหวที่ต้องการใช้ จากนั้นระบบจะคำนวณและแสดงภาพเคลื่อนไหวระหว่างเลย์เอาต์ 2 รูปแบบ คุณสามารถใช้คำสั่งนี้เพื่อเปลี่ยน UI ทั้งหมด หรือเพื่อย้ายหรือแทนที่มุมมองบางรายการ

เช่น เมื่อผู้ใช้แตะรายการเพื่อดูข้อมูลเพิ่มเติม คุณสามารถแทนที่เลย์เอาต์ด้วยรายละเอียดของรายการได้โดยใช้ทรานซิชันดังที่แสดงในรูปที่ 5

ระบบจะจัดเก็บเลย์เอาต์เริ่มต้นและเลย์เอาต์สุดท้ายใน Scene แต่โดยปกติแล้วระบบมักจะกําหนดฉากเริ่มต้นจากเลย์เอาต์ปัจจุบันโดยอัตโนมัติ คุณสร้าง Transition เพื่อบอกระบบว่าต้องการภาพเคลื่อนไหวประเภทใด จากนั้นเรียกใช้ TransitionManager.go() แล้วระบบจะแสดงภาพเคลื่อนไหวเพื่อสลับเลย์เอาต์

ดูข้อมูลเพิ่มเติมได้ที่สร้างภาพเคลื่อนไหวการเปลี่ยนแปลงเลย์เอาต์โดยใช้การเปลี่ยน ดูโค้ดตัวอย่างได้ที่ BasicTransition

สร้างภาพเคลื่อนไหวระหว่างกิจกรรม

ใน Android 5.0 (API ระดับ 21) ขึ้นไป คุณยังสร้างภาพเคลื่อนไหวที่เปลี่ยนระหว่างกิจกรรมต่างๆ ได้ด้วย ข้อมูลนี้อิงตามเฟรมเวิร์กการเปลี่ยนเดียวกันกับที่อธิบายไว้ในส่วนก่อนหน้า แต่ช่วยให้คุณสร้างภาพเคลื่อนไหวระหว่างเลย์เอาต์ในกิจกรรมที่แยกกันได้

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

ตามปกติ คุณจะเรียกใช้ startActivity() แต่ส่งชุดตัวเลือกที่ได้จาก ActivityOptions.makeSceneTransitionAnimation() ชุดตัวเลือกนี้อาจรวมถึงมุมมองที่แชร์ระหว่างกิจกรรมต่างๆ เพื่อให้เฟรมเวิร์กการเปลี่ยนภาพเชื่อมต่อกิจกรรมเหล่านั้นระหว่างภาพเคลื่อนไหวได้

ดูแหล่งข้อมูลเพิ่มเติมได้จากหัวข้อต่อไปนี้