2 คะแนน โดย GN⁺ 2025-05-26 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Lottie คือ ฟอร์แมตไฟล์แบบเปิด สำหรับเวกเตอร์กราฟิกแบบแอนิเมชัน ที่ช่วยให้สามารถเล่นแอนิเมชันที่สร้างจาก Adobe After Effects ได้อย่างง่ายดายบนเว็บและมือถือ
  • แอนิเมชันถูกบันทึกใน ฟอร์แมต JSON ซึ่งเก็บองค์ประกอบของแอนิเมชันทั้งหมดไว้ เช่น คีย์เฟรม, easing curve, ข้อมูลเลเยอร์
  • ฟอร์แมตนี้เป็นมาตรฐานแบบเปิดที่มี ความสามารถในการขยาย, ความเป็นอิสระจากความละเอียด, การรองรับการพัฒนา renderer ได้หลากหลาย และ มีบริษัทจำนวนมากนำไปใช้เพื่อยกระดับประสบการณ์ผู้ใช้
  • Lottie Animation Community (LAC) คือ โครงการโอเพนซอร์สไม่แสวงหากำไร ภายใต้ Linux Foundation โดยมีเป้าหมายเพื่อพัฒนาฟอร์แมตนี้ให้เป็นมาตรฐานของอุตสาหกรรม
  • ข้อกำหนดสเปก, เครื่องมือตรวจสอบ, implementation, โรดแมป ฯลฯ ถูกพัฒนาและเผยแพร่โดยชุมชน และดำเนินงานในรูปแบบ โปร่งใสและร่วมมือกัน ที่ทุกคนสามารถเข้าร่วมได้

Lottie คืออะไร

ภาพรวม

  • Lottie คือฟอร์แมตเวกเตอร์แอนิเมชันแบบโอเพนซอร์สที่พัฒนาโดย Hernan Torrisi ในปี 2015
  • สามารถ export แอนิเมชันที่สร้างใน After Effects ออกเป็นไฟล์ Lottie JSON เพื่อเล่นได้บนหลากหลายแพลตฟอร์ม
  • ปัจจุบันเป็น ฟอร์แมตมาตรฐานที่ถูกใช้อย่างแพร่หลาย บนแพลตฟอร์มต่าง ๆ เช่น เว็บ มือถือ และทีวี

คุณสมบัติ

  • ทำงานบนพื้นฐานของเวกเตอร์กราฟิก
    • สร้างจาก รูปทรงเรขาคณิต (เส้น, เส้นโค้ง ฯลฯ) ไม่ใช่พิกเซล จึง แสดงภาพได้คมชัดโดยไม่ขึ้นกับความละเอียด
  • ทวีนิง (Tweening)
    • เป็นวิธีที่ทำการ interpolate การเปลี่ยนแปลงระหว่างคีย์เฟรม ที่แอนิเมเตอร์กำหนดไว้โดยอัตโนมัติ
    • ทำให้สร้าง แอนิเมชันที่ลื่นไหล ได้โดยไม่ต้องทำโมชั่นที่ซับซ้อนด้วยมือทั้งหมด
  • ฟอร์แมตที่อิง JSON
    • เนื่องจากแสดงในรูปแบบ JSON จึง ส่งผ่านเว็บได้ง่าย และสะดวกต่อการแก้ไขด้วยเครื่องมือที่มีอยู่หรือการทำงานอัตโนมัติ
    • เนื่องจากเป็น มาตรฐานแบบเปิด ใครก็สามารถสร้าง implementation ได้ และมีความสามารถในการทำงานร่วมกันสูง
  • ระบบนิเวศที่เติบโตเต็มที่
    • มี ecosystem ที่พร้อมใช้งานอย่างดี ทั้ง player, asset, เครื่องมือสร้าง, ไลบรารี ฯลฯ
    • มีบริษัทจำนวนมากใช้งาน เช่น Airbnb, Google และได้รับการรองรับจากเครื่องมือและเฟรมเวิร์กหลากหลาย

