ภาพเคลื่อนไหวสามารถเพิ่มสิ่งบอกใบ้ที่เป็นภาพซึ่งแจ้งให้ผู้ใช้ทราบเกี่ยวกับสิ่งที่เกิดขึ้นในแอป โดยเฉพาะอย่างยิ่งเมื่อ 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()
ชุดตัวเลือกนี้อาจรวมถึงมุมมองที่แชร์ระหว่างกิจกรรมต่างๆ เพื่อให้เฟรมเวิร์กการเปลี่ยนภาพเชื่อมต่อระหว่างกิจกรรมเหล่านั้นได้ในระหว่างภาพเคลื่อนไหว
ดูแหล่งข้อมูลเพิ่มเติมได้ที่