Lottie là một định dạng mở cho đồ họa vector động

 (lottie.github.io)
2 điểm bởi GN⁺ 2025-05-26 | 1 bình luận | Chia sẻ qua WhatsApp
  • Lottie là một định dạng tệp mở dành cho hoạt ảnh đồ họa vector, cho phép phát dễ dàng các hoạt ảnh được tạo bằng Adobe After Effects trên web và thiết bị di động
  • Hoạt ảnh được lưu dưới định dạng JSON, chứa mọi thành phần của hoạt ảnh như keyframe, đường cong easing, thông tin layer
  • Định dạng này là một tiêu chuẩn mở với các đặc điểm như khả năng mở rộng, độc lập độ phân giải, nhiều cách triển khai renderer và hiện đang được rất nhiều công ty sử dụng để nâng cao trải nghiệm người dùng
  • Lottie Animation Community (LAC) là một dự án mã nguồn mở phi lợi nhuận trực thuộc Linux Foundation, với mục tiêu phát triển định dạng này thành một tiêu chuẩn của ngành
  • Đặc tả spec, công cụ kiểm chứng, các bản triển khai, lộ trình đều được cộng đồng phát triển và công bố, vận hành theo một cấu trúc minh bạch và hợp tác mà bất kỳ ai cũng có thể tham gia

Lottie là gì

Tổng quan

  • Lottie là một định dạng hoạt ảnh vector mã nguồn mở được Hernan Torrisi phát triển vào năm 2015
  • Có thể xuất các hoạt ảnh tạo bằng After Effects thành tệp Lottie JSON để phát trên nhiều nền tảng khác nhau
  • Hiện nay, đây là một định dạng tiêu chuẩn được sử dụng rộng rãi trên nhiều nền tảng như web, di động, TV

Đặc điểm

  • Dựa trên đồ họa vector
    • Được cấu thành từ các hình học (đường thẳng, đường cong, v.v.) thay vì pixel, nên có thể hiển thị hình ảnh sắc nét bất kể độ phân giải
  • Tweening
    • Là cách tự động nội suy (interpolate) sự thay đổi giữa các keyframe do animator xác định
    • Có thể tạo ra chuyển động mượt mà mà không cần dựng thủ công các motion phức tạp
  • Định dạng dựa trên JSON
    • Vì được biểu diễn bằng JSON nên dễ truyền tải trên web, dễ chỉnh sửa bằng các công cụ hiện có hoặc xử lý tự động
    • Vì là tiêu chuẩn mở, bất kỳ ai cũng có thể tạo bản triển khai, và khả năng tương tác rất tốt
  • Hệ sinh thái trưởng thành
    • Có một ecosystem được xây dựng đầy đủ gồm player, asset, công cụ tạo, thư viện, v.v.
    • Được nhiều công ty như Airbnb, Google sử dụng, và được hỗ trợ trong nhiều công cụ và framework khác nhau