Lottie Animation Community (LAC)

  • เป็น ชุมชนไม่แสวงหากำไรที่ก่อตั้งภายใต้ Linux Foundation เพื่อผลักดันการทำมาตรฐานและการเผยแพร่ของ Lottie
  • มีเป้าหมายเพื่อ ทำให้ฟอร์แมตไฟล์ Lottie กลายเป็นมาตรฐานแอนิเมชันข้ามแพลตฟอร์ม
  • ดำเนินงานภายใต้การกำกับดูแลของ Joint Development Foundation และมุ่งเน้น แนวทางการทำงานร่วมกันแบบเปิด
  • มอบพื้นฐานให้ระบบนิเวศผ่าน เอกสารสเปกที่ชัดเจน, เครื่องมือตรวจสอบ (Validator), รายการ implementation, โรดแมป
  • เป็นโครงสร้างที่ทุกคนสามารถเข้าร่วมและมีส่วนร่วมได้ โดยเน้น ความโปร่งใสและการพัฒนาที่ขับเคลื่อนโดยชุมชน

1 ความคิดเห็น

 
GN⁺ 2025-05-26
ความเห็นจาก Hacker News
  • ทุกครั้งที่ใช้ Lottie ก็ยังรู้สึกค้างคาใจ เพราะไอเดียนั้นเจ๋งมาก และการที่สามารถดึงแอนิเมชันออกมาจากเครื่องมือที่นักแอนิเมเตอร์ใช้อยู่แล้วได้โดยตรงก็น่าสนใจมาก แต่รูปแบบการนำไปใช้งานกลับน่าผิดหวังเกินไป สำหรับงานประเภทนี้ ฟอร์แมตไบนารีที่กะทัดรัดกว่านี้น่าจะเหมาะกว่าเยอะ แต่กลับเก็บก้อนข้อมูลตัวเลขไว้ใน JSON แทน แถม JSON ยังอ้างอิงไฟล์ภายนอกได้อีก ทำให้ของจริงกลายเป็นหลายไฟล์อยู่ในโฟลเดอร์ หรือไม่ก็เอาไฟล์ต่าง ๆ มา inline เป็น base64 ไว้ใน JSON หรือไม่ก็แพ็กทั้งหมดเป็นไฟล์บีบอัดไฟล์เดียว เวลาโหลดบนเว็บก็ต้องดึง SDK ขนาดมหึมาเข้ามาใช้ และแอนิเมชันนี้ก็ต้องโหลดหลายไฟล์แยกกัน หรือไม่ก็เอาไฟล์เดียวไปผ่านพาร์เซอร์หลายรอบในหลายรูปแบบทั้ง JSON, base64, png, lottie, zip ฯลฯ ถ้าใช้ไฟล์ .lottie ก็ต้องใส่ zip decompressor เข้าไปใน JS bundle ด้วย ส่วน .lottie player แยกยังพ่วง wasm blob ขนาด 2MB มาด้วย ซึ่งก็ไม่ค่อยเข้าใจว่าทำไม ในแอปของเราเรื่องนี้ทำให้ต้องเหนื่อยมากกับการลดขนาดแอป โชคดีที่ไม่ได้ใช้ในเส้นทางหลักของระบบเลยยังพอจัดการได้ ต้องทำงานจุกจิกเยอะมากทั้งการ optimize แอนิเมชัน แก้ปัญหา path และ inline แบบ manual จัดการบั๊กที่เวกเตอร์กลายเป็น png ฯลฯ แถมเบราว์เซอร์ก็รับมือกับการเล่นหลายแอนิเมชันพร้อมกันได้ไม่ค่อยดีนัก โดยเฉพาะบนอุปกรณ์สเปกต่ำ ประสิทธิภาพของการทำแอนิเมชันผ่าน JS และ DOM แย่กว่าที่คิดไว้มาก ถ้ามีเวลาทำโปรเจกต์ช่วงสุดสัปดาห์ก็คิดอยู่ว่าอยากลองแปลงมันเป็น SVG sprite ที่ optimize แล้วค่อยเล่นด้วย CSS transition ดูว่าจะดีขึ้นไหม

    • เห็นด้วยมาก และ workflow การ export จาก After Effects ไปเป็น Lottie นี่แย่มากจริง ๆ หลายเลเยอร์และหลายสไตล์ทำงานตอน export ไม่ได้อย่างถูกต้อง เลยต้องอธิบายให้นักออกแบบ motion ฟังทีละอย่างว่าใช้ฟีเจอร์ไหนได้และฟีเจอร์ไหนห้ามใช้ ซึ่งแน่นอนว่านักออกแบบไม่ชอบเท่าไร จริง ๆ แล้วการ render เป็นวิดีโอธรรมดาแล้วค่อยเล่นตาม interaction กลับเบากว่าและใช้แรงน้อยกว่ามากด้วย เคยได้ยินเรื่อง Rive เหมือนกัน และดูเหมือนว่าจะโฟกัสกับการแก้ปัญหาที่ Lottie มีอยู่ แต่ยังไม่ได้ลองใช้เอง ดังนั้นผลลัพธ์อาจแล้วแต่กรณี

    • ที่บริษัทเก่าที่เคยทำงานอยู่ web app bundle มีขนาด 8MB (ถ้าบีบอัดก็ราว 2MB) แล้วพอไล่ดูพบว่าส่วนใหญ่เป็น Lottie library ขนาด 2MB กับแอนิเมชันแค่ 4 ตัว สุดท้ายเลยลบแอนิเมชันออก 2 ตัว และทำที่เหลือเป็น lazy loading พร้อม Lottie ถึงอย่างนั้นก็ยังโน้มน้าวนักออกแบบหรือวิศวกรคนอื่นไม่ได้ว่า bundle 8MB เป็นปัญหาใหญ่แค่ไหน เลยรู้สึกเหมือนแพ้ศึกนี้ไปในที่สุด

    • เห็นด้วยกับประเด็นที่ว่าเบราว์เซอร์รับมือกับการเล่น Lottie หลายตัวพร้อมกันได้ไม่ดี สมัยต้นยุค 2000 ก็มีหน้าเว็บที่ยัดโฆษณา Flash แบบแอนิเมชันเต็มไปหมด แม้จะมีปัญหาเรื่องประสิทธิภาพเหมือนกัน แต่ตอนนั้นก็ยังรันได้บน CPU single-core

    • ในอีกมุมหนึ่ง JSON พอบีบอัดแล้วก็เล็กมาก และยังโหลดเข้า JavaScript VM ได้ค่อนข้างมีประสิทธิภาพด้วย

    • ตอนที่ผมเคยใช้ Lottie ตัวเลือกมีแค่ mp4 กับ Lottie และเมื่อเทียบกับ mp4 แล้ว Lottie เล็กกว่ามาก

  • ชอบแนวคิดของการจัดการแอนิเมชันด้วยฟอร์แมตกลางแบบเปิด แต่ก็เสียดายที่ในทางปฏิบัติฝั่งนักพัฒนาเว็บมักเลือก Lottie ได้ง่ายเกินไป ทั้งที่ถ้าไปศึกษา CSS หรือ SVG animation เพิ่มอีกหน่อย ซึ่งเล็กกว่าและปรับแต่งได้ง่ายกว่ามาก ก็น่าจะดีกว่า เพราะแค่ตัว library/wrapper ของ Lottie ก็เพิ่มมาอีกหลายร้อย KB แล้ว ยังไม่รวมขนาดเพิ่มของแต่ละแอนิเมชันด้วย หน้าเว็บหลักของ Lottie ก็ชอบอวดว่าไฟล์เล็ก แต่เอาไปเทียบแค่กับ GIF หรือ PNG และไม่ยอมเทียบกับ SVG/CSS animation ซึ่งผมไม่ค่อยชอบเท่าไร อย่างไรก็ตาม สำหรับ native mobile app มันก็ดูน่าจะเข้าท่าพอสมควร

    • แก่นสำคัญของ Lottie ไม่ใช่แอนิเมชันง่าย ๆ แบบ CSS transition แต่เป็นแอนิเมชันที่ซับซ้อนและอิสระกว่ามาก คล้ายการ์ตูนสั้น ๆ ดูได้ชัดจากสติกเกอร์เคลื่อนไหวของ Telegram ที่ทำด้วย Lottie (ตัวอย่าง: https://tlgrm.eu/stickers/Princess)

    • จากประสบการณ์จริง Lottie โดดเด่นที่สุดในฐานะ target format จากเครื่องมือสร้างงานออกแบบ โดยเฉพาะ After Effects ซึ่งในบทความที่แนบมาก็พูดถึงจุดนี้ตรง ๆ ว่าเป็นข้อดีดั้งเดิมของ Lottie และตัวฟอร์แมตเอง ไม่มีใครเขียนสิ่งนี้ด้วยมือโดยตรงหรอก ผมเป็นนักพัฒนาแอปมือถือที่เคยจัดการกับแอนิเมชัน Lottie แต่ไม่ได้เป็นคนสร้างเอง

    • ขอเสริมกับคำว่า “ควรไปเรียน CSS หรือ SVG animation เพิ่ม” ว่า Flash ในยุค Web 1.0 นั้นยอดเยี่ยมที่สุด มาตรฐานอย่าง CSS และอย่างอื่นยังไล่ตามประสบการณ์ที่ Flash เคยให้ไว้ไม่ทันเลย Flash เคยเป็นทั้งฟอร์แมตวิดีโอ ฟอร์แมตแอนิเมชัน สภาพแวดล้อมการเขียนโปรแกรม ตัวเล่นวิดีโอ ระบบ UI แบบโต้ตอบ เอนจินเกม เอนจินพัฒนา MMO เครื่องมือทำอินโฟกราฟิก เรียกว่าครบเครื่องมาก ถ้า Adobe เปิดฟอร์แมตกับตัวเล่น มันน่าจะอยู่รอดมาจนถึงทุกวันนี้ เราควรเลิกยึดติดว่า CSS/SVG/HTML/JS คือหนทางเดียว และเมื่อผ่านไป 40 ปีแล้วเรายังเจอปัญหาเดิม ๆ อยู่ ก็น่าจะถึงเวลาลองประดิษฐ์ล้อใหม่อีกครั้ง

    • น่าจะเป็นไปได้ไหมที่จะ compile แอนิเมชัน Lottie ไปเป็น SVG+JS ผมคิดว่าแค่ยังไม่มีเครื่องมือแบบนี้เท่านั้นเอง

    • CSS animation (รวมถึง Web Animations API รุ่นใหม่) ใช้ hardware acceleration ได้ แต่พวกไลบรารีแบบนี้อย่าง Lottie ทำไม่ได้

  • ผมมีประสบการณ์กับทั้ง Lottie และ Rive ในแง่ embedding และ implementation อยู่บ้าง และ Rive ให้ประสบการณ์ที่ดีกว่ามาก ถ้าในอนาคตต้องเลือกระหว่าง Lottie กับ Rive ก็เลยอยากรู้ว่ามีจุดไหนที่ผมอาจมองข้ามไปหรือเปล่า

    • ผมยังไม่เคยใช้ Rive โดยตรง แต่ตามดูแนวโน้มอยู่ และก็น่าสนใจที่นักพัฒนาคนที่สร้าง Lottie ย้ายไปร่วมทีม Rive เมื่อประมาณ 2 ปีก่อน ถ้าต้องประเมินเครื่องมือใหม่ในสายนี้ Rive จะเป็นตัวเลือกที่ผมต้องพิจารณาแน่นอน ในโปรเจกต์ที่ผมทำอยู่ ผมคัดค้าน Lottie อย่างจริงจังเพราะยากจะอธิบายว่าขนาดไฟล์ของมันคุ้มกับแอนิเมชันที่นักออกแบบต้องการอย่างไร ผมก็เคยใช้ SVGator ได้ผลดีเหมือนกัน สิ่งที่น่าอึดอัดคือ Lottie ถูกโฆษณาเกินจริงในหลายที่โดยไม่พูดเรื่องขนาดไฟล์เลย โดยเฉพาะในเครื่องมืออย่าง Webflow หรือในหมู่ influencer สายนี้ ดังนั้นแม้ Lottie จะมีงานที่เหมาะกับมันชัดเจน แต่ผมคิดว่าสำหรับ use case ทั่วไปส่วนใหญ่ยังมีทางเลือกที่ดีกว่า

    • ไม่เคยได้ยินชื่อเครื่องมือ Rive มาก่อน แต่นี่เป็นการค้นพบที่น่าตื่นเต้น เพราะดูเหมือนจะเอาไปใช้กับโปรเจกต์ของผมได้ ข้อมูลแบบนี้แหละที่ทำให้เลิกอ่าน HN ไม่ได้

  • UI library ของบริษัทเราใช้ lottie-web กับ animated component อย่าง spinner, progress bar ฯลฯ แต่พอเข้าไปที่หน้า https://airbnb.io/lottie/#/community-showcase พัดลมในโน้ตบุ๊กบริษัทหมุนหนักเหมือนจะบินได้ เลยอดคิดไม่ได้ว่าถ้าทำด้วย CSS คงไม่เกิดผลกระทบแบบนี้

    • ของที่อยู่ในหน้านั้นทั้งหมดเป็น animated GIF
  • คอนเซปต์ของ Lottie เจ๋งมาก แต่พอใช้งานจริงกลับทำงานด้วยยากมาก Rive เป็นแพลตฟอร์มใหม่ที่พยายามแก้ปัญหาที่เป็นจุดอ่อนของ Lottie โดยเฉพาะการอัปเดตข้อมูลแบบ dynamic ซึ่งใน Lottie แทบจะเป็นไปไม่ได้เลย ถึงอย่างนั้นเราก็เคยทำแอนิเมชันที่อัปเดตข้อมูลแบบ dynamic ด้วย Lottie สำหรับ Valorant Backtrack ของ Tracker.GG (ฟอร์แมตคล้าย Spotify Wrapped) ได้สำเร็จ (เดโม: https://tracker.gg/valorant/backtrack/episode6/00d0aa2d-94d3-49ff-823c-8123f2b62848/eyJtb2RlIjoiY29tcGV0aXRpdmUifQ==/0) วิธีที่ใช้คือเข้าไปแตะเลเยอร์ที่ตั้งชื่อไว้ใน source file (After Effects) โดยตรง และทำให้แต่ละสไลด์เป็นไฟล์ Lottie แยกกันเพื่อจะได้ประกอบ transition ระหว่างสไลด์แบบลื่น ๆ ด้วยมือ เพราะตัว Lottie เองไม่ได้รองรับการเข้าถึงเลเยอร์แบบ dynamic เป็นมาตรฐาน เราเลยต้องใช้ไลบรารีแยกมาควบคุม Lottie instance แล้วสร้าง data control layer ของเราเองทับอีกชั้น ต้องทำงานวนไปมาระหว่างนักออกแบบกับวิศวกรนับครั้งไม่ถ้วน เป็นฟอร์แมตที่ไม่เป็นมิตรต่อการทำงานร่วมกันเลย บางกรณีก็ต้องใช้วิธีเล็งไปที่ property ของเลเยอร์จากค่าเริ่มต้นจริง เช่น สี เป็นต้น ฟอร์แมตนี้จัดการยากมากจริง ๆ ต่อไปอยากลองใช้ Rive ดู

  • เราใช้ Lottie กับแอนิเมชันแบรนด์ของ PBS KIDS มาหลายปีแล้ว เมื่อเทียบกับฟอร์แมตอื่นมันมีข้อดีหลายอย่าง แม้ว่าถ้ามี runtime rendering บนระนาบ 2D มากขึ้นประสิทธิภาพจะตกลง แต่ก็ยังผสานเข้ากับหลาย pipeline ได้ค่อนข้างดี ทั้งเกม แอป และวิดีโอ สำหรับอุปกรณ์หรือแพลตฟอร์มที่สเปกต่ำกว่า เช่น Roku เรามักส่งภาพนิ่งให้แทน ด้วย workflow ที่เชื่อมกับ After Effects นักออกแบบคนเดียวสามารถทำแอนิเมชันแบบวนลูปหนึ่งชิ้น แล้ว export ออกมาได้ทั้ง Lottie/Bodymovin json, Mov (สำหรับออกอากาศ/YouTube) และ SVG (สำหรับเครื่องสเปกต่ำ) Flash หายไปแล้วมันก็เป็นฟอร์แมตทดแทนชั่วคราวที่ดีมาก ตอนนี้เราก็เริ่มใช้ Rive ด้วย และยังนำแอนิเมชัน json เดิมเข้ามาใช้ใน workflow ใหม่ได้ด้วย ผมเคยร่วมงานกับคนสำคัญในวงการนี้อย่าง Mat Groves ของ Pixi และ Matt Karl ของ CloudKid ซึ่งในช่วงเปลี่ยนผ่านจาก Flash ทุกคนต่างก็ลองคนละวิธี ทั้งปลั๊กอิน คณิตศาสตร์ และฟอร์แมต export ความพยายามแต่ละแบบต่างก็มีที่ทางของมัน และด้วยโครงสร้างซอฟต์แวร์ของแอนิเมชันแบบ timeline ปัญหาเรื่องการทำงานข้ามฟอร์แมตก็มีอยู่เสมอ สุดท้ายสิ่งสำคัญคือเลือกเครื่องมือที่เหมาะกับโปรเจกต์ที่สุด

  • เราใช้ lottielab ทำแอนิเมชันสำหรับเว็บไซต์ของเรา (https://resonancy.io) และตัว editor นั้นทำบนพื้นฐานของ SVG ได้ดีมาก เรียกได้ว่าเป็นหนึ่งในเครื่องมือออนไลน์ที่ดีที่สุดโดยรวม ประสบการณ์โดยรวมลื่นไหลมาก แต่ถ้าไม่ export ไปใช้บริการ hosting แบบบีบอัดเฉพาะของ lottielab ขนาดแอนิเมชันจะใหญ่เกินไปจนแทบใช้กับหน้า landing page ไม่ได้เลย บริการ hosting แบบบีบอัดช่วยลดขนาดได้เฉลี่ยราว 400% เลยยอมจ่ายเดือนละ 30 ดอลลาร์สำหรับ hosting นี้ไปก่อน ผมคงต้องหาฟอร์แมตทางเลือก แต่ก็ไม่อยากย้อนกลับไปทำกระบวนการสร้างแอนิเมชันใหม่อีกรอบ จากประสบการณ์ก่อนหน้านี้กับไลบรารีแอนิเมชันบน React การเขียนแอนิเมชันซับซ้อนด้วยตัวเองนั้นยากมาก แต่ใน lottielab สามารถทำสิ่งที่จินตนาการไว้ได้ค่อนข้างง่าย ยังไม่เคยใช้ Rive แต่ตั้งใจว่าจะลอง และอยากได้คำแนะนำเรื่องเครื่องมือหรือไลบรารีภายนอกที่ช่วยบีบอัดฟอร์แมต Lottie ได้ดี

  • ผมไม่ค่อยเข้าใจว่า SWF มีปัญหาอะไร สเปกก็เปิดเผยและมีประสิทธิภาพมาก ถ้ากังวลเรื่องความปลอดภัยมากนัก ก็อาจ implement เฉพาะส่วนที่ไม่มีความสามารถระดับ Turing-complete ก็ยังได้ ผมเห็นด้วยกับคอมเมนต์ข้าง ๆ ที่บอกว่ามันก็เป็นแค่ JSON อีกฟอร์แมตหนึ่งเท่านั้นเอง รู้สึกเหมือนนักพัฒนารุ่นหนึ่งที่ชินกับสภาพแวดล้อมเว็บที่ไม่มีประสิทธิภาพไปแล้ว จนลืมแนวคิดเรื่องประสิทธิภาพไปเสียเอง

  • สงสัยว่า SOTA ของการสร้าง animated vector graphics ในทุกวันนี้คืออะไร LLM ยังวาด SVG path ให้สวยงามในเชิงสุนทรียะไม่ได้ และโมเดลภาพแบบ diffusion ก็รองรับแต่ bitmap เท่านั้น ความต้องการของ Illustrator ที่ผสานกับ generative AI และ After Effects นั้นสูงมาก เลยหวังว่าจะมีใครทำอะไรที่พลิกวงการออกมา

  • ปัญหาของ Rive (บริการคู่แข่ง) คือในมุมมองด้านศิลปะมันไม่ค่อยใช้งานได้อย่างเป็นธรรมชาติ ไม่สามารถวาดโดยตรงด้วยเครื่องมืออย่าง pen หรือ blob ได้ และต้องทำตาม workflow เฉพาะของมันเองเป็นหลัก ซึ่งส่วนใหญ่คือ import SVG เข้ามา จึงห่างจาก UI ที่ใช้งานง่ายแบบ Flash อยู่พอสมควร แน่นอนว่ามันมีฟีเจอร์น่าสนใจหลายอย่าง แต่ก็ยังไม่ใช่สภาพแวดล้อมที่ง่ายและเป็นธรรมชาติเท่า Flash

    • รองรับภาพ raster (bitmap) เป็นชนิดข้อมูลนำเข้าได้ด้วย