Lottie JSON Previewer - Kiểm Tra Animation JSON

Tính năng nổi bật

• Kiểm tra cú pháp JSON và in nguyên văn thông báo lỗi tại vị trí ký tự sai
• Đọc trường w và h để hiển thị khung nền gốc của animation dưới dạng rộng nhân cao
• Đọc trường fr để hiển thị tốc độ khung hình mà file được xuất ra
• Hiển thị khoảng frame từ điểm vào ip tới điểm ra op của toàn bộ animation
• Tính thời lượng theo giây bằng cách lấy hiệu hai điểm frame chia cho tốc độ khung hình
• Đếm số phần tử trong mảng layers để ước lượng độ phức tạp của file
• Liệt kê từng layer kèm tên gốc và mã loại, layer không đặt tên được đánh dấu riêng
• Nút bật tắt trạng thái lặp trên khung mô phỏng để hình dung animation ở hai trạng thái

File Lottie hỏng thường chỉ lộ ra sau khi đã lên trang thật

Trong quy trình thường gặp, người thiết kế dựng animation trong After Effects, xuất ra một file JSON qua phần mở rộng Bodymovin rồi gửi qua tin nhắn cho lập trình viên. Lập trình viên nhận file, gắn vào giao diện và đẩy lên môi trường thử nghiệm. Đến lúc đó mới phát hiện animation đứng im, chạy nhanh gấp đôi, tràn ra ngoài khung chứa hoặc mất hẳn phần hình ảnh ở giữa. Mỗi vòng phát hiện lỗi như vậy tốn ít nhất một lượt trao đổi qua lại, và người thiết kế phải mở lại dự án gốc để tìm nguyên nhân. Phần lớn những lỗi đó có dấu vết ngay trong chính file JSON, ở những trường mà mắt thường không đọc được vì file đã được nén thành một dòng dài hàng trăm nghìn ký tự. Dán file vào đây mất vài giây và trả về đúng những con số cần đối chiếu trước khi bấm gửi, nên khâu kiểm tra chuyển từ cuối quy trình lên đầu quy trình.

Lợi ích khi sử dụng

• •Biết chính xác khung nền để đặt kích thước hộp chứa trước, tránh animation bị tràn hoặc bị cắt
• •Phát hiện file bị cắt cụt hoặc dán thiếu ngay lập tức thay vì đợi tới lúc nhúng vào trang
• •Có con số thời lượng thật để canh với hiệu ứng cuộn trang hoặc với các bước chuyển cảnh khác
• •Đếm được số lớp nên ước lượng được file có nặng bất thường so với độ phức tạp nhìn thấy hay không
• •Không phải cài thư viện chạy Lottie chỉ để mở thử một file nhận từ người khác
• •Chạy hoàn toàn trong trình duyệt nên nội dung file không rời khỏi máy của bạn

Bốn bước soi một file Lottie trước khi giao đi

1. 1Mở file JSON bằng trình soạn thảo văn bản bất kỳ, chọn toàn bộ nội dung rồi dán vào ô bên trái thay cho đoạn mẫu có sẵn.
2. 2Nhìn ngay sang cột phải: nếu hiện dòng báo lỗi màu đỏ thì file chưa phải JSON hợp lệ, thường do dán thiếu phần đuôi, hãy dán lại toàn bộ.
3. 3Đối chiếu khung nền và tốc độ khung hình với thông số bạn đã đặt trong dự án gốc, hai con số này phải trùng nhau tuyệt đối.
4. 4Đọc thời lượng tính ra giây và so với kịch bản, sau đó lướt danh sách layer để tìm lớp thừa hoặc lớp chưa đặt tên.
5. 5Ghi lại bốn con số này vào tin nhắn gửi kèm file, để người nhận biết animation phải chiếm khung bao nhiêu và chạy trong bao lâu.

Lottie là gì và vì sao một đoạn animation lại nằm trong file JSON

Lottie là cách mô tả một đoạn animation bằng dữ liệu thay vì bằng chuỗi ảnh. Người thiết kế dựng chuyển động trong After Effects, sau đó dùng phần mở rộng Bodymovin để ghi lại toàn bộ hình dạng, đường dẫn vector, màu sắc và các mốc thời gian thành một tệp văn bản theo cấu trúc JSON. Trình duyệt hoặc ứng dụng di động đọc tệp đó rồi vẽ lại từng khung hình theo thời gian thực. Vì là vector nên hình sắc nét ở mọi độ phân giải, phóng to bao nhiêu cũng không vỡ, và dung lượng thường nhỏ hơn nhiều lần so với một đoạn video hay một ảnh động cùng nội dung. Bên trong tệp có vài trường mang tính bắt buộc mà công cụ này đọc trực tiếp: v ghi phiên bản của bộ xuất, w và h là chiều rộng chiều cao của khung nền, fr là số khung hình mỗi giây, ip và op là điểm bắt đầu và điểm kết thúc tính theo số thứ tự khung hình, layers là mảng chứa từng lớp chuyển động, còn assets là nơi để dành cho ảnh và phông chữ đi kèm. Hiểu vai trò của từng trường là điều kiện để đọc được kết quả mà công cụ trả về.

Đọc bốn ô số liệu và công thức tính thời lượng phía sau chúng