Lottie Animation Community (LAC)

  • Là một cộng đồng phi lợi nhuận được thành lập dưới Linux Foundation nhằm tiêu chuẩn hóa và phổ biến Lottie
  • Mục tiêu là thiết lập định dạng tệp Lottie thành tiêu chuẩn hoạt ảnh đa nền tảng
  • Hoạt động dưới cơ chế quản trị của Joint Development Foundation và theo đuổi cách hợp tác mở
  • Cung cấp nền tảng cho hệ sinh thái thông qua tài liệu đặc tả rõ ràng, công cụ kiểm chứng (Validator), danh sách bản triển khai, lộ trình
  • Với cấu trúc mà bất kỳ ai cũng có thể tham gia và đóng góp, cộng đồng nhấn mạnh tính minh bạch và sự phát triển do cộng đồng dẫn dắt

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-05-26
Ý kiến trên Hacker News

  • Mỗi lần dùng Lottie tôi đều thấy tiếc nuối, vì ý tưởng thì thực sự rất hay, và việc có thể xuất thẳng animation từ những công cụ mà animator vốn đã dùng là một điểm rất hấp dẫn, nhưng cách triển khai thì quá thất vọng. Trong lĩnh vực này, một định dạng nhị phân gọn hơn nhiều sẽ phù hợp hơn, vậy mà họ lại cố lưu cả đống dữ liệu số dưới dạng JSON. Thêm nữa, JSON có thể tham chiếu đến file bên ngoài, nên trên thực tế hoặc là có nhiều file nằm trong một thư mục, hoặc file được inline vào JSON bằng base64, hoặc toàn bộ được đóng gói thành một file nén. Khi tải trên web, bạn phải kéo theo một SDK dung lượng khổng lồ, và animation này либо phải tải nhiều file riêng lẻ, либо phải xử lý một file duy nhất qua nhiều parser khác nhau (JSON, base64, png, lottie, zip, v.v.). Nếu dùng file .lottie thì còn phải nhét cả zip decompressor vào JS bundle, còn trình phát .lottie riêng thì lại kèm theo một blob wasm 2MB, mà tôi cũng không hiểu vì sao. Trong ứng dụng của chúng tôi, chuyện này khiến cả đội khổ sở để cắt giảm dung lượng app, và may là nó không nằm trên luồng cốt lõi nên cuối cùng mới tạm dọn dẹp được đến mức này. Chúng tôi đã phải làm đủ thứ việc chân tay như tối ưu animation, sửa thủ công vấn đề đường dẫn và inline, xử lý lỗi vector bị biến thành png, v.v. Chưa kể trình duyệt không chịu nổi khi phát nhiều animation cùng lúc (đặc biệt trên thiết bị cấu hình thấp), và hiệu suất xử lý animation bằng JS và DOM tệ hơn tôi tưởng rất nhiều. Nếu có thời gian làm project cuối tuần, tôi muốn thử xem liệu chuyển nó thành sprite SVG tối ưu rồi phát bằng CSS transition có khá hơn không

    • Hoàn toàn đồng cảm, và quy trình xuất từ After Effects sang Lottie đặc biệt kinh khủng. Nhiều layer và style không hoạt động đúng khi export, nên phải giải thích cho motion designer từng thứ là tính năng nào được dùng, tính năng nào không được dùng, mà rõ ràng các designer không thích điều đó. Thực tế thì chỉ cần render thành video rồi phát theo tương tác còn nhẹ hơn nhiều và tốn ít công hơn. Tôi cũng từng nghe về Rive, và có vẻ nó tập trung vào việc khắc phục các vấn đề của Lottie. Tuy vậy tôi chưa trực tiếp dùng nên kết quả có thể còn tùy trường hợp

    • Ở công ty cũ, webapp bundle có kích thước 8MB (nén lại khoảng 2MB), và khi soi ra thì phần lớn là thư viện Lottie (2MB) cùng chỉ bốn animation. Chúng tôi bỏ hai animation, còn hai cái còn lại thì chuyển sang lazy loading cùng Lottie. Dù vậy tôi vẫn không thuyết phục được designer hay các dev khác rằng bundle 8MB là một vấn đề lớn đến mức nào, nên cảm giác như cuối cùng mình đã thua trận này

    • Tôi đồng ý với ý là trình duyệt không chịu nổi khi phát nhiều animation Lottie cùng lúc. Đầu những năm 2000 cũng có vô số trang web nhồi đầy quảng cáo Flash động, và dù khi đó cũng có vấn đề hiệu năng, chúng vẫn chạy được trên CPU đơn nhân thời đó

    • Mặt khác, định dạng JSON khi nén lại thì rất nhỏ, và cũng khá hiệu quả khi nạp vào máy ảo JavaScript

    • Khi tôi dùng Lottie, lựa chọn là giữa mp4 và Lottie. So với mp4 thì Lottie nhỏ hơn rất nhiều

  • Tôi thích cách quản lý animation bằng một định dạng mở và dùng chung. Nhưng điều đáng tiếc là trong thực tế, các web developer lại quá dễ dàng chọn Lottie (chỉ riêng thư viện/wrapper đã thêm vài trăm KB, chưa kể dung lượng tăng thêm theo từng animation) thay vì học kỹ hơn CSS hay SVG animation, vốn nhỏ hơn nhiều và dễ tinh chỉnh hơn. Tôi cũng không thích việc trang chính của Lottie khoe file nhỏ, nhưng chỉ đem so với GIF hay PNG chứ không so với animation SVG/CSS. Dù vậy, trên ứng dụng mobile native thì có vẻ nó khá hợp

    • Ý nghĩa cốt lõi của Lottie không nằm ở các animation đơn giản như CSS transition, mà là ở những animation phức tạp và tự do hơn nhiều, kiểu như một đoạn phim hoạt hình nhỏ. Chỉ cần nhìn các sticker động làm bằng Lottie trên Telegram (ví dụ: https://tlgrm.eu/stickers/Princess) là thấy rõ

    • Theo trải nghiệm thực tế, nơi Lottie phát huy rõ nhất là khi làm định dạng đích cho các công cụ thiết kế, đặc biệt là After Effects. Bài viết đính kèm cũng nhắc đúng điểm này như là ưu thế gốc của Lottie và định dạng file của nó. Không ai tự tay viết thứ này cả. Tôi là dev ứng dụng mobile và từng xử lý animation Lottie, nhưng không phải người trực tiếp tạo ra chúng

    • Nói thêm về ý “nên học CSS hay SVG animation nhiều hơn”, thì Flash của thời Web 1.0 đúng là đỉnh nhất. CSS và các tiêu chuẩn khác đến giờ vẫn chưa thực sự bắt kịp trải nghiệm mà Flash từng mang lại. Flash là định dạng video, định dạng animation, môi trường lập trình, trình phát video, hệ thống UI tương tác, game engine, engine phát triển MMO, công cụ làm infographic, gần như làm được mọi thứ. Nếu Adobe mở định dạng và player thì có lẽ nó đã sống đến tận bây giờ. Cần phải phá bỏ định kiến rằng CSS/SVG/HTML/JS là con đường duy nhất, và việc sau 40 năm mà chúng ta vẫn gặp những vấn đề tương tự cho thấy có lẽ cần thử phát minh lại bánh xe một lần nữa

    • Có lẽ cũng có thể biên dịch animation Lottie sang SVG+JS chứ? Có cảm giác là chỉ vì chưa có công cụ làm việc đó thôi

    • CSS animation (và Web Animations API hiện đại) có thể tận dụng tăng tốc phần cứng, còn những thư viện như Lottie thì không

  • Tôi có chút kinh nghiệm tối thiểu về cả Lottie lẫn Rive ở góc độ nhúng và triển khai, và Rive cho trải nghiệm tốt hơn hẳn. Nếu sau này lại phải chọn giữa Lottie và Rive, tôi muốn biết liệu có điểm gì mình đã bỏ sót không

    • Tôi chưa trực tiếp dùng Rive nhưng vẫn đang theo dõi. Điều thú vị là người tạo ra Lottie đã gia nhập đội Rive khoảng hai năm trước. Khi đánh giá công cụ mới trong mảng này, tôi chắc chắn sẽ cân nhắc Rive. Ở các dự án tôi tham gia, tôi đã phản đối khá mạnh vì khó có thể biện minh cho kích thước file của Lottie so với loại animation mà designer mong muốn. Tôi cũng từng dùng SVGator khá thành công. Việc Lottie bị quảng bá quá mức ở rất nhiều nơi mà không hề nhắc đến kích thước file — đặc biệt qua các công cụ như Webflow hay các influencer trong ngành — cũng khiến tôi bực mình, nên dù chắc chắn có những trường hợp Lottie rất phù hợp, tôi nghĩ với phần lớn nhu cầu phổ thông vẫn có lựa chọn tốt hơn

    • Tôi chưa từng nghe về công cụ Rive, nhưng có vẻ đây là một phát hiện rất đáng hào hứng vì nó có thể áp dụng cho dự án của tôi. Chính những thông tin kiểu này khiến tôi không thể dứt HN được

  • Thư viện UI của công ty tôi dùng lottie-web cho các animated component (spinner, progress bar, v.v.). Nhưng cứ ghé vào trang https://airbnb.io/lottie/#/community-showcase là quạt laptop công ty quay như điên. Tôi nghĩ nếu làm bằng CSS thì chắc đã không bị như vậy

    • Những thứ trên trang đó đều là GIF động cả

  • Ý tưởng của Lottie thực sự rất hay, nhưng khi bắt tay vào dùng thì cực kỳ khó làm việc. Rive là một nền tảng mới đang cố giải quyết những vấn đề mà Lottie gặp phải. Đặc biệt, việc cập nhật dữ liệu động gần như là bất khả thi với Lottie. Dù vậy, chúng tôi vẫn dùng Lottie để triển khai animation có cập nhật dữ liệu động cho Valorant Backtrack của Tracker.GG (định dạng tương tự Spotify Wrapped) (demo: https://tracker.gg/valorant/backtrack/episode6/00d0aa2d-94d3-49ff-823c-8123f2b62848/eyJtb2RlIjoiY29tcGV0aXRpdmUifQ==/0). Để làm được điều đó, chúng tôi truy cập trực tiếp các layer được đặt tên trong file nguồn (After Effects), và để mỗi slide là một file Lottie riêng rồi tự tay dựng chuyển cảnh mượt giữa các slide. Bản thân Lottie không hỗ trợ sẵn việc truy cập layer động, nên chúng tôi phải tạo một thư viện riêng để điều khiển các instance Lottie, rồi xây thêm một lớp điều khiển dữ liệu của riêng mình bên trên. Việc này đòi hỏi vô số vòng lặp giữa designer và engineer, và là một định dạng rất bất lợi cho cộng tác. Trong vài trường hợp, chúng tôi còn phải dùng mẹo nhắm vào thuộc tính layer thông qua giá trị mặc định thực tế của nó (ví dụ: màu sắc). Bản thân định dạng này thực sự rất khó làm việc. Lần tới tôi muốn thử dùng Rive

  • Chúng tôi đã dùng Lottie nhiều năm cho animation thương hiệu PBS KIDS. So với các định dạng khác, nó có nhiều ưu điểm, và dù hiệu năng sẽ giảm khi tăng render runtime trên mặt phẳng 2D, nó vẫn tích hợp khá ổn vào nhiều pipeline khác nhau (game, app, video). Với các thiết bị/nền tảng tương đối yếu (như Roku), chúng tôi thường thay thế bằng hình tĩnh. Nhờ workflow với After Effects, một designer có thể làm animation lặp, rồi xuất đồng thời Lottie/Bodymovin json, Mov (cho broadcast/YouTube), và SVG (cho thiết bị yếu). Sau thời Flash, đây từng là một định dạng thay thế tạm thời rất tốt. Giờ chúng tôi cũng dùng Rive, và còn có thể đưa các animation json cũ vào workflow mới. Tôi từng cộng tác với những nhân vật cốt lõi trong mảng này (như Mat Groves của Pixi, Matt Karl của CloudKid, v.v.), và trong thời kỳ chuyển đổi khỏi Flash, ai cũng thử những cách riêng, plugin riêng, toán học riêng và định dạng xuất riêng. Mỗi nỗ lực như vậy đều có chỗ đứng riêng, và do cấu trúc phần mềm của animation dựa trên timeline, vấn đề tương tác giữa các định dạng luôn tồn tại. Cuối cùng, điều quan trọng là chọn công cụ phù hợp nhất với dự án

  • Chúng tôi đã dùng lottielab để tạo animation cho trang của mình (https://resonancy.io), và editor thực sự được xây rất tốt theo hướng dựa trên SVG, có lẽ là tốt nhất trong số các công cụ online. Nhìn chung trải nghiệm rất mượt. Tuy nhiên, nếu không xuất qua dịch vụ hosting nén độc quyền của lottielab thì dung lượng animation quá lớn, gần như khó dùng cho landing page. Hosting nén này giúp giảm dung lượng trung bình khoảng 400%, nên cuối cùng chúng tôi trả 30 USD/tháng để host. Tôi sẽ tìm định dạng thay thế, nhưng không muốn lặp lại cả quá trình tạo animation nữa. Từ kinh nghiệm trước đây khi dùng các thư viện animation dựa trên React, việc tự code các animation phức tạp là rất vất vả, còn với lottielab thì có thể làm ra thứ mình hình dung một cách tương đối dễ dàng. Tôi chưa dùng Rive nhưng có kế hoạch thử. Nếu ai có thể gợi ý công cụ hay thư viện bên ngoài để nén tốt định dạng Lottie thì tôi rất muốn biết

  • Tôi không hiểu vì sao SWF lại bị xem là có vấn đề. Đặc tả cũng đã công khai, và nó rất hiệu quả. Nếu quá lo về bảo mật thì vẫn có thể triển khai mà bỏ đi các tính năng cao cấp có tính Turing-complete. Tôi đồng ý với bình luận cùng nhánh rằng đây “chỉ là một định dạng JSON khác”. Có cảm giác như cả một thế hệ dev đã ngấm vào môi trường web kém hiệu quả đến mức quên mất khái niệm hiệu quả là gì

  • Tôi tò mò không biết SOTA hiện nay cho việc tạo animated vector graphics là gì. LLM không giỏi vẽ các đường SVG sao cho đẹp mắt, còn các mô hình ảnh dựa trên diffusion thì chỉ hỗ trợ bitmap. Có nhu cầu lớn cho một Illustrator tích hợp generative AI kết hợp với After Effects, và tôi hy vọng sẽ có ai đó tạo ra một bước đột phá

  • Vấn đề của Rive (dịch vụ cạnh tranh) là từ góc độ nghệ thuật, nó kém trực quan hơn. Bạn không thể trực tiếp vẽ bằng bút hay công cụ blob, và phải đi theo một workflow nhất định (chủ yếu là import SVG), nên khá xa với kiểu UI trực quan như Flash. Tất nhiên nó có nhiều tính năng thú vị, nhưng không phải môi trường dễ dùng và trực quan như Flash

    • Nó cũng hỗ trợ ảnh raster (bitmap) như một kiểu đầu vào