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