Lottie — ce este, animație vectorială în aplicații mobile

Ce este Lottie?

Lottie — bibliotecă cross-platform pentru redarea animațiilor vectoriale, dezvoltată în Airbnb în 2015. Rezolvă problema fișierelor video grele și a foilor de sprite-uri raster: designerul creează animația în After Effects, o exportă prin Bodymovin în JSON, iar dezvoltatorul încorporează acest fișier în aplicația mobilă. Lottie redează animația programatic prin Canvas, Core Animation sau Skia, în funcție de platformă.

Principalul avantaj al Lottie — animația vectorială se scalează fără pierdere de calitate pe orice ecran: de la ceasurile Apple Watch până la televizoarele 4K. Dimensiunea fișierului JSON al animației este de obicei de 5–50 KB, ceea ce este de zeci de ori mai mic decât un fișier video echivalent. Potrivit Airbnb Engineering (2025), Lottie suportă peste 80% din capacitățile Adobe After Effects, inclusiv măști, efecte, curbe și expresii.

Bodymovin — este un plugin pentru After Effects (gratuit, GitHub) care serializează compoziția în format JSON inteligibil pentru runtime-ul Lottie. Sunt suportate versiunile After Effects CC 2018 și mai noi. Pentru animații complexe cu un număr mare de cadre cheie, se recomandă utilizarea dotLottie — un format bazat pe Lottie JSON, dar comprimat și împachetat într-un singur fișier.

Arhitectura Lottie: cum funcționează randarea

Lottie utilizează o arhitectură de randare pe straturi care se adaptează la capacitățile platformei. Pe Android, animația este desenată prin Canvas API — propriul renderer Lottie (LottieDrawable) care nu folosește animațiile de sistem. Pe iOS, Lottie se bazează pe Core Animation Layers, ceea ce oferă performanță ridicată și 60 FPS. Pe Flutter, Lottie folosește Skia Canvas prin CustomPainter.

Randarea parcurge trei etape: parsarea JSON — analiza animației în LottieComposition (toate straturile, formele, cadrele cheie); interpolarea — calcularea valorilor intermediare între cadrele cheie ținând cont de curbele de easing; desenarea — randarea cadrului curent pe Canvas sau prin Core Animation. Lottie suportă accelerarea hardware: pe Android — accelerare prin Canvas cu Hardware Accelerator, pe iOS — CALayer cu accelerare GPU integrată Core Animation.

Utilizarea Lottie pe Android (Kotlin)

Pe Android, LottieAnimationView extinde AppCompatImageView și preia întregul ciclu de încărcare și randare. Fișierul JSON se plasează în folderul res/raw sau assets. LottieAnimationView suportă gestionarea redării — play, pause, resume, setFrame, setProgress, repeat, speed — și ascultarea prin AnimatorUpdateListener și 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

// Configurarea programatică a 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()
}

// Încărcarea din assets și stocarea în cache
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

// LottieDrawable — redare personalizată fără View
val drawable = LottieDrawable().apply {
    setComposition(
        LottieCompositionFactory.fromRawRes(context, R.raw.star)
            .addListener { composition -> composition?.let { setComposition(it); play() } }
    )
}

Cele mai bune practici Android: utilizați setCacheStrategy(CacheStrategy.Strong) pentru animațiile repetitive — compoziția este stocată în cache în memorie, iar fiecare instanță nouă nu mai parsează JSON-ul de la zero. Pentru liste (RecyclerView) utilizați LottieAnimationView cu enableMergePathsForKitKatAndAbove(true) și disableExtraScaleModeForOlderWorkarounds() pentru optimizarea randării. Pentru animațiile cu fundal transparent, setați android:layerType="hardware" pentru accelerarea GPU.

Utilizarea Lottie pe iOS (Swift)

Pe iOS, AnimationView — clasa principală Lottie pentru UIKit și SwiftUI. Se conectează prin Swift Package Manager sau CocoaPods. Fișierele JSON se adaugă în bundle-ul proiectului. AnimationView determină automat scale (densitatea logică a ecranului) și utilizează Core Animation pentru randarea straturilor la 60 FPS.

import Lottie

// UIKit: AnimationView cu control 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("Segmentul de animație s-a finalizat: \(finished)")
}
view.addSubview(animationView)

// UIKit: animație cu progres (pentru legarea de un eveniment)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

// SwiftUI: LottieView ca 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
    }
}

// Utilizarea în SwiftUI
LottieView(name: "loading", progress: $animationProgress)
    .frame(width: 100, height: 100)

Cele mai bune practici iOS: pentru animațiile care pornesc imediat după încărcare, utilizați animationView.play(fromProgress: 0, toProgress: 1) cu loopMode = .playOnce pentru efecte de accent de o singură dată. Pentru Lottie în UITableView/UICollectionView, utilizați AnimationView cu fișier de animație stocat în cache prin LottieAnimation.cached. Randarea unui număr mare de straturi (50+) poate cauza scăderea FPS — în astfel de cazuri, activați renderingEngine = .mainThread (implicit) sau .coreAnimation pentru macOS.

Lottie vs video: compararea formatelor de animație

Lottie diferă fundamental de fișierele video: nu stochează pixeli, ci descrie forme vectoriale, transformările lor și curbele de modificare în timp. Video (MP4, WebM) — este o secvență de cadre raster de rezoluție fixă. Diferența se manifestă în dimensiunea fișierului, calitatea scalării, interactivitate și performanță.

Când să alegeți Lottie: iconițe de încărcare, like-uri/animații de reacție, ecran de onboard, microanimații de accent pentru butoane. Pentru scene complexe cu efecte 3D, iluminare realistă sau personaje fotorealiste, video-ul rămâne alegerea mai practică. Lottie nu este destinat redării scenelor lungi (peste 10 secunde) — durata optimă a unei animații este de 2–5 secunde.

Optimizarea performanței Lottie

Performanța Lottie depinde de numărul de straturi, complexitatea măștilor și efectelor, precum și de renderer. Pentru a menține 60 FPS pe dispozitivele de gamă medie, urmați recomandările: limitați numărul de straturi la 30–40 pe scenă, evitați pre-compozițiile imbricate suprapuse, utilizați dotLottie pentru animații complexe.

// Optimizarea Lottie pentru RecyclerView
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// Stocarea compoziției în cache în memorie
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// Pool de LottieAnimationView pentru reutilizare
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)
    }
}

// Dezactivarea funcțiilor inutile
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // Limitarea numărului de cadre

Optimizări suplimentare: activați enableMergePathsForKitKatAndAbove(true) pentru dispozitivele cu Android 4.4+ — aceasta îmbină contururile suprapuse într-un singur traseu, reducând numărul de draw calls. Utilizați dotLottie în loc de JSON — formatul binar comprimă animația cu 50–80% prin serializarea protobuf, ceea ce reduce timpul de parsare. Pentru animațiile din RecyclerView, setați repeatCount = 0 (redare unică) și opriți animația la derulare prin recyclerView.addOnScrollListener. Potrivit Airbnb Engineering Blog (2025), aceste măsuri reduc încărcarea CPU cu până la 40%.