Lottie — apa itu, animasi vektor di aplikasi seluler

Apa itu Lottie?

Lottie — pustaka lintas platform untuk memutar animasi vektor, dikembangkan di Airbnb pada tahun 2015. Ini memecahkan masalah file video berat dan sprite sheet raster: desainer membuat animasi di After Effects, mengekspor melalui Bodymovin ke JSON, dan pengembang menyematkan file ini ke dalam aplikasi seluler. Lottie merender animasi secara terprogram melalui Canvas, Core Animation, atau Skia, tergantung platformnya.

Keunggulan utama Lottie — animasi vektor diskalakan tanpa kehilangan kualitas di layar apa pun: dari jam tangan Apple Watch hingga TV 4K. Ukuran file JSON animasi biasanya 5–50 KB, puluhan kali lebih kecil dari file video yang setara. Menurut Airbnb Engineering (2025), Lottie mendukung lebih dari 80% kemampuan Adobe After Effects, termasuk masker, efek, kurva, dan ekspresi.

Bodymovin — adalah plugin untuk After Effects (gratis, GitHub) yang menyerialkan komposisi ke format JSON yang dapat dipahami oleh runtime Lottie. Versi After Effects CC 2018 dan yang lebih baru didukung. Untuk animasi kompleks dengan banyak bingkai kunci, disarankan menggunakan dotLottie — format berdasarkan Lottie JSON, tetapi dikompresi dan dikemas dalam satu file.

Arsitektur Lottie: cara kerja rendering

Lottie menggunakan arsitektur rendering berlapis yang menyesuaikan dengan kemampuan platform. Di Android, animasi digambar melalui Canvas API — perender Lottie sendiri (LottieDrawable) yang tidak menggunakan animasi sistem. Di iOS, Lottie mengandalkan Core Animation Layers, yang memberikan kinerja tinggi dan 60 FPS. Di Flutter, Lottie menggunakan Skia Canvas melalui CustomPainter.

Rendering melalui tiga tahap: parsing JSON — analisis animasi di LottieComposition (semua lapisan, bentuk, bingkai kunci); interpolasi — menghitung nilai antara bingkai kunci dengan mempertimbangkan kurva easing; penggambaran — merender bingkai saat ini di Canvas atau melalui Core Animation. Lottie mendukung percepatan perangkat keras: di Android — percepatan melalui Canvas dengan Hardware Accelerator, di iOS — CALayer dengan percepatan GPU terintegrasi Core Animation.

Menggunakan Lottie di Android (Kotlin)

Di Android, LottieAnimationView memperluas AppCompatImageView dan mengambil alih seluruh siklus pemuatan dan rendering. File JSON ditempatkan di folder res/raw atau assets. LottieAnimationView mendukung manajemen pemutaran — play, pause, resume, setFrame, setProgress, repeat, speed — dan pendengaran melalui AnimatorUpdateListener dan AnimatorListener.

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animationView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:lottie_rawRes="@raw/loading_animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true" />

import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieListener

// Konfigurasi terprogram LottieAnimationView
val lottieView = LottieAnimationView(context).apply {
    setAnimation(R.raw.celebrate_animation)
    repeatCount = ValueAnimator.INFINITE
    speed = 1.5f
    addAnimatorUpdateListener { animator ->
        val progress = animator.animatedValue as Float
        progressBar.progress = (progress * 100).toInt()
    }
    playAnimation()
}

// Memuat dari assets dan caching
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

// LottieDrawable — penggambaran kustom tanpa View
val drawable = LottieDrawable().apply {
    setComposition(
        LottieCompositionFactory.fromRawRes(context, R.raw.star)
            .addListener { composition -> composition?.let { setComposition(it); play() } }
    )
}

Praktik terbaik Android: gunakan setCacheStrategy(CacheStrategy.Strong) untuk animasi yang sering diulang — komposisi di-cache di memori, dan setiap instance baru tidak mengurai JSON dari awal. Untuk daftar (RecyclerView) gunakan LottieAnimationView dengan enableMergePathsForKitKatAndAbove(true) dan disableExtraScaleModeForOlderWorkarounds() untuk mengoptimalkan rendering. Untuk animasi dengan latar belakang transparan, atur android:layerType="hardware" untuk percepatan GPU.

Menggunakan Lottie di iOS (Swift)

