แปลง Lottie เป็น GIF
การแปลงไฟล์ JSON แอนิเมชันเวกเตอร์ Lottie เป็น GIF ภาพเคลื่อนไหวแบบราสเตอร์ ช่วยให้กราฟิกที่สร้างด้วยโค้ดสมัยใหม่ใช้งานร่วมกับแพลตฟอร์มต่างๆ ที่รองรับภาพได้อย่างกว้างขวาง
การเปรียบเทียบรูปแบบและข้อกำหนดทางเทคนิค
| ข้อกำหนด | LOTTIE | GIF |
|---|---|---|
| ประเภท MIME | application/ | image/ |
| ประเภท | ไฟล์ JSON แอนิเมชันเวกเตอร์ | แรสเตอร์ |
| การบีบอัด | ไม่มี (การแสดงข้อมูลรูปแบบ JSON) | ไม่สูญเสียคุณภาพ (LZW, สูงสุด 256 สีแบบจัดทำดัชนี) |
| ข้อกำหนดมาตรฐาน | ข้อกำหนดรูปแบบแอนิเมชัน Lottie | CompuServe GIF89a |
| ส่วนหัวที่ระบุลายเซ็นไฟล์ | 7B 22 76 22 3A ({"v": - Lottie JSON version) | 47 49 46 38 37 61 (GIF87a) or 47 49 46 38 39 61 (GIF89a) |
ภาพรวมรูปแบบและการใช้งาน
Lottie เก็บคำสั่งแอนิเมชันเป็น JSON และต้องใช้โปรแกรมเล่นที่รองรับเพื่อแสดงผล ตัวแปลงนี้แปลงแอนิเมชันเป็น GIF แต่การเล่นและฟีเจอร์ขึ้นอยู่กับแอปและอุปกรณ์
ข้อกำหนดทางเทคนิคและรายละเอียดตัวแปลงสัญญาณ
ไฟล์ Lottie (application/json) มีคำสั่งข้อความที่อธิบายรูปร่างเวกเตอร์ จุดยึด (anchor points) และคีย์เฟรม ไม่มีส่วนหัวลายเซ็นไฟล์ (magic byte header) และอาศัยตัววิเคราะห์ข้อความมาตรฐานอย่างสมบูรณ์ ในทางตรงกันข้าม GIF แบบเคลื่อนไหว (image/gif) ใช้รูปแบบไบต์ที่เริ่มต้นด้วยลายเซ็นไฟล์ GIF87a หรือ GIF89a โครงสร้าง GIF ใช้การบีบอัดแบบไม่สูญเสียข้อมูล LZW เพื่อจัดกลุ่มสีพิกเซลที่เหมือนกันลงในพาเลทที่ใช้ร่วมกัน ระหว่างการแปลงจากเวกเตอร์เป็นราสเตอร์ เอ็นจิ้นการเรนเดอร์จะวาดแต่ละเฟรมที่ความละเอียดพิกเซลที่กำหนด จำกัดความลึกของสีทั้งหมดสูงสุด 256 สีต่อเฟรม และเย็บเฟรมเข้าด้วยกันพร้อมส่วนหัวกำหนดเวลา
ความเข้ากันได้ของระบบปฏิบัติการและเบราว์เซอร์
GIF แบบเคลื่อนไหวรองรับอย่างกว้างขวางบน Windows, macOS, Linux, iOS, Android และเว็บเบราว์เซอร์ส่วนใหญ่ จึงเป็นหนึ่งในรูปแบบภาพที่รองรับได้หลากหลายที่สุด ไฟล์ Lottie ต้องใช้ตัวเล่น JavaScript เฉพาะทางหรือไลบรารีรันไทม์แบบเนทีฟเพื่อเรนเดอร์ จึงใช้งานกับองค์ประกอบแท็กภาพมาตรฐานได้จำกัด
เคล็ดลับการใช้งาน
จำกัดระยะเวลาแอนิเมชันและจำนวนสีก่อนส่งออกเป็น GIF การลดอัตราเฟรมจาก 60 เฟรมต่อวินาทีเหลือ 15 เฟรมต่อวินาทีจะช่วยลดขนาดไฟล์สุดท้ายลงได้อย่างมาก
คำถามที่พบบ่อย
จะแปลงแอนิเมชัน Lottie เป็น GIF แบบเคลื่อนไหวโดยไม่สูญเสียคุณภาพได้อย่างไร
เนื่องจาก GIF ถูกจำกัดไว้สูงสุด 256 สีและใช้ตารางพิกเซลแทนเวกเตอร์ทางคณิตศาสตร์ การสูญเสียคุณภาพการมองเห็นบางส่วนจึงเป็นสิ่งที่ไม่สามารถหลีกเลี่ยงได้ คุณสามารถลดการสูญเสียนี้ให้น้อยที่สุดได้โดยใช้อัลกอริทึมการเกลี่ยสี (dithering) คุณภาพสูงในขั้นตอนการแปลงเป็นราสเตอร์เพื่อให้สีผสมผสานกันอย่างราบรื่น
แอนิเมชัน Lottie และ GIF แบบเคลื่อนไหวแตกต่างกันอย่างไร
Lottie เป็นไฟล์ข้อความที่มีพื้นฐานจากเวกเตอร์ซึ่งใช้โค้ดเพื่อวาดรูปร่างในสเกลใดก็ได้ ในขณะที่ GIF แบบเคลื่อนไหวเป็นรูปแบบไบนารีที่มีพื้นฐานจากราสเตอร์ซึ่งประกอบด้วยตารางพิกเซลคงคาร่วมกับพาเลทสีที่จำกัด