ภาพเคลื่อนไหวสามารถเพิ่มคิวภาพที่แจ้งให้ผู้ใช้ทราบถึงสิ่งที่เกิดขึ้นในแอป ของคุณ โดยจะมีประโยชน์อย่างยิ่งเมื่อ UI เปลี่ยนสถานะ เช่น เมื่อโหลดเนื้อหาใหม่หรือมีการดำเนินการใหม่ๆ นอกจากนี้ ภาพเคลื่อนไหวยังช่วยให้แอปดูดีขึ้น ซึ่งจะช่วยให้แอปดูและรู้สึกถึงคุณภาพที่สูงขึ้น
Android มี API ภาพเคลื่อนไหวที่แตกต่างกันไปตามประเภทของภาพเคลื่อนไหว ที่คุณต้องการ เอกสารประกอบนี้ให้ภาพรวมของวิธีต่างๆ ที่คุณใช้ เพิ่มการเคลื่อนไหวลงใน UI ได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับเวลาที่ควรใช้ภาพเคลื่อนไหวได้ที่คู่มือ Material Design เกี่ยวกับการเคลื่อนไหว
สร้างภาพเคลื่อนไหวของบิตแมป
รูปที่ 1 Drawable ที่เคลื่อนไหวได้
หากต้องการสร้างภาพเคลื่อนไหวให้กับกราฟิกบิตแมป เช่น ไอคอนหรือภาพประกอบ ให้ใช้ API ภาพเคลื่อนไหวที่วาดได้ โดยปกติแล้ว ภาพเคลื่อนไหวเหล่านี้จะกำหนดแบบคงที่ด้วยทรัพยากร Drawable แต่คุณก็กำหนดลักษณะการทำงานของภาพเคลื่อนไหวได้ในขณะรันไทม์เช่นกัน
เช่น วิธีที่ดีในการสื่อสารกับผู้ใช้ว่าการดำเนินการ 2 อย่างมีความเกี่ยวข้อง คือการเคลื่อนไหวปุ่มเล่นให้เปลี่ยนเป็นปุ่มหยุดชั่วคราวเมื่อมีการ แตะ
ดูข้อมูลเพิ่มเติมได้ที่สร้างภาพเคลื่อนไหวของกราฟิกที่ถอนออกได้
ทำให้การแสดงผลและการเคลื่อนไหวของ UI เคลื่อนไหว
รูปที่ 2 ภาพเคลื่อนไหวที่ละเอียดอ่อนเมื่อกล่องโต้ตอบปรากฏขึ้น และหายไปจะช่วยให้การเปลี่ยนแปลง UI ไม่สะดุด
เมื่อต้องการเปลี่ยนระดับการมองเห็นหรือตำแหน่งของมุมมองในเลย์เอาต์ คุณควรใส่ภาพเคลื่อนไหวเล็กๆ น้อยๆ เพื่อช่วยให้ผู้ใช้เข้าใจว่า UI เปลี่ยนแปลงอย่างไร
หากต้องการย้าย แสดง หรือซ่อนมุมมองภายในเลย์เอาต์ปัจจุบัน คุณสามารถใช้ระบบภาพเคลื่อนไหวของพร็อพเพอร์ตี้ที่แพ็กเกจ android.animation มีให้ ซึ่งพร้อมใช้งานใน Android 3.0
(API ระดับ 11) ขึ้นไป API เหล่านี้จะอัปเดตพร็อพเพอร์ตี้ของออบเจ็กต์ View เป็นระยะเวลาหนึ่ง โดยจะวาดมุมมองใหม่ต่อไปเรื่อยๆ เมื่อพร็อพเพอร์ตี้เปลี่ยนแปลง
เช่น เมื่อเปลี่ยนพร็อพเพอร์ตี้
ตำแหน่ง มุมมองจะเลื่อนไปทั่วหน้าจอ เมื่อคุณเปลี่ยนพร็อพเพอร์ตี้อัลฟ่า
มุมมองจะค่อยๆ ปรากฏขึ้นหรือจางหายไป
หากต้องการสร้างภาพเคลื่อนไหวเหล่านี้ด้วยวิธีที่ง่ายที่สุด ให้เปิดใช้ภาพเคลื่อนไหวในเลย์เอาต์เพื่อให้ระบบใช้ภาพเคลื่อนไหวโดยอัตโนมัติเมื่อคุณเปลี่ยนระดับการมองเห็นของมุมมอง ดูข้อมูลเพิ่มเติมได้ที่สร้างภาพเคลื่อนไหวของการอัปเดตเลย์เอาต์โดยอัตโนมัติ
หากต้องการดูวิธีสร้างภาพเคลื่อนไหวโดยใช้ระบบภาพเคลื่อนไหวของพร็อพเพอร์ตี้ ให้อ่านภาพรวมภาพเคลื่อนไหวของพร็อพเพอร์ตี้ นอกจากนี้ คุณยังดูหน้าต่อไปนี้เพื่อสร้างภาพเคลื่อนไหวทั่วไปได้ด้วย
การเคลื่อนไหวตามหลักฟิสิกส์
รูปที่ 3 ภาพเคลื่อนไหวที่สร้างด้วย ObjectAnimator
รูปที่ 4 ภาพเคลื่อนไหวที่สร้างขึ้นด้วย API ที่อิงตามหลักฟิสิกส์
ใช้ฟิสิกส์ในโลกจริงกับภาพเคลื่อนไหวทุกครั้งที่ทำได้เพื่อให้ภาพเคลื่อนไหวดูสมจริง ตัวอย่างเช่น ผู้ดูแลระบบควรคงโมเมนตัมไว้เมื่อเป้าหมายมีการเปลี่ยนแปลง และทำการเปลี่ยนผ่านอย่างราบรื่นในระหว่างการเปลี่ยนแปลง
ไลบรารีการสนับสนุนของ Android มี API ภาพเคลื่อนไหวตามหลักฟิสิกส์ที่อิงตามกฎของฟิสิกส์เพื่อควบคุมลักษณะการเกิดภาพเคลื่อนไหว เพื่อมอบลักษณะการทำงานเหล่านี้
ภาพเคลื่อนไหวตามหลักฟิสิกส์ที่พบบ่อย 2 แบบมีดังนี้
ภาพเคลื่อนไหวที่ไม่ได้อิงตามหลักฟิสิกส์ เช่น ภาพเคลื่อนไหวที่สร้างด้วย API ของ ObjectAnimator จะค่อนข้างคงที่และมีระยะเวลาที่แน่นอน หากค่าเป้าหมายเปลี่ยนแปลง คุณต้องยกเลิกภาพเคลื่อนไหว ณ เวลาที่ค่าเป้าหมายเปลี่ยนแปลง กำหนดค่าภาพเคลื่อนไหวใหม่โดยใช้ค่าใหม่เป็นค่าเริ่มต้นใหม่ และเพิ่มค่าเป้าหมายใหม่ ในเชิงภาพ กระบวนการนี้
ทำให้ภาพเคลื่อนไหวหยุดกะทันหันและมีการเคลื่อนไหวที่ไม่ต่อเนื่องหลังจากนั้น
ดังแสดงในรูปที่ 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()
ชุดตัวเลือกนี้อาจรวมถึงมุมมองที่แชร์ระหว่าง
กิจกรรม เพื่อให้เฟรมเวิร์กการเปลี่ยนเชื่อมต่อมุมมองเหล่านั้นได้ในระหว่างภาพเคลื่อนไหว
ดูแหล่งข้อมูลเพิ่มเติมได้ที่