สร้าง Lottie Animation อย่างไรให้มีประสิทธิภาพ

หลังจากถือกำเนิดมาตั้งแต่ปี 2017 Lottie ก็ได้เปลี่ยนแปลงวิธีการนำโมชั่น (Motion) ไปประกอบในงานพัฒนาซอฟต์แวร์ UI Design อย่างสิ้นเชิง โดย Designer สามารถออกแบบแอนิเมชันด้วยโปรแกรม After Effects แล้ว Export ด้วย Lottie ออกมาเป็นไฟล์ .json เป็นโค้ดให้ทาง Developer นำไปใช้ได้เลย ซึ่งสะดวกกว่าการโยนไฟล์ .gif, .mp4 ที่มีขนาดใหญ่กว่าและความคมชัดน้อยกว่า แถมง่ายกว่าการปล่อยให้ทาง Developer ไปโค้ดการเคลื่อนไหวด้วยตัวเอง

ภาพการทำงานของ Lottie จาก https://lottiefiles.com/

ในขณะนี้ (ปี 2020) ก็ครบรอบ 3 ขวบปีที่ทางไลบรารี่ Lottie ถือกำเนิดขึ้นมา เรามาดูกันดีกว่าว่าจนมาถึงวันนี้ Lottie มีพัฒนาการไปทางไหนบ้าง และเราสามารถสร้างแอนิเมชันด้วย Lottie ให้มีประสิทธิภาพได้อย่างไร

เวลาผ่านไป เครื่องมือใหม่ถือกำเนิด (เย่!)

ช่วงแรกที่ Lottie เปิดตัวออกมา การสร้างไฟล์​ .json จาก After Effects จะใช้ Extension ที่มีชื่อว่า Bodymovin (สร้างโดย Hernan Torrisi ผู้คิดค้น Lottie Format) แต่เมื่อเวลาผ่านไป คอมมิวนิตีของ Lottie เองก็ได้เติบโตขึ้น ประกอบกับการเป็น Open Source ทำให้มีการร่วมกันพัฒนา Extension ตัวใหม่ชื่อว่า LottieFiles ที่มาพร้อมกับหน้าตาที่ใช้งานง่ายขึ้น และความสามารถที่เพิ่มขึ้น

เปรียบเทียบหน้าตา Extension: Bodymovin (ซ้าย) และ LottieFiles (ขวา)

สิ่งที่เป็นฟีเจอร์หลักของ LottieFiles เลยคือการเชื่อมต่อกับแอปพลิเคชันบนอุปกรณ์ iOS และ Android และความสามารถในการ Preview แอนิเมชันที่เพิ่งสร้างเสร็จได้ทันที ทำให้ Designer สามารถเช็คได้ว่าแอนิเมชันที่ทำมาสามารถเล่นบนอุปกรณ์ต่างๆ ได้เรียบร้อยสมบูรณ์หรือไม่

นอกจากนี้ยังมีตัว Render Graph ซึ่งสามารถเช็คได้ว่าแอนิเมชันของเราใช้เวลาเรนเดอร์และใช้ทรัพยากรไปเท่าไหร่ ถ้าหากดูแอนิเมชันตัวนี้บนแอปของ LottieFiles ก็จะบอกเวลาที่ใช้เรนเดอร์ในแต่ละเลเยอร์ของเราได้อีกด้วย ช่วยให้ Designer สามารถสร้างไฟล์แอนิเมชันขนาดกะทัดรัดได้ง่ายขึ้น

Render Graph

แล้วแอนิเมชันแบบไหนที่กินทรัพยากรเครื่องน้อย ?

ตรงส่วนนี้อาจจะต้องอธิบายเชิงเทคนิคเล็กน้อย ผมได้ทดลองสร้างกราฟิกรูปแบบต่างๆ เพื่อนำมาทดสอบปัจจัยที่ส่งผลต่อขนาดของไฟล์​ Lottie และนำมาจัดเรียงปัจจัยที่ส่งผลต่อขนาดรูปจากมากไปน้อยได้ดังนี้

