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

บอกพิกัดแหล่งรวมแอนิเมชัน! ไม่ง้อไฟล์ GIF หรือ Animated PNG ที่มาพร้อมกับปัญหา ไฟล์ใหญ่บ้าง ขยายแล้วแตกบ้าง แอนิเมชันเล่นไม่เนียนบ้าง


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

Lottie ไฟล์ ไฟล์ที่ดีไซน์เนอร์ ต้องรู้ !
Image from https://airbnb.design/introducing-lottie/

Lottie คือ?

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

Lottie ไฟล์ ไฟล์ที่ดีไซน์เนอร์ ต้องรู้ !
Image from https://lottiefiles.com/what-is-lottie

ข้อดีของ Lottie

1. Multi-Platform

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

2. Scalability

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

3. Small File Size

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

4. High Quality Animation

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

5. Interactivity

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

Lottie ไฟล์ ไฟล์ที่ดีไซน์เนอร์ ต้องรู้ !
Image from https://airbnb.design/introducing-lottie/

สร้างไฟล์ Lottie ได้อย่างไร

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

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

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

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

Writer
Tumavait Vijakkhana
Director of Design & Technology

As a creative agency, we believe in the power of imagination and innovation. We are constantly pushing the boundaries of what is possible, and strive to create work that is not only beautiful and effective, but also meaningful and impactful.

เริ่มโปรเจคร่วมกัน

contact@neumerlin.com
การใช้เว็บไซต์นี้แสดงว่าคุณตกลงที่จะจัดเก็บคุกกี้บนอุปกรณ์ของคุณเพื่อปรับปรุง และ วิเคราะห์การใช้งานของเว็บไซต์ ดู นโยบายความเป็นส่วนตัว ของเราสําหรับข้อมูลเพิ่มเติม Privacy Policy