Lottie animation

Lottie là một công cụ giúp đóng gói animation thành file để chia sẻ, sử dụng trên đa nền tảng. Tương tự như cách chúng ta chia sẻ một file ảnh hoặc file video. Ở bài viết này, chúng ta sẽ tìm hiểu qua về Lottie, các ứng dụng trên website và cách sử dụng.

Hầu hết các ảnh minh hoạ trên website Perxel đều sử dụng artwork từ nhiều tác giả trên LottieFiles, sau đó tuỳ biến màu sắc để tương đồng với nhận diện thương hiệu của Perxel. Perxel cũng dùng Lottie cho website của khách hàng, cả WordPress lẫn Next.js.

Lottie là gì

Lottie là một định dạng animation do Airbnb phát triển. Designer làm animation trong After Effects rồi xuất ra file Lottie, hoặc chọn file có sẵn trên thư viện LottieFiles. File này mô tả hình vector và chuyển động của chúng, trình duyệt đọc file và vẽ lại animation.

Vì là vector nên animation render sắc nét ở mọi kích thước màn hình. Vì là file chứa dữ liệu chứ không phải điểm ảnh cố định nên sau khi xuất file vẫn đổi được màu sắc, điều khiển tốc độ và timeline, tương tự như một video, nhưng nhẹ và sắc nét hơn.

Ví dụ, file Lottie tên lửa trên trang chủ Perxel chỉ nặng 26 KB. Dữ liệu JSON bên trong file nặng 283 KB, định dạng .lottie đã nén lại còn chưa tới một phần mười. Khi bàn giao, designer nên gửi file .lottie thay vì .json.

Chọn file Lottie cho design

Trước khi chọn file Lottie cho design, designer nên xem vài điều sau:

• Chọn hình vector phẳng. Một số file Lottie nhúng ảnh PNG bên trong. Loại này nặng hơn, mờ khi phóng to và khó đổi màu. Trong 22 file Lottie trên website Perxel, chỉ có 1 file như vậy.
• Màu solid dễ đổi hơn gradient. Màu solid có thể được sửa thẳng trong file. Gradient thường cần phải xem lại After Effects hoặc trình chỉnh sửa của LottieFiles.
• Xem trước animation sẽ được đặt trên nền màu gì. Một hình đẹp trên nền trắng có thể bị chìm khi đặt trên nền màu brand. Website Perxel có một bản màu sáng riêng cho các card nền xanh.
• Muốn animation chạy lặp lại liên tục thì frame đầu và frame cuối phải khớp nhau. Nếu không, mỗi vòng lặp sẽ có một cú giật.

Đổi màu theo brand

File tải từ LottieFiles có thể do nhiều tác giả vẽ nên, do đó mỗi file sẽ có một bộ màu riêng biệt. Khi đặt cạnh nhau nhìn sẽ không đồng bộ. Perxel đổi toàn bộ màu của từng file về một bảng màu chung: dải xanh của brand, các màu trung tính ấm và tối đa một màu cam làm điểm nhấn, như lửa tên lửa hay tia sáng.

Bảng màu được chia theo vai trò: màu cho nét viền, màu cho mặt sáng và mặt tối của vật màu xanh, màu cho nền, màu cho điểm nhấn. Mỗi màu trong file gốc được gán vào một vai trò, rồi thay mã màu ngay trong file. Không cần mở lại After Effects, và gần 20 hình từ nhiều tác giả khác nhau trên Perxel đều thống nhất một bảng màu với nhau.

Nếu dự án có bảng màu riêng cho illustration, designer nên gửi kèm khi bàn giao để developer đổi màu đúng ngay từ đầu, không phải đoán.

Góc vọc vạch

File Lottie có thể được điều khiển tự do như một đoạn video, điều đặc biệt là chúng ta có thể đổi màu của video này. Thử vọc các chức năng dưới đây nhé.

Chế độ chạy:

• Chạy khi scroll: animation chạy khi xuất hiện trên màn hình và dừng lại khi scroll qua. Hợp với ảnh minh hoạ trong các section.
• Chạy khi hover: chỉ chạy khi rê chuột vào. Hợp với card và icon. Trên mobile thì không có hành động hover, thay vào đó, Perxel chọn cách sử dụng hover trên desktop và tự động chuyển sang chạy khi scroll trên mobile.
• Chạy một lần: chạy hết rồi dừng ở khung cuối. Hợp với những lúc như gửi form thành công.

Ngoài ra:

• Tốc độ: có thể điều chỉnh linh hoạt.
• Màu nền: thay đổi thoải mái tuỳ vị trí sử dụng.

Khi design có animation, hãy ghi chú chế độ chạy (scroll hay hover) ngay cạnh frame trong Figma. Developer sẽ không phải đoán và tránh hiểu nhầm, và đây cũng là một phần để có Figma handoff gọn gàng.

Người xem trang web thấy gì

Có thể bạn sẽ băn khoăn là thêm animation có làm web chậm không? Đây là cách Perxel sử dụng Lottie trên website:

• Dùng file nhẹ để tránh tăng dung lượng tải trang. Các file Lottie trên website này nặng từ 2 KB đến khoảng 110 KB, thấp hơn một file PNG thông thường.
• Không chạy khi nằm ngoài vùng nhìn. Animation nằm ngoài màn hình sẽ tạm dừng, máy không phải tiêu tốn tài nguyên để render những thứ mà người xem không thấy.
• Trang không bị giật khi load (CLS). Animation được lên sẵn khung layout trước khi file tải xong, giúp nội dung bên dưới không bị đẩy xuống.
• Tôn trọng cài đặt của người xem. Người dùng đã bật chế độ giảm chuyển động (Reduce motion) trong hệ điều hành sẽ chỉ thấy một khung hình đứng yên.

Ngoài ra, để render Lottie, trình duyệt cần tải thêm một thư viện khoảng 500 KB. Perxel tự host thư viện này và chỉ tải trên những trang có Lottie. Trình duyệt chỉ cần tải một lần, các trang sau sẽ dùng lại.

Lottie trên WordPress

Website WordPress có thể dùng Lottie bằng cách tải plugin chính thức của LottieFiles. Plugin này sẽ thêm một block Lottie vào trình soạn thảo Gutenberg.

Trong block có nhiều cách thêm animation: tìm trong thư viện LottieFiles, kéo thả file, dán link, hoặc chọn file đã lưu trong Media Library. Ở thanh bên của block, người quản trị chỉnh được tốc độ, cách chạy (khi tải trang, khi click, khi cuộn hoặc khi hover), lặp hay chạy một lần, chạy ngược, kích thước theo từng màn hình và màu nền.

Khi nào không nên dùng Lottie

Nếu chuyển động quá dài, nội dung chuyển động không thể minh hoạ bằng vector, ví dụ như texture hoặc 3D, lúc này file Lottie không còn nhẹ nữa và sử dụng video sẽ là một lựa chọn tốt hơn.

Nếu chuyển động là visual chính, xuất hiện đầu tiên trong trang hoặc chiếm diện tích lớn thì nên ưu tiên sử dụng ảnh tĩnh để tối ưu về tốc độ tải. Bởi vì dù có thể nhẹ hơn một số file ảnh, Lottie luôn phải chờ JS load xong mới có thể render. Trang chủ Perxel cũng có Lottie ở màn hình đầu, nhưng chỉ là chi tiết trang trí cạnh tiêu đề.

Nếu chỉ là hiệu ứng đơn giản như đổi màu nút, mờ dần hay trượt vào thì CSS đã làm được, không cần thêm file Lottie.

Nếu dự án của bạn cần sử dụng animation để trang web không quá tĩnh và trông vui vẻ hơn, năng động hơn, hãy xem thêm dịch vụ Web animation của Perxel.

Footnotes

1. Lottie, Airbnb
2. LottieFiles plugin, WordPress.org
3. How to add Lottie animations to WordPress, LottieFiles
4. dotlottie-web, LottieFiles