By เมื่อก่อน การสร้าง Animation ลงใน iOS, Android และ React Native เป็นอะไรที่ยุ่งยากและกินเวลา ไหนจะต้องมาจัดการ Image File ที่เยอะและใหญ่ แล้วกว่า Developer จะปั้นงานของ Designer ให้ออกมาเป็นรูปเป็นร่างได้นั้น ใช้เวลาเป็นอย่างมาก
ในบทความนี้เราจะมาทำความรู้จักกับ Tool ตัวหนึ่งที่ช่วยให้เราสร้าง Animation ได้ง่ายและรวดเร็ว เพื่อให้แอปของเราน่าใช้งานมากขึ้น (เพราะ นิ่งสงบ ไม่ได้สยบ User เสมอไป)
Table of Contents
รู้จักกับ Lottie
จุดเริ่มต้นของ Lottie เกิดจากการที่ Design Lead ของ Airbnb พยายามทำ Prototype ผ่าน Adobe After Effect แล้วพบว่า Animation และ Transition ต่างๆ ที่ทีมของเขาออกแบบมา ไม่ได้ถูกรวมเข้าไปในแอปของ Airbnb เนื่องจากทีมพัฒนาทำไม่ทัน เขาจึงพยายามหาวิธีที่จะลดเวลาในการนำ Animation จาก After Effect ไปใส่ในแอปพลิเคชันบนมือถือ
เมื่อต้นปีที่ผ่านมา Airbnb ได้เปิดตัวเจ้า Lottie ซึ่งเป็น Library ที่ช่วยให้ Designer สามารถสร้าง Motion Graphic บน After Effect แล้วส่งต่องานเป็นไฟล์ JSON ให้กับทีมพัฒนาได้เลย โดยสามารถนำไปใช้ได้กับแอปพลิเคชันทั้งบน iOS, Android และ React Native
Parts and Pieces
การทำงานทุกครั้งควรแยก Layer ออกให้ชัดเจน การแบ่ง Layer ออกมา จะช่วยทำให้ Object แต่ละชิ้นนั้นเคลื่อนไหวได้อย่างอิสระ โดยแต่ละ Layer ควรมีหนึ่ง Object เพื่อช่วยให้ไฟล์ Animation นั้นเป็นระบบและง่ายต่อการส่งต่องานให้คนอื่น นอกจากนี้เรายังควรคำนึงถึงขนาดไฟล์ของ Animation อีกด้วย เพราะอาจจะทำให้แอปพลิเคชันโหลดช้าได้
ในตัวอย่าง เราสามารถจำแนก Object ออกมาได้ 3 Layers โดยแต่ละ Layer มีการแสดงออกมาในช่วงเวลาที่ Overlap กัน ช่วยสร้างน้ำหนัก และมิติให้กับ Icon
On and Off
ในบางครั้ง Animation ทำหน้าที่เป็น Icon ที่รอการถูก Trigger เช่น ปุ่ม Play-Pause เปิดเสียง-ปิดเสียง เป็นต้น การทำ Transition เราจึงต้องให้ความสำคัญกับ State ก่อนและหลังจากที่ปุ่มถูกกด หาก Animation นั้นขยับเยอะเกินไป อาจจะทำให้ใช้งานยาก ซึ่งใน Material Motion แนะนำไว้ว่าไม่ควรเกิน 400 ms (0.4 วินาที)
credit: salih
ในตัวอย่าง เราจะเห็นว่าช่วงก่อน Trigger จะมีเพียง 3 Layers คือ ลำโพง แล้วก็ Splash เสียงอีกสองวง แต่เมื่อหลัง Trigger แถบเสียงจะถูกซ่อนไปไว้ข้างหลัง แล้ว Layer ที่เป็นขีดคาดจะโผล่ออกมา ซึ่งโดยรวมแล้ว Icon นี้ใช้เพียง 4 Layers เท่านั้นเอง
Characteristics
การสร้างกิริยาเล่าเรื่องจะช่วยเพิ่มเสน่ห์และเอกลักษณ์ให้กับ Animation ยกตัวอย่างเช่น ถ้าผู้ใช้เห็น Icon ดินสอเฉยๆ ผู้ใช้อาจไม่เข้าใจว่าหน้าที่ของ Icon นั้นคืออะไร แต่การมี Action ช่วยทำให้ผู้ใช้เข้าใจมากขึ้นว่าเจ้าปุ่มๆ นี้ ใช้สำหรับการ Edit
credit: salih
จากในตัวอย่าง ช่วง Ease in เราจะเห็นการเริ่มจากดินสอ(Object 1)จากนั้นดินสอก็เริ่มขีดเส้น(Object 2) แล้วเส้นกลายเป็นกระดาษ(Object 3) ในช่วง Ease out ดินสอก็พุ่งเฉียงแนวทะแยง (Object 1) ต่อมากระดาษก็หดตามลง (Object 2) แล้วก็มี ประกาย Splash ปรากฎออกมา(Object 3) แค่การเล่าเรื่องเล็กๆ น้อยๆ ผ่าน 3 Objects ก็สามารถสร้างเอกลักษณ์ให้ Icon ได้แล้ว
Bodymovin ตัวเชื่อม Design สู่ Code
การใช้งาน Bodymovin (credit: http://airbnb.io/lottie/)
Bodymovin คือ Animation Exporter ที่สามารถ Vector Layer ออกมาเป็นไฟล์ JSON ได้ สำหรับ Designer ที่คุ้นเคยกับ After Effect สามารถทำได้โดยติดตั้ง Extension ชื่อ Bodymovin
การ Export ไฟล์ JSON (credit: http://airbnb.io/lottie/)
แล้วก็ Render ออกมาเป็นไฟล์ JSON ได้เลย
อัปโหลด JSON เข้า Lottiefiles (credit: http://airbnb.io/lottie/)
เมื่อได้ออกมาเป็นไฟล์ JSON แล้ว ให้อัปโหลดไฟล์เข้าไปใน Lottiefiles.com
แล้วดาวโหลดแอปชื่อ Lottie Preview แล้วแสกน QR Code ที่อยู่ในเว็บไซต์ จากนั้นก็ Preview ผลงานของตัวเองบนมือถือได้เลย เพียงเท่านี้ก็สามารถตรวจดูผลงาน Animation ของคุณก่อนที่จะส่งต่อให้ Developer ไปพัฒนาต่อ
Preview ใน แอป (credit: http://airbnb.io/lottie/)
Lottie ยังมี Communities ที่สามารถเข้าไปดูตัวอย่างงานหรือเอาผลงานของคุณขึ้นไปแสดงได้อีกด้วย ที่ผมแนะนำหลักๆ ก็จะมี Lottiesfiles, 9 Squares, Motion Corpse, และ Animography
ทิ้งท้ายฝาก Designer
ไฟล์ JSON ที่ส่งต่อให้ Developer นั้น ยังคงต้องทำการ Implement อีกหลายขั้นตอนให้ตัวงานเข้าไปแสดงได้ในแอป Designer ทางที่ดี ควรคลานเข่า เข้าไปปรึกษากับ Developer ก่อนว่า Animation ที่จะแสดงนั้น จะแสดงใน State ไหนบ้าง เริ่มแสดงอย่างไร จบอย่างไรแล้วใช้ระยะเวลาเท่าไหร่
…เพราะบางครั้งความสำคัญของภาพรวมของโปรเจค อาจทำให้ต้องลดพื้นที่ของความสร้างสรรค์ลงบ้างเพื่อให้สำเร็จตามเป้าหมาย…
อ่านบทความก่อนหน้า
อ้างอิง