Ô đầu tiên ghép hai trường chiều rộng và chiều cao thành khung nền gốc, ví dụ năm trăm mười hai nhân năm trăm mười hai. Đây là kích thước mà người thiết kế đã chọn cho vùng làm việc, và mọi tọa độ bên trong file đều tính theo hệ quy chiếu này. Ô thứ hai là tốc độ khung hình, thường là hai mươi bốn, ba mươi hoặc sáu mươi. Ô thứ ba là khoảng frame, ghi liền hai giá trị điểm vào và điểm ra, ví dụ từ không tới chín mươi. Ô thứ tư đơn giản là số phần tử trong mảng layers. Thời lượng hiển thị bên dưới không có sẵn trong file mà được tính lại: lấy điểm ra trừ điểm vào rồi chia cho tốc độ khung hình, làm tròn hai chữ số thập phân. Với khoảng frame từ không tới chín mươi ở tốc độ ba mươi khung mỗi giây, kết quả là ba giây tròn. Nếu một trong hai trường tốc độ khung hình hoặc điểm ra bị thiếu, ô thời lượng hiện dấu gạch ngang thay vì con số, và đó là tín hiệu file đã bị chỉnh sửa tay hoặc xuất ra từ một công cụ không theo chuẩn.

Bảng mã loại layer và điều cần hỏi lại khi thấy từng loại

Cạnh tên mỗi lớp, công cụ in ra một con số nằm ở trường ty của lớp đó. Con số này là mã loại lớp theo quy ước của định dạng Lottie và mỗi giá trị dẫn tới một mối bận tâm khác nhau. Số không là lớp lồng, tức bên trong nó còn chứa cả một hợp thành riêng, nên số lớp hiển thị ở ô đếm luôn thấp hơn số lớp thực tế đang chạy. Số một là lớp nền màu đặc, thường vô hại nhưng đôi khi là mảng nền trắng mà người thiết kế quên tắt, khiến animation không trong suốt khi đặt lên nền tối. Số hai là lớp ảnh bitmap, đây là loại đáng chú ý nhất vì nó buộc file phải kèm theo dữ liệu ảnh. Số ba là lớp rỗng dùng để điều khiển các lớp khác, không vẽ ra gì cả. Số bốn là lớp hình vector, chiếm đa số trong các file Lottie làm tốt. Số năm là lớp chữ, loại này phụ thuộc vào phông và rất hay hiển thị sai khi máy người xem không có đúng phông đó. Thấy nhiều lớp loại hai và loại năm thì nên hỏi lại người thiết kế trước khi nhúng.

Bốn lỗi hay gặp nhất khi nhận một file Lottie từ người khác

Lỗi thứ nhất là thiếu tài nguyên đi kèm. Khi animation có lớp ảnh, bộ xuất có hai lựa chọn là nhúng ảnh thẳng vào file dưới dạng chuỗi mã hóa, hoặc chỉ ghi đường dẫn tới một thư mục ảnh riêng. Chọn cách thứ hai mà chỉ gửi mỗi file JSON thì trên trang thật sẽ hiện ô trống. Công cụ này không mở mảng assets nên bạn phải tự tìm chữ images hoặc phần đuôi png trong nội dung file để biết, nhưng thấy có lớp mã loại hai trong danh sách là đã đủ cơ sở để hỏi lại. Lỗi thứ hai là tốc độ khung hình không khớp: file xuất ở sáu mươi khung mỗi giây nhưng kịch bản dựng theo ba mươi, kết quả là animation chạy đúng nội dung nhưng nhanh gấp đôi so với ý đồ, và ô thời lượng sẽ phơi bày ngay điều đó. Lỗi thứ ba là file quá nặng do người thiết kế giữ lại các lớp nháp, dùng biểu thức phức tạp hoặc để lại ảnh bitmap độ phân giải cao. Lỗi thứ tư là các lớp mang tên mặc định như Shape Layer 12, khiến người sau không sửa nổi vì không biết lớp nào là lớp nào.

Công cụ này kiểm cái gì, không kiểm cái gì và khác gì các công cụ lân cận

Ranh giới cần nói rõ để bạn không kỳ vọng nhầm. Khung xem trước ở giữa cột phải chỉ là hình tròn mô phỏng, không phải animation của bạn được vẽ lại, vì công cụ cố ý không nạp thư viện chạy Lottie để trang nhẹ và không gửi dữ liệu đi đâu. Công cụ cũng không cân dung lượng theo kilobyte, không mở mảng tài nguyên đi kèm và không kiểm tra tính hợp lệ của từng thuộc tính bên trong lớp. Nó dừng ở mức đọc phần đầu của file và liệt kê lớp. Phân biệt với các công cụ khác trên trang: bộ định dạng JSON chỉ căn lề và tô màu cho một chuỗi JSON bất kỳ mà không hiểu ý nghĩa của trường fr hay op, còn công cụ sinh lược đồ JSON thì suy ra kiểu dữ liệu cho một cấu trúc chung chứ không đọc đúng quy ước của Lottie. Nhóm công cụ hình ảnh thì khác hẳn về đối tượng xử lý: bộ tối ưu SVG làm gọn một hình vector tĩnh, công cụ chuyển ảnh sang SVG dò biên từ ảnh bitmap, còn công cụ tạo ảnh động ghép nhiều khung thành một tệp ảnh. Chỉ trang này đọc đúng cấu trúc riêng của một tệp animation Lottie.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan

• lottie json previewer
• kiểm tra file lottie online
• lottie json là gì
• lottie viewer online
• validate lottie json
• đọc metadata file lottie
• lottie fps là gì
• tính duration lottie
• đếm layer lottie
• bodymovin xuất json
• xuất lottie từ after effects
• lottie không chạy trên web
• lottie thiếu ảnh assets
• giảm dung lượng file lottie
• lottie hay gif chọn cái nào
• animation json cho website
• mã loại layer lottie
• kiểm tra animation trước khi nhúng