Lottie: apa itu, animasi dan cara kerjanya di platform mobile

Apa itu Lottie dan cara kerjanya

Lottie — adalah pustaka sumber terbuka yang dibuat oleh Airbnb pada tahun 2015 untuk merender animasi vektor secara real-time. Pengembang membuat animasi di Adobe After Effects, mengekspornya melalui plugin Bodymovin ke JSON, dan Lottie memutar JSON ini di perangkat target dengan menafsirkan layer, bentuk, transparansi, dan kurva animasi.

Tidak seperti file video atau GIF, Lottie tidak bergantung pada resolusi layar — animasi dirender secara vektor dan terlihat sama di perangkat dengan DPI apa pun. Ukuran animasi JSON rata-rata 5-10 kali lebih kecil dari GIF atau video yang setara, yang sangat penting untuk aplikasi mobile dengan lalu lintas terbatas.

Menurut Airbnb Engineering, penerapan Lottie mengurangi ukuran animasi di aplikasi sebesar 80% dibandingkan dengan video Precomposed, sementara frame rate tetap 60 FPS di semua perangkat yang didukung. Saat ini Lottie didukung di iOS, Android, Flutter, React Native, Web (HTML Canvas dan SVG), dan platform desktop.

Kinerja Lottie dijamin oleh rendering native: di iOS menggunakan Core Animation dengan CALayer, di Android — renderer Canvas sendiri dalam C++ melalui JNI. Ini memungkinkan pemutaran animasi kompleks dengan puluhan layer tanpa kehilangan frame bahkan di perangkat kelas menengah. Tidak seperti solusi WebView (GIF, APNG, video), Lottie tidak membuat proses terpisah untuk rendering dan tidak mengonsumsi memori tambahan untuk mendekode frame.

Gunakan Lottie untuk indikator pemuatan, ikon dengan mikro-interaksi, layar onboarding, dan animasi promosi liburan di mana kehalusan dan ukuran kecil penting.

Ekosistem Lottie mencakup pemutar resmi untuk delapan platform, editor LottieFiles untuk pratinjau di browser, dan marketplace dengan ribuan animasi siap pakai. Pengembang dapat mengunduh JSON, mengintegrasikannya ke dalam proyek, dan menyesuaikan warna serta kecepatan dengan sistem desain tanpa membuka After Effects. LottieFiles juga menyediakan SDK untuk integrasi yang dipercepat dengan kemampuan memuat animasi melalui tautan AIR, yang memungkinkan pembaruan animasi di perangkat tanpa menerbitkan versi baru aplikasi di App Store atau Google Play.

Format JSON Lottie dan Bodymovin

Skema JSON Lottie — adalah standar terbuka untuk mendeskripsikan animasi vektor yang terdiri dari tiga tingkat: komposisi (composition), layer (layers), dan bentuk (shapes). Komposisi berisi metadata: ukuran kanvas, frame rate, dan durasi.

Struktur JSON

Objek root JSON berisi bidang layers — array dari layer animasi. Setiap layer dapat berupa bentuk (Shape Layer), gambar (Image Layer), teks (Text Layer), atau pra-komposisi (PreComp Layer). Untuk setiap layer, properti transformasi ditentukan: posisi, skala, rotasi, dan transparansi yang terikat pada keyframe.

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

Keyframe ditentukan dengan array stempel waktu, nilai, dan kurva Bezier untuk interpolasi. Bodymovin secara otomatis mengonversi kurva After Effects ke format yang dapat dipahami Lottie, mempertahankan timing dan fungsi ease dengan akurasi frame.

Bodymovin — plugin ekspor

Bodymovin — adalah ekstensi untuk Adobe After Effects yang mengekspor komposisi ke file JSON Lottie. Plugin ini mendukung sebagian besar kemampuan After Effects: bentuk, masker, efek, layer teks, dan pelacakan. Keterbatasan berlaku untuk layer 3D dan beberapa plugin — mereka tidak diekspor dan memerlukan penyederhanaan animasi ke 2D.

Integrasi Lottie di iOS

Di iOS Lottie diintegrasikan melalui Swift Package Manager, CocoaPods, atau Carthage. Kelas utama — LottieView untuk SwiftUI dan LottieAnimationView untuk UIKit. Paket lottie-ios mencakup dukungan untuk animasi dari bundle, jaringan, dan objek Data.

