Lottie — cos'è, animazione vettoriale nelle app mobili

Cos'è Lottie?

Lottie — una libreria multipiattaforma per riprodurre animazioni vettoriali, sviluppata in Airbnb nel 2015. Risolve il problema dei file video pesanti e dei fogli sprite raster: un designer crea animazioni in After Effects, le esporta tramite Bodymovin in JSON e uno sviluppatore incorpora questo file in un'app mobile. Lottie renderizza l'animazione programmaticamente tramite Canvas, Core Animation o Skia, a seconda della piattaforma.

Il principale vantaggio di Lottie — l'animazione vettoriale si ridimensiona senza perdita di qualità su qualsiasi schermo: dall'Apple Watch ai televisori 4K. La dimensione del file JSON di animazione è tipicamente di 5–50 KB, decine di volte inferiore a un file video equivalente. Secondo Airbnb Engineering (2025), Lottie supporta oltre l'80% delle funzionalità di Adobe After Effects, inclusi maschere, effetti, curve ed espressioni.

Bodymovin — è un plugin per After Effects (gratuito, GitHub) che serializza una composizione nel formato JSON compreso dal runtime di Lottie. Supporta After Effects CC 2018 e versioni successive. Per animazioni complesse con molti fotogrammi chiave, si consiglia dotLottie — un formato basato su Lottie JSON ma compresso e impacchettato in un unico file.

Architettura di Lottie: come funziona il rendering

Lottie utilizza un'architettura di rendering a livelli che si adatta alle capacità della piattaforma. Su Android, l'animazione viene disegnata tramite l'API Canvas — il renderer proprietario di Lottie (LottieDrawable), che non utilizza le animazioni di sistema. Su iOS, Lottie si basa su Core Animation Layers, offrendo prestazioni elevate e 60 FPS. Su Flutter, Lottie utilizza Skia Canvas tramite CustomPainter.

Il rendering attraversa tre fasi: analisi JSON — scomposizione dell'animazione in LottieComposition (tutti i livelli, forme, fotogrammi chiave); interpolazione — calcolo dei valori intermedi tra fotogrammi chiave considerando le curve di easing; disegno — rendering del fotogramma corrente su Canvas o tramite Core Animation. Lottie supporta l'accelerazione hardware: su Android — accelerazione tramite Canvas con Hardware Accelerator, su iOS — CALayer con accelerazione GPU integrata di Core Animation.

Usare Lottie su Android (Kotlin)

Su Android, LottieAnimationView estende AppCompatImageView e gestisce l'intero ciclo di caricamento e rendering. Il file JSON viene inserito nella cartella res/raw o assets. LottieAnimationView supporta il controllo della riproduzione — play, pause, resume, setFrame, setProgress, repeat, speed — e l'ascolto tramite AnimatorUpdateListener e 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

// Configurazione programmatica di 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()
}

// Caricamento da assets e caching
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

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

Buone pratiche Android: utilizzare setCacheStrategy(CacheStrategy.Strong) per animazioni ripetute frequentemente — la composizione viene memorizzata nella cache e ogni nuova istanza non analizza JSON nuovamente. Per gli elenchi (RecyclerView), utilizzare LottieAnimationView con enableMergePathsForKitKatAndAbove(true) e disableExtraScaleModeForOlderWorkarounds() per ottimizzare il rendering. Per animazioni con sfondo trasparente, impostare android:layerType="hardware" per l'accelerazione GPU.

Usare Lottie su iOS (Swift)

Su iOS, AnimationView è la classe principale di Lottie per UIKit e SwiftUI. Viene aggiunta tramite Swift Package Manager o CocoaPods. I file JSON vengono aggiunti al bundle del progetto. AnimationView determina automaticamente la scala (densità logica dello schermo) e utilizza Core Animation per rendere i livelli a 60 FPS.

import Lottie

// UIKit: AnimationView con controllo manuale
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("Animation segment finished: \(finished)")
}
view.addSubview(animationView)

// UIKit: animazione con progresso (per associazione a eventi)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

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

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

Buone pratiche iOS: per animazioni che partono immediatamente dopo il caricamento, utilizzare animationView.play(fromProgress: 0, toProgress: 1) con loopMode = .playOnce per effetti di accento una tantum. Per Lottie in UITableView/UICollectionView, utilizzare AnimationView con un file di animazione memorizzato nella cache tramite LottieAnimation.cached. Il rendering di un numero elevato di livelli (50+) può causare cali di FPS — in tali casi, attivare renderingEngine = .mainThread (predefinito) o .coreAnimation per macOS.

Lottie vs video: confronto tra formati di animazione

Lottie differisce fondamentalmente dai file video: non memorizza pixel, ma descrive forme vettoriali, le loro trasformazioni e curve di variazione nel tempo. Il video (MP4, WebM) è una sequenza di fotogrammi raster a risoluzione fissa. La differenza si manifesta in dimensioni del file, qualità di ridimensionamento, interattività e prestazioni.

Quando scegliere Lottie: icone di caricamento, animazioni di like/reazioni, schermate di onboarding, microanimazioni di accento dei pulsanti. Per scene complesse con effetti 3D, illuminazione realistica o personaggi fotorealistici, il video rimane una scelta più pratica. Lottie non è progettato per riprodurre scene lunghe (più di 10 secondi) — la durata ottimale di un'animazione è di 2–5 secondi.

Ottimizzazione delle prestazioni di Lottie

Le prestazioni di Lottie dipendono dal numero di livelli, dalla complessità di maschere ed effetti e dal renderer. Per mantenere 60 FPS su dispositivi di fascia media, seguire queste raccomandazioni: limitare il numero di livelli a 30–40 per scena, evitare pre-composizioni annidate sovrapposte, utilizzare dotLottie per animazioni complesse.

// Ottimizzazione di Lottie per RecyclerView
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// Caching della composizione in memoria
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// Pool di LottieAnimationView per il riutilizzo
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)
    }
}

// Disattivazione di funzionalità non necessarie
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // Limitazione del numero di fotogrammi

Ottimizzazioni aggiuntive: attivare enableMergePathsForKitKatAndAbove(true) per dispositivi con Android 4.4+ — unisce i percorsi sovrapposti in un unico percorso, riducendo il numero di draw call. Utilizzare dotLottie invece di JSON — il formato binario comprime l'animazione del 50–80% tramite serializzazione protobuf, riducendo i tempi di analisi. Per animazioni in RecyclerView, impostare repeatCount = 0 (riproduzione singola) e fermare l'animazione durante lo scorrimento tramite recyclerView.addOnScrollListener. Secondo Airbnb Engineering Blog (2025), queste misure riducono il carico della CPU fino al 40%.