Lottie: nó là gì, hoạt ảnh và cách hoạt động trên nền tảng di động

Lottie là gì và cách hoạt động

Lottie là một thư viện mã nguồn mở được Airbnb tạo ra vào năm 2015 để hiển thị hoạt ảnh vector theo thời gian thực. Nhà phát triển tạo hoạt ảnh trong Adobe After Effects, xuất nó qua plugin Bodymovin sang JSON, và Lottie phát JSON đó trên thiết bị đích bằng cách diễn giải các lớp, hình dạng, độ trong suốt và đường cong hoạt ảnh.

Không giống như tệp video hay GIF, Lottie không phụ thuộc vào độ phân giải — hoạt ảnh được hiển thị dưới dạng vector và trông giống hệt nhau trên các thiết bị với bất kỳ DPI nào. Một hoạt ảnh JSON trung bình nhỏ hơn 5-10 lần so với GIF hoặc video tương đương, điều này rất quan trọng đối với các ứng dụng di động có băng thông hạn chế.

Theo Airbnb Engineering, việc áp dụng Lottie đã giảm kích thước hoạt ảnh trong ứng dụng xuống 80% so với các chuỗi video Precomposed, đồng thời duy trì 60 FPS trên tất cả các thiết bị được hỗ trợ. Ngày nay, Lottie được hỗ trợ trên iOS, Android, Flutter, React Native, Web (HTML Canvas và SVG) và các nền tảng máy tính để bàn.

Hiệu suất của Lottie đến từ khả năng hiển thị native: trên iOS nó sử dụng Core Animation với CALayer, trên Android — bộ kết xuất Canvas riêng bằng C++ qua JNI. Điều này cho phép phát các hoạt ảnh phức tạp với hàng chục lớp mà không bị rớt khung hình ngay cả trên các thiết bị tầm trung. Không giống như các giải pháp dựa trên WebView (GIF, APNG, video), Lottie không tạo quy trình kết xuất riêng biệt và không tiêu tốn thêm bộ nhớ cho việc giải mã khung hình.

Sử dụng Lottie cho các chỉ báo tải, biểu tượng có tương tác vi mô, màn hình giới thiệu và hoạt ảnh khuyến mãi nơi cần sự mượt mà và kích thước tệp nhỏ.

Hệ sinh thái Lottie bao gồm trình phát chính thức cho tám nền tảng, trình chỉnh sửa LottieFiles để xem trước trong trình duyệt và thị trường với hàng ngàn hoạt ảnh có sẵn. Nhà phát triển có thể tải xuống JSON, tích hợp vào dự án và điều chỉnh màu sắc cũng như tốc độ theo hệ thống thiết kế mà không cần mở After Effects. LottieFiles cũng cung cấp SDK để tích hợp nhanh với khả năng tải hoạt ảnh qua liên kết AIR, cho phép cập nhật hoạt ảnh trên thiết bị mà không cần phát hành phiên bản ứng dụng mới lên App Store hoặc Google Play.

Định dạng JSON Lottie và Bodymovin

Lược đồ JSON của Lottie là một tiêu chuẩn mở để mô tả hoạt ảnh vector, bao gồm ba cấp độ: bố cục, lớp và hình dạng. Bố cục chứa siêu dữ liệu: kích thước khung vẽ, tốc độ khung hình và thời lượng.

Cấu trúc JSON

Đối tượng JSON gốc chứa trường layers — một mảng các lớp hoạt ảnh. Mỗi lớp có thể là Shape Layer, Image Layer, Text Layer hoặc PreComp Layer. Đối với mỗi lớp, các thuộc tính biến đổi được xác định: vị trí, tỷ lệ, xoay và độ mờ gắn với các khung hình chính.

const animationData = {
    "v": "5.5.2",
    "fr": 60,
    "w": 200,
    "h": 200,
    "layers": [{
        "ty": 4,
        "nm": "Circle",
        "shapes": [{
            "ty": "el",
            "p": { "k": [100, 100] }
        }]
    }]
}

Các khung hình chính (Keyframes) được xác định dưới dạng mảng với dấu thời gian, giá trị và đường cong Bezier để nội suy. Bodymovin tự động chuyển đổi các đường cong After Effects sang định dạng tương thích với Lottie, bảo toàn thời gian và chức năng easing với độ chính xác đến từng khung hình.

Bodymovin — plugin xuất

Bodymovin là một tiện ích mở rộng Adobe After Effects xuất bố cục sang tệp JSON Lottie. Plugin hỗ trợ hầu hết các tính năng của After Effects: hình dạng, mặt nạ, hiệu ứng, lớp văn bản và theo dõi. Các hạn chế áp dụng cho lớp 3D và một số plugin — chúng không được xuất và yêu cầu đơn giản hóa hoạt ảnh xuống 2D.

Tích hợp Lottie trên iOS

Trên iOS, Lottie được tích hợp qua Swift Package Manager, CocoaPods hoặc Carthage. Các lớp chính là LottieView cho SwiftUI và LottieAnimationView cho UIKit. Gói lottie-ios hỗ trợ hoạt ảnh từ bundle, mạng và đối tượng Data.

LottieView trong SwiftUI