1. การฝังรูป (Embedded Images)
2. จำนวนคีย์เฟรม (Keyframe Counts)
3. จำนวนชิ้นงานกราฟิกและเลเยอร์ (Layer & Elements Counts)
4. การมาสก์และแทร็คแมตต์ (Layer Mask & Track Matte)
5. รูปลักษณ์​ (Appearance)
6. เฟรมเรต (Frame Rate)

การฝังรูป (Embedded Images) — การฝังรูปลงใน Lottie ส่งผลต่อขนาดไฟล์เป็นอย่างมาก โดยจะมีขนาดใหญ่กว่าไฟล์​ .mp4 ที่ทำการย่อขนาดด้วยโปรแกรมแปลงไฟล์ต่างๆ เช่น Handbrake ดังนั้นหากจำเป็นที่จะต้องฝังกราฟิกที่เป็น Bitmap ลงไป การใช้ไฟล์​ .mp4 อาจเป็นทางเลือกที่ดีกว่า เพียงแต่อาจจะได้ไฟล์ที่คุณภาพลดลง

อีกทางหนึ่งที่ช่วยลดขนาด Lottie ที่จำเป็นต้องฝังรูป คือการบีบอัดรูปก่อนนำเข้ามาใช้งาน เช่น การใช้เว็บลดขนาดรูปอย่าง Tinypng, Compresspng เป็นต้น

จำนวนคีย์เฟรม (Keyframe Counts) — จำนวนคีย์เฟรมเป็นอีกหนึ่งปัจจัยที่ส่งผลต่อขนาดไฟล์ แอนิเมชันที่มีจำนวนคีย์เฟรมมากจะมีขนาดใหญ่กว่าแอนิเมชันที่มีคีย์เฟรมจำนวนน้อยอย่างชัดเจน

กราฟิกทางซ้ายมีขนาดใหญ่กว่า (3 kb) เนื่องจากมีจำนวนคีย์เฟรมมากกว่ากราฟิกทางขวา (1.6 kb)

จำนวนชิ้นงานกราฟิกและเลเยอร์ (Layer & Elements Counts) — จำนวนของชิ้นงานกราฟิกและเลเยอร์เป็นปัจจัยที่มีผลต่อขนาดของเลเยอร์ โดยกราฟิกที่มีจำนวนชิ้นและเลเยอร์มากย่อมมีขนาดที่ใหญ่ตามไปด้วย

สิ่งที่น่าสนใจคือการเอา Elements ทุกอย่างยัดไว้ในเลเยอร์เดียว จะมีขนาดเล็กกว่าการแยกแต่ละ Element มาเป็น 1 เลเยอร์ ซึ่งอาจจะขัดใจคนที่ชอบแยกเลเยอร์ไว้ให้เป็นระเบียบได้

วงกลม 4 ชิ้นทางซ้ายมือ อยู่ในเลเยอร์เดียวกัน มีขนาดเล็ก (4 kb) กว่าวงกลม 4 ชิ้นทางขวามือ ที่แต่ละชิ้นถูกแยกไว้เป็น 1 เลเยอร์ (5.3 kb)

การมาสก์และแทร็คแมตต์ (Layer Mask & Track Matte) — การใช้งานมาสก์ทำให้ขนาดเลเยอร์ใหญ่ขึ้นเล็กน้อย ส่วนการใช้แทร็คแมตต์จะทำให้มีขนาดใหญ่มากกว่าการเปิดใช้มาสก์เนื่องจากจะต้องมีการสร้างกราฟิกเพิ่มอีก 1 เลเยอร์