Di iOS, AnimationView — kelas utama Lottie untuk UIKit dan SwiftUI. Ini terhubung melalui Swift Package Manager atau CocoaPods. File JSON ditambahkan ke bundle proyek. AnimationView secara otomatis menentukan scale (kepadatan logis layar) dan menggunakan Core Animation untuk merender lapisan pada 60 FPS.

import Lottie

// UIKit: AnimationView dengan kontrol manual
let animationView = AnimationView(name: "confetti")
animationView.frame = view.bounds
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
animationView.animationSpeed = 1.5
animationView.play(fromProgress: 0, toProgress: 0.5) { finished in
    print("Segmen animasi selesai: \(finished)")
}
view.addSubview(animationView)

// UIKit: animasi dengan kemajuan (untuk mengikat ke peristiwa)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

// SwiftUI: LottieView sebagai UIViewRepresentable
import Lottie
import SwiftUI

struct LottieView: UIViewRepresentable {
    let name: String
    var loopMode: LottieLoopMode = .loop
    @Binding var progress: CGFloat

    func makeUIView(context: Context) -> AnimationView {
        let view = AnimationView(name: name)
        view.contentMode = .scaleAspectFit
        view.loopMode = loopMode
        return view
    }

    func updateUIView(_ uiView: AnimationView, context: Context) {
        uiView.currentProgress = progress
    }
}

// Penggunaan di SwiftUI
LottieView(name: "loading", progress: $animationProgress)
    .frame(width: 100, height: 100)

Praktik terbaik iOS: untuk animasi yang dimulai segera setelah dimuat, gunakan animationView.play(fromProgress: 0, toProgress: 1) dengan loopMode = .playOnce untuk efek aksen satu kali. Untuk Lottie di UITableView/UICollectionView gunakan AnimationView dengan file animasi yang di-cache melalui LottieAnimation.cached. Rendering sejumlah besar lapisan (50+) dapat menyebabkan penurunan FPS — dalam kasus seperti itu, aktifkan renderingEngine = .mainThread (default) atau .coreAnimation untuk macOS.

Lottie vs video: perbandingan format animasi

Lottie pada dasarnya berbeda dari file video: tidak menyimpan piksel, tetapi menggambarkan bentuk vektor, transformasinya, dan kurva perubahan dari waktu ke waktu. Video (MP4, WebM) — adalah urutan bingkai raster dengan resolusi tetap. Perbedaannya terlihat pada ukuran file, kualitas penskalaan, interaktivitas, dan kinerja.

Kapan memilih Lottie: ikon pemuatan, like/animasi reaksi, layar onboard, mikroanimasi aksen tombol. Untuk adegan kompleks dengan efek 3D, pencahayaan realistis, atau karakter fotorealistis, video tetap menjadi pilihan yang lebih praktis. Lottie tidak dirancang untuk memutar adegan panjang (lebih dari 10 detik) — durasi optimal satu animasi adalah 2–5 detik.

Optimasi kinerja Lottie

Kinerja Lottie tergantung pada jumlah lapisan, kompleksitas masker dan efek, serta perender. Untuk mempertahankan 60 FPS pada perangkat kelas menengah, ikuti rekomendasi: batasi jumlah lapisan hingga 30–40 per adegan, hindari pre-composition bertumpuk yang bersarang, gunakan dotLottie untuk animasi kompleks.

// Optimasi Lottie untuk RecyclerView
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// Caching komposisi di memori
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// Pool LottieAnimationView untuk penggunaan ulang
class LottiePool {
    private val pool = LinkedList<LottieAnimationView>()

    fun acquire(context: Context): LottieAnimationView {
        return pool.poll() ?: LottieAnimationView(context)
    }

    fun release(view: LottieAnimationView) {
        view.pauseAnimation()
        view.cancelAnimation()
        pool.add(view)
    }
}

// Menonaktifkan fitur yang tidak diperlukan
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // Membatasi jumlah bingkai

Optimasi tambahan: aktifkan enableMergePathsForKitKatAndAbove(true) untuk perangkat dengan Android 4.4+ — ini menggabungkan kontur yang tumpang tindih menjadi satu jalur, mengurangi jumlah draw calls. Gunakan dotLottie daripada JSON — format biner mengompresi animasi sebesar 50–80% melalui serialisasi protobuf, yang mempercepat waktu parsing. Untuk animasi di RecyclerView, atur repeatCount = 0 (pemutaran sekali) dan hentikan animasi saat menggulir melalui recyclerView.addOnScrollListener. Menurut Airbnb Engineering Blog (2025), langkah-langkah ini mengurangi beban CPU hingga 40%.