LottieView di SwiftUI

LottieView — adalah komponen View untuk SwiftUI yang menerima nama file JSON dari bundle atau URL untuk dimuat dari jaringan. Animasi secara otomatis diputar dengan kecepatan dan jumlah pengulangan yang ditentukan.

import Lottie

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

Untuk UIKit digunakan LottieAnimationView dengan konfigurasi melalui Interface Builder atau secara programatis. View mendukung semua status animasi: play, pause, stop, serta progress bar untuk memuat data. LottieAnimationView dapat disematkan di UITableViewCell atau UICollectionViewCell untuk ikon animasi di daftar — saat digulir, animasi sel dijeda, dan saat muncul di layar dilanjutkan, menghemat sumber daya CPU dan GPU.

Pengembangan iOS modern secara aktif menggunakan Lottie dalam kombinasi dengan SwiftUI untuk membuat layar onboarding animasi dan elemen interaktif: saat menggulir layar, kemajuan animasi disinkronkan dengan posisi gulir melalui ScrollViewReader. Ini menciptakan efek paralaks di mana animasi terus mengikuti gerakan jari pengguna, meningkatkan keterlibatan tanpa menggunakan file video berat.

Mengelola Pemutaran

Pemutar Lottie di iOS menyediakan API untuk memutar dari frame tertentu ke frame tertentu, mengubah warna isi/garis melalui KeyPaths, dan mendengarkan peristiwa melalui LottieAnimationDelegate. Anda dapat menjeda animasi saat menggulir dan melanjutkannya saat berhenti untuk mengoptimalkan kinerja.

Integrasi Lottie di Android

Di Android Lottie terhubung melalui dependensi Gradle com.airbnb.android:lottie. Komponen utama — LottieAnimationView, yang dapat ditempatkan di tata letak XML sebagai View biasa dan dikonfigurasi melalui atribut atau secara programatis.

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

Dalam tata letak XML LottieAnimationView dikonfigurasi melalui atribut: lottie_rawRes (referensi ke JSON di res/raw), lottie_autoPlay, lottie_loop. Pemuatan dari jaringan didukung melalui lottie_url atau secara programatis melalui setAnimationFromUrl. Versi Android Lottie menggunakan renderer Canvas sendiri, independen dari percepatan perangkat keras.

Pemuatan dari RawRes dan Jaringan

Untuk animasi statis, JSON ditempatkan di res/raw dan dirujuk melalui RawRes. Untuk animasi dinamis, Lottie memuat JSON dari URL atau objek Data dengan callback progres yang menunjukkan persentase pemuatan. Cache Lottie secara otomatis menyimpan animasi yang dimuat di memori untuk menghindari pemuatan ulang saat rendering berulang.

Lottie untuk Android mendukung animasi di RecyclerView melalui LottieAnimationView yang tertanam langsung di elemen daftar. Untuk mengoptimalkan kinerja, disarankan menggunakan setAnimation dengan pemuatan tertunda dan menonaktifkan animasi untuk elemen yang tidak terlihat di layar melalui callback RecyclerView.OnChildAttachStateChangeListener. Ini mencegah penurunan FPS saat menggulir daftar panjang dengan ikon animasi.

Kustomisasi dan Pengelolaan Animasi Lottie

Lottie menyediakan API yang kuat untuk menyesuaikan animasi yang sudah jadi tanpa mengubah file After Effects asli. Ini memungkinkan satu animasi diadaptasi ke berbagai tema, warna, dan ukuran aplikasi.

Mengubah Warna melalui KeyPath

Warna isi dan garis dapat diubah saat runtime melalui KeyPath — jalur string ke elemen animasi. Misalnya, untuk mengganti warna ikon keranjang dari merah menjadi biru, cukup temukan KeyPath-nya dan terapkan nilai baru. Ini menghilangkan kebutuhan untuk menyimpan beberapa versi animasi yang sama untuk skema warna yang berbeda.

Mengelola Kecepatan dan Kemajuan

Setiap animasi Lottie dapat dikendalikan berdasarkan kecepatan (animationSpeed), kemajuan (setProgress), dan rentang frame (play(fromFrame:toFrame:)). Mode kemajuan memungkinkan sinkronisasi animasi dengan gerakan gulir: semakin jauh layar digulir, semakin maju animasinya — ini adalah teknik populer untuk onboarding dan efek paralaks.