รูปลักษณ์​ (Appearance) — กราฟิกที่มีรูปลักษณ์ต่างกัน เช่น สี (Color), เส้น (Stroke), เกรเดี้ยน (Gradient), ขนาด (Size) ไม่ได้ทำให้ขนาดไฟล์​ Lottie แตกต่างกันอย่างมีนัยสำคัญแต่อย่างใด ปัจจัยเดียวที่ทำให้ขนาดไฟล์​ Lottie มีขนาดใหญ่ขึ้นคือจำนวน Anchor Point ในกราฟิก แต่ก็ต้องมีจำนวน Anchor Point ที่ต่างกันในปริมาณมาก จึงจะทำให้ขนาดไฟล์เพิ่มขึ้นอย่างชัดเจน จากรูปประกอบล่าง กราฟิกทุกตัวมีขนาดเกือบจะเท่ากันหมด (~2 kb) โดยตัวที่ขนาดใหญ่ที่สุดคือดาว 12 แฉก (24 Anchor Points) ซึ่งมีขนาดอยู่ที่ 2.8 kb

เฟรมเรต (Frame Rate) — เฟรมเรตเป็นสิ่งที่บอกว่าแอนิเมชั่นของเราใน 1 วินาที มีการเล่นภาพไปทั้งหมดจำนวนเท่าไหร่ โดยปกติแล้วเฟรมเรตจะมีผลต่อขนาดไฟล์วีดีโอ (ยิ่งสูงไฟล์ยิ่งขนาดใหญ่) แต่จากการทดลองกับ Lottie เฟรมเรตที่เพิ่มขึ้นไม่มีผลกับขนาดไฟล์ เพียงแค่อุปกรณ์ที่สเป็คไม่สูงมากจะรันแอนิเมชันได้ไม่ถึงเฟรมเรทที่เราเซ็ทไว้นั่นเอง

Tips การสร้างแอนิเมชันด้วย Lottie

• เช็ค Supported Features อยู่เสมอ เนื่องจากการสร้าง Lottie จาก After Effects นั้นยังไม่รองรับการใช้ Effects ที่มีในโปรแกรม และบางฟีเจอร์ของโปรแกรม After Effects ก็ไม่สามารถแปลงออกมาเป็นโค้ดได้ อย่างไรก็ดี Lottie ได้มีการอัพเดท Supported Features มาโดยตลอด บางฟีเจอร์ที่ใช้ไม่ได้ในอดีตอาจจะสามารถใช้ได้แล้วในปัจจุบัน ดังนั้น Designer ที่ดูแลด้านโมชั่นควรเช็คฟีเจอร์เหล่านี้ก่อนเริ่มลงมือทำงาน โดยสามารถเช็คได้ที่นี่
• ศึกษาเรื่อง Principles of Animation เมื่อ Effects ในโปรแกรมถูกจำกัดการใช้งาน เหล่า Designer จึงต้องพึ่งพาสกิลเบสิคแอนิเมชัน เพื่อที่จะสร้างงานที่มีการเคลื่อนไหวที่น่าสนใจ และสามารถบรรลุผลของงานออกแบบได้ เบสิคเหล่านี้ได้แก่การปรับกราฟความเร็ว, Eases รวมถึง Principles ต่างๆ เช่น Squash and Stretch, Slow in-Slow out, Timing, Overlapping เป็นต้น
• โหลดงานคนอื่นมาใช้ก็ได้! เพราะบนเว็บของ LottieFiles ให้เหล่า Designer สามารถอัพงานแอนิเมชันของตัวเองให้ผู้อื่นโหลดไปใช้ฟรีได้ด้วย หรือถ้าใครมีงบ สามารถลองเข้าไปเลือกซื้อแอนิเมชันจาก ​Marketplace ซึ่งรวบรวมงานจาก Motion Designer และ Motion Studio ที่ผลิตผลงานคุณภาพสูงเอาไว้

หวังว่าข้อมูลเหล่านี้จะเป็นประโยชน์สำหรับ Designer ทุกคน ขอให้สนุกกับการทำแอนิเมชันครับ

ข้อมูลบางส่วนเรียบเรียงจาก
Bodymovin or LottieFiles for After Effects?
What is a Lottie?

สำหรับชาวเทคคนไหนที่สนใจเรื่องราวดีๆแบบนี้ หรืออยากเรียนรู้เกี่ยวกับ Product ใหม่ๆ ของ KBTG สามารถติดตามรายละเอียดกันได้ที่เว็บไซต์ www.kbtg.tech