หลายคนคงเคยเห็น Animation เคลื่อนไหวน่ารักๆ ไม่ว่าจะเป็น icon หรือ แอนิเมชั่นอินโทรแนะนำเว็บไซต์ หรือ app ต่างๆ เมื่อก่อนหลายเว็บได้เลือกใช้ animated GIF เพราะเป็นเหมือนทางเลือกเดียวในการใส่ลูกเล่น animation (หลังจาก Flash ไม่ถูกซัพพอร์ทจาก HTML5 อีกต่อไป) แต่ตอนนี้ไม่แล้วจ้า!!

Lottie เป็นไลบราลี่แบบ Free open source ที่ช่วยเรนเดอร์ไฟล์จาก After Effects โดยผ่านเจ้าปลักอินที่ชื่อว่า “Bodymovin” ที่พัฒนาขึ้นมาแต่แรกเริ่มโดย Hernan Torrisi ซึ่งต่อมาทีมดีไซน์ของ Airbnb ได้นำมาต่อยอดและพัฒนาให้สามารถใช้ได้ทั้ง iOs, Android, React Native รวมถึงเว็บไซต์ทั่วๆไป ซึ่งไฟล์ที่ได้จะเป็น JSON ที่มีขนาดเล็ก และภาพคมชัดเวอร์แบบเวคเตอร์เลยทีเดียว

UI Designer สามารถนำ Lottie มาประยุคต์ใช้เพื่อเพิ่มมูลค่าของงานและเพิ่ม experience ให้กับยูสเซอร์ ในการใช้งานเว็บไซต์ หรือ app ได้เป็นอย่างดี ทั้งนี้ทั้งนั้น การฝึกกระบวนยุทธ์ด้านอนิเมชั่นกับ After Effects และสกิลล์ด้าน Motion Graphic ก็เป็นสิ่งที่ขาดไม่ได้สำหรับดีไซน์เนอร์เช่นกัน งั้นเรามาทดลองทำอนิเมชั่นจาก AE และ export ไฟล์ด้วย BodyMovin ง่ายๆ กันเลย >> Lottie เครื่องมือดีๆ ที่ UI Designer ควรรู้

ตัวอย่าง Lottie Icons จากผู้เขียน Animated Icons Set
ดาวน์โหลด BodyMovin plugin จาก GitHub (รวมถึงการ Control ผ่าน Javascript)
แหล่งโหลดฟรี LottieFiles