LottieView là một thành phần View cho SwiftUI chấp nhận tên tệp JSON từ bundle hoặc URL để tải từ mạng. Hoạt ảnh tự động phát với tốc độ và số lần lặp được chỉ định.

import Lottie

LottieView(animation: LottieAnimation
    .named("loading_spinner"))
    .loopMode(.loop)
    .animationSpeed(1.5)
    .frame(width: 100, height: 100)

Đối với UIKit, LottieAnimationView được sử dụng, có thể cấu hình qua Interface Builder hoặc bằng chương trình. View này hỗ trợ tất cả các trạng thái hoạt ảnh: play, pause, stop, cũng như thanh tiến trình để tải dữ liệu. LottieAnimationView có thể được nhúng trong UITableViewCell hoặc UICollectionViewCell cho các biểu tượng hoạt hình trong danh sách — khi cuộn, hoạt ảnh tạm dừng và khi ô xuất hiện trên màn hình, nó tiếp tục, tiết kiệm tài nguyên CPU và GPU.

Phát triển iOS hiện đại tích cực sử dụng Lottie với SwiftUI để tạo màn hình giới thiệu hoạt hình và các yếu tố tương tác: khi cuộn, tiến trình hoạt ảnh đồng bộ hóa với vị trí cuộn qua ScrollViewReader. Điều này tạo ra hiệu ứng thị sai nơi hoạt ảnh liên tục theo chuyển động ngón tay của người dùng, tăng mức độ tương tác mà không cần sử dụng tệp video nặng.

Điều khiển phát lại

Trình phát Lottie trên iOS cung cấp API để phát lại từ một khung hình cụ thể đến khung hình khác, thay đổi màu tô/nét qua KeyPaths và lắng nghe sự kiện qua LottieAnimationDelegate. Có thể tạm dừng hoạt ảnh khi cuộn và tiếp tục khi dừng để tối ưu hiệu suất.

Tích hợp Lottie trên Android

Trên Android, Lottie được thêm qua phụ thuộc Gradle com.airbnb.android:lottie. Thành phần chính là LottieAnimationView, có thể được đặt trong bố cục XML như một View thông thường và cấu hình qua các thuộc tính hoặc bằng chương trình.

@Composable
fun LoadingAnimation() {
    val composition by rememberLottieComposition(
        spec = LottieCompositionSpec.RawRes(R.raw.loading)
    )
    LottieAnimation(
        composition = composition,
        iterations = LottieConstants.IterateForever
    )
}

Trong bố cục XML, LottieAnimationView được cấu hình qua các thuộc tính: lottie_rawRes (tham chiếu đến JSON trong res/raw), lottie_autoPlay, lottie_loop. Tải từ mạng được hỗ trợ qua lottie_url hoặc bằng chương trình qua setAnimationFromUrl. Phiên bản Android của Lottie sử dụng bộ kết xuất Canvas riêng, độc lập với tăng tốc phần cứng.

Tải từ RawRes và mạng

Đối với hoạt ảnh tĩnh, JSON được đặt trong res/raw và tham chiếu qua RawRes. Đối với hoạt ảnh động, Lottie tải JSON từ URL hoặc đối tượng Data với callback tiến trình hiển thị phần trăm tải xuống. Bộ nhớ đệm Lottie tự động lưu các hoạt ảnh đã tải trong bộ nhớ để tránh tải lại khi kết xuất nhiều lần.

Lottie cho Android hỗ trợ hoạt ảnh trong RecyclerView qua LottieAnimationView được nhúng trực tiếp vào các mục danh sách. Để tối ưu hiệu suất, nên sử dụng setAnimation với tải chậm và tắt hoạt ảnh cho các phần tử ngoài màn hình qua callback RecyclerView.OnChildAttachStateChangeListener. Điều này ngăn giảm FPS khi cuộn danh sách dài với các biểu tượng hoạt hình.

Tùy chỉnh và điều khiển hoạt ảnh Lottie

Lottie cung cấp API mạnh mẽ để tùy chỉnh các hoạt ảnh có sẵn mà không cần sửa đổi tệp After Effects gốc. Điều này cho phép điều chỉnh một hoạt ảnh duy nhất cho các chủ đề, màu sắc và kích thước ứng dụng khác nhau.

Thay đổi màu qua KeyPath

Màu tô và nét có thể được thay đổi trong thời gian chạy qua KeyPath — một đường dẫn chuỗi đến phần tử hoạt ảnh. Ví dụ, để thay đổi màu biểu tượng giỏ hàng từ đỏ sang xanh lam, chỉ cần tìm KeyPath của nó và áp dụng giá trị mới. Điều này loại bỏ nhu cầu lưu trữ nhiều phiên bản của cùng một hoạt ảnh cho các bảng màu khác nhau.

Điều khiển tốc độ và tiến trình

Mỗi hoạt ảnh Lottie có thể được điều khiển bằng tốc độ (animationSpeed), tiến trình (setProgress) và phạm vi khung hình (play(fromFrame:toFrame:)). Chế độ tiến trình cho phép đồng bộ hóa hoạt ảnh với cử chỉ cuộn: màn hình càng cuộn xa, hoạt ảnh càng tiến triển — một kỹ thuật phổ biến cho màn hình giới thiệu và hiệu ứng thị sai.