ภาพเคลื่อนไหวสามารถเพิ่มคำแนะนำแบบภาพที่แจ้งให้ผู้ใช้ทราบถึงสิ่งที่เกิดขึ้นในแอป โดยเฉพาะอย่างยิ่งเมื่อ UI เปลี่ยนสถานะ เช่น เมื่อมีการโหลดเนื้อหาใหม่หรือมีการดำเนินการใหม่ๆ นอกจากนี้ ภาพเคลื่อนไหวยังช่วยให้แอปดูสวยงามและมีคุณภาพสูงขึ้น
Android มี API ภาพเคลื่อนไหวที่แตกต่างกันไปตามประเภทของภาพเคลื่อนไหวที่คุณต้องการ เอกสารนี้จะให้ภาพรวมของวิธีต่างๆ ที่คุณสามารถเพิ่มการเคลื่อนไหวลงใน UI
หากต้องการทำความเข้าใจได้ดียิ่งขึ้นว่าควรใช้ภาพเคลื่อนไหวเมื่อใด โปรดดูคู่มือ Material Design เกี่ยวกับการเคลื่อนไหวด้วย
สร้างภาพเคลื่อนไหวบิตแมป
รูปที่ 1 Drawable แบบเคลื่อนไหว
หากต้องการสร้างภาพเคลื่อนไหวของกราฟิกบิตแมป เช่น ไอคอนหรือภาพประกอบ ให้ใช้ API ภาพเคลื่อนไหว Drawable โดยปกติแล้ว ภาพเคลื่อนไหวเหล่านี้จะกำหนดแบบคงที่ด้วยทรัพยากร Drawable แต่คุณยังกำหนดลักษณะการทำงานของภาพเคลื่อนไหวได้ในขณะรันไทม์
ตัวอย่างเช่น วิธีที่ดีในการสื่อสารกับผู้ใช้ว่าการดำเนินการ 2 อย่างมีความเกี่ยวข้องกันคือการสร้างภาพเคลื่อนไหวของปุ่มเล่นที่เปลี่ยนเป็นปุ่มหยุดชั่วคราวเมื่อมีการแตะ
ดูข้อมูลเพิ่มเติมได้ที่ สร้างภาพเคลื่อนไหวของกราฟิก Drawable
สร้างภาพเคลื่อนไหวการแสดงผลและการเคลื่อนไหวของ 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) ขึ้นไป คุณสามารถใช้เฟรมเวิร์กการเปลี่ยนเพื่อสร้างภาพเคลื่อนไหวเมื่อสลับเลย์เอาต์ภายในกิจกรรมหรือ Fragment ปัจจุบัน สิ่งที่คุณต้องทำคือระบุเลย์เอาต์เริ่มต้นและเลย์เอาต์สิ้นสุด รวมถึงประเภทของภาพเคลื่อนไหวที่ต้องการใช้ จากนั้นระบบจะคิดและดำเนินการภาพเคลื่อนไหวระหว่างเลย์เอาต์ 2 แบบ คุณสามารถใช้ฟีเจอร์นี้เพื่อสลับ UI ทั้งหมด หรือเพื่อย้ายหรือแทนที่มุมมองบางส่วนเท่านั้น
ตัวอย่างเช่น เมื่อผู้ใช้แตะรายการเพื่อดูข้อมูลเพิ่มเติม คุณสามารถแทนที่เลย์เอาต์ด้วยรายละเอียดรายการ โดยใช้การเปลี่ยนแบบเดียวกับที่แสดงในรูปที่ 5
เลย์เอาต์เริ่มต้นและเลย์เอาต์สิ้นสุดจะจัดเก็บไว้ใน
Scene แต่โดยปกติแล้วระบบจะกำหนดฉากเริ่มต้น
โดยอัตโนมัติจากเลย์เอาต์ปัจจุบัน คุณสร้าง
Transition เพื่อบอกระบบว่าต้องการภาพเคลื่อนไหวประเภทใด จากนั้นเรียก
TransitionManager.go()
แล้วระบบจะเรียกใช้ภาพเคลื่อนไหวเพื่อสลับเลย์เอาต์
ดูข้อมูลเพิ่มเติมได้ที่สร้างภาพเคลื่อนไหวการเปลี่ยนแปลงเลย์เอาต์โดยใช้การเปลี่ยน ดูโค้ดตัวอย่างได้ที่ BasicTransition .
สร้างภาพเคลื่อนไหวระหว่างกิจกรรม
ใน Android 5.0 (ระดับ API 21) ขึ้นไป คุณยังสร้างภาพเคลื่อนไหวที่เปลี่ยนผ่านระหว่างกิจกรรมได้ด้วย ฟีเจอร์นี้อิงตามเฟรมเวิร์กการเปลี่ยนเดียวกันกับที่อธิบายไว้ในส่วนก่อนหน้า แต่ช่วยให้คุณสร้างภาพเคลื่อนไหวระหว่างเลย์เอาต์ใน กิจกรรมที่แยกกัน
คุณสามารถใช้ภาพเคลื่อนไหวง่ายๆ เช่น การเลื่อนกิจกรรมใหม่จากด้านข้างหรือการเฟดกิจกรรมใหม่ให้ปรากฏขึ้น แต่คุณยังสร้างภาพเคลื่อนไหวที่เปลี่ยนผ่านระหว่างมุมมองที่แชร์ในแต่ละกิจกรรมได้ด้วย ตัวอย่างเช่น เมื่อผู้ใช้แตะรายการเพื่อดูข้อมูลเพิ่มเติม คุณสามารถเปลี่ยนไปใช้กิจกรรมใหม่ด้วยภาพเคลื่อนไหวที่ขยายรายการนั้นอย่างราบรื่นให้เต็มหน้าจอ เช่น ภาพเคลื่อนไหวที่แสดงในรูปที่ 5
เช่นเคย คุณเรียก
startActivity(),
แต่ส่งชุดตัวเลือกที่
ActivityOptions.makeSceneTransitionAnimation()ให้
ชุดตัวเลือกนี้อาจรวมถึงมุมมองที่แชร์ระหว่างกิจกรรมเพื่อให้เฟรมเวิร์กการเปลี่ยนเชื่อมต่อมุมมองเหล่านั้นได้ระหว่างภาพเคลื่อนไหว
ดูแหล่งข้อมูลเพิ่มเติมได้ที่