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

Enjoy your read

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


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

Image from https://airbnb.design/introducing-lottie/


Lottie คือ

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

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 - เพิ่มการตอบโต้เข้าไปได้

Image from https://airbnb.design/introducing-lottie/

สร้างไฟล์ 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 ดาวน์โหลดฟรี Lottieahttps://lottiefiles.com/featurednimation

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