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