Hoạt ảnh web Lottie — Hoạt ảnh nhẹ nâng cao trải nghiệm người dùng như thế nào

Đã được xem xét và xác minh bởi FeiYueh · Lần xác minh gần nhất 2026-08-26

Hoạt ảnh Lottie được lưu trữ dưới định dạng vector JSON, dung lượng tệp thường chỉ bằng một phần mười đến một phần hai mươi so với GIF tương đương, nhưng lại có

Hoạt ảnh Lottie được lưu trữ dưới định dạng vector JSON, dung lượng tệp thường chỉ bằng một phần mười đến một phần hai mươi so với GIF tương đương, nhưng lại có thể giữ độ sắc nét ở mọi độ phân giải, hỗ trợ thu phóng và điều khiển tương tác — đây chính là lý do căn bản khiến nó nhanh chóng trở thành giải pháp chủ đạo cho các vi tương tác trên web sau khi được Airbnb mã nguồn mở vào năm 2017. Nó cho phép hoạt ảnh mà nhà thiết kế hoàn thiện trong After Effects được phát trực tiếp trên trình duyệt với hiệu năng gốc, mà không cần chuyển thành video nặng nề hay GIF bị méo. Lottie là gì: biến hoạt ảnh After Effects thành vector JSON Lottie là một định dạng tệp và thư viện phát mô tả hoạt ảnh vector bằng JSON. Sau khi nhà thiết kế tạo hoạt ảnh trong Adobe After Effects, thông qua plugin Bodymovin , toàn bộ đường dẫn, khung hình chính, biến đổi và mặt nạ của hoạt ảnh được xuất thành một tệp JSON, rồi các thư viện như lottie-web, lottie-react vẽ lại từng khung hình phía trình duyệt. Định dạng này được nhóm kỹ sư Airbnb mã nguồn mở vào năm 2017, và được đặt tên là "Lottie" theo tên con gái của kỹ sư Salih Abdul-Karim , nhằm tri ân nhà tiên phong hoạt ảnh người Đức Lotte Reiniger. Vì nền tảng là vector chứ không phải bitmap, hoạt ảnh Lottie không bị răng cưa hay mờ trên màn hình Retina, màn hình 4K hay ở bất kỳ tỷ lệ thu phóng nào — điều mà GIF và chuỗi khung hình PNG không thể làm được. So với video, điểm khác biệt then chốt của Lottie nằm ở khả năng "điều khiển bằng lập trình". Nhà phát triển có thể dùng JavaScript để điều khiển tiến trình phát, dừng ở một khung hình cụ thể, thay đổi trạng thái hoạt ảnh theo vị trí chuột hay độ sâu cuộn trang, thậm chí thay đổi màu sắc và văn bản một cách động, mà không cần xuất lại tệp. Vì sao nhẹ: những con số thực tế về chênh lệch dung lượng Lợi ích trực tiếp nhất của Lottie là dung lượng tệp nhỏ hơn nhiều so với các định dạng hoạt ảnh truyền thống. Theo "Tệp Lottie nhỏ hơn GIF tương đương tới 96%" (nguồn: LottieFiles chính thức) , một ho

Đã được xem xét và xác minh bởi FeiYueh · Lần xác minh gần nhất 2026-08-26. Independently maintained — not AI-generated boilerplate.