Lottie ไฟล์ ไฟล์ที่ดีไซน์เนอร์ ต้องรู้ !

ถ้าพูดถึงการใช้แอนิเมชันเข้ามาช่วยในงานออกแบบเว็บไซต์ หรือ แอปพลิเคชัน ทุกคนคงคุ้นเคยกับไฟล์ GIF หรือ Animated PNG ที่จะมาพร้อมกับปัญหาพวก ไฟล์ใหญ่บ้าง ขยายแล้วแตกบ้าง แอนิเมชันเล่นไม่เนียนบ้าง ปัญหาเหล่านี้จะถูกแก้ไขได้ด้วยการใช้ไฟล์ Lottie

Lottie คือ

‍Lottie คือไฟล์แอนิเมชันขนาดเล็กที่สามารถย่อหรือขยายได้ในขณะที่ยังคงคุณภาพของความคมชัดเอาไว้ โดยไม่เกิดการ pixelate เพราะตัวมันเองคือไฟล์โค้ด (JASON) ที่เก็บข้อมูลเกี่ยวกับแอนิเมชันเอาไว้ ไม่ว่าจะเป็นรูปทรง สีสัน หรือการเคลื่อนไหวต่าง ๆ

ข้อดีของ Lottie

1. Multi-Platform

สามารถใช้ไฟล์ Lottie บน iOS, Android, เว็บไซท์และ React Native โดยไม่ต้องดัดแปลง

2. Scalability

ย่อขยายได้ ไม่แตก

3. Small File Size

มีขนาดไฟล์ที่เล็ก

4. High Quality Animation

สามารถทำแอนิเมชันที่มีความซับซ้อนได้

5. Interactivity

เพิ่มการตอบโต้เข้าไปได้

‍สร้างไฟล์ Lottie

ถ้าคุณใช้งาน Adobe After Effects เป็น คุณสามารถสร้างไฟล์แอนนิเมชันในนั้นแล้วเอ็กซ์พอร์ทผ่าน LottieFiles Plug-in หรือ Bodymovin ได้เลย และยังมีแอพอื่นๆ ที่สามาระสร้างไฟล์ Lottie ได้เช่น Haiku Animator, Flow, หรือ ProtoPie เป็นต้น

นอกจากนี้ยังมีแพลตฟอร์มคอมมูนิตี้ LottieFiles ที่เป็นศูนย์รวมของ animators, designers, developers และ engineers และ ยังเป็นที่ที่สามารถเข้าไปใช้งาน tools ต่างๆ เพื่อตรวจสอบหรือดัดแปลงไฟล์แอนิเมชันที่เราสร้าง หรือเข้าไป collab หรือ หาแรงบันดาลใจได้ใน market place

สำหรับ Web designer หรือ UI designer ก็สามารถนำไฟล์ Lottie เข้ามาใช้ในงานออกแบบเพื่อเพิ่มความดึงดูดและสร้าง user experience สำหรับผู้ใช้งานให้เจ๋งยิ่งขึ้นได้เป็นทวีคูณ ลองหาแอนิเมชันเก๋ๆ ฟรีๆ มา ทดลองใช้ในงานออกแบบได้เลยจาก marketplace ดาวน์โหลดฟรี