Lottie: cos'è, animazioni e come funziona sulle piattaforme mobili

Cos'è Lottie e come funziona

Lottie è una libreria open source creata da Airbnb nel 2015 per il rendering di animazioni vettoriali in tempo reale. Lo sviluppatore crea un'animazione in Adobe After Effects, la esporta tramite il plugin Bodymovin in JSON, e Lottie riproduce quel JSON sul dispositivo di destinazione interpretando layer, forme, trasparenza e curve di animazione.

A differenza di file video o GIF, Lottie è indipendente dalla risoluzione — l'animazione viene renderizzata vettorialmente e appare identica su dispositivi con qualsiasi DPI. Un'animazione JSON è in media 5-10 volte più piccola di un GIF o video equivalente, il che è fondamentale per le applicazioni mobili con larghezza di banda limitata.

Secondo Airbnb Engineering, l'adozione di Lottie ha ridotto la dimensione delle animazioni nell'app dell'80% rispetto alle sequenze video Precomposed, mantenendo 60 FPS su tutti i dispositivi supportati. Oggi Lottie è supportato su iOS, Android, Flutter, React Native, Web (HTML Canvas e SVG) e piattaforme desktop.

Le prestazioni di Lottie derivano dal rendering nativo: su iOS utilizza Core Animation con CALayer, su Android — il proprio renderer Canvas in C++ tramite JNI. Ciò consente di riprodurre animazioni complesse con dozzine di layer senza perdita di fotogrammi anche su dispositivi di fascia media. A differenza delle soluzioni basate su WebView (GIF, APNG, video), Lottie non crea un processo di rendering separato e non consuma memoria aggiuntiva per la decodifica dei fotogrammi.

Utilizzate Lottie per indicatori di caricamento, icone con micro-interazioni, schermate di onboarding e animazioni promozionali festive dove contano fluidità e dimensione ridotta.

L'ecosistema Lottie include lettori ufficiali per otto piattaforme, l'editor LottieFiles per l'anteprima nel browser e un marketplace con migliaia di animazioni pronte. Lo sviluppatore può scaricare un JSON, integrarlo in un progetto e regolare colori e velocità secondo il sistema di design senza aprire After Effects. LottieFiles fornisce anche un SDK per un'integrazione accelerata con la possibilità di caricare animazioni tramite un link AIR, consentendo di aggiornare le animazioni sui dispositivi senza pubblicare una nuova versione dell'app su App Store o Google Play.

Formato JSON di Lottie e Bodymovin

Lo schema JSON di Lottie è uno standard aperto per descrivere animazioni vettoriali, composto da tre livelli: composizione, layer e forme. La composizione contiene metadati: dimensione della tela, frequenza fotogrammi e durata.

Struttura del JSON

L'oggetto JSON principale contiene il campo layers — un array di layer di animazione. Ogni layer può essere un Shape Layer, Image Layer, Text Layer o PreComp Layer. Per ogni layer vengono definite proprietà di trasformazione: posizione, scala, rotazione e opacità legate ai fotogrammi chiave.

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

I fotogrammi chiave (Keyframes) sono definiti come array con timestamp, valori e curve di Bézier per l'interpolazione. Bodymovin converte automaticamente le curve di After Effects in un formato compatibile con Lottie, preservando il timing e le funzioni di easing con precisione del fotogramma.

Bodymovin — plugin di esportazione

Bodymovin è un'estensione di Adobe After Effects che esporta una composizione in un file JSON Lottie. Il plugin supporta la maggior parte delle funzionalità di After Effects: forme, maschere, effetti, layer di testo e tracking. Le limitazioni riguardano i layer 3D e alcuni plugin — non vengono esportati e richiedono di semplificare l'animazione a 2D.

Integrazione di Lottie su iOS

Su iOS, Lottie viene integrato tramite Swift Package Manager, CocoaPods o Carthage. Le classi principali sono LottieView per SwiftUI e LottieAnimationView per UIKit. Il pacchetto lottie-ios supporta animazioni dal bundle, dalla rete e da oggetti Data.

LottieView in SwiftUI

LottieView è un componente View per SwiftUI che accetta un nome file JSON dal bundle o un URL per il caricamento dalla rete. L'animazione viene riprodotta automaticamente alla velocità e al numero di ripetizioni specificati.

import Lottie

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

Per UIKit, viene utilizzato LottieAnimationView, configurabile tramite Interface Builder o programmaticamente. La View supporta tutti gli stati di animazione: play, pause, stop, oltre a una barra di progresso per il caricamento dei dati. LottieAnimationView può essere incorporato in UITableViewCell o UICollectionViewCell per icone animate negli elenchi — durante lo scroll, l'animazione si mette in pausa e quando la cella appare sullo schermo riprende, risparmiando risorse CPU e GPU.

Lo sviluppo iOS moderno utilizza attivamente Lottie con SwiftUI per creare schermate di onboarding animate ed elementi interattivi: durante lo scroll, il progresso dell'animazione si sincronizza con la posizione di scroll tramite ScrollViewReader. Questo crea un effetto parallasse in cui l'animazione segue continuamente il movimento del dito dell'utente, aumentando il coinvolgimento senza utilizzare file video pesanti.

Controllo della riproduzione

Il lettore Lottie su iOS fornisce un'API per la riproduzione da un fotogramma specifico a un altro, la modifica dei colori di riempimento/tratto tramite KeyPaths e l'ascolto degli eventi tramite LottieAnimationDelegate. È possibile mettere in pausa l'animazione durante lo scroll e riprenderla quando ci si ferma per ottimizzare le prestazioni.

Integrazione di Lottie su Android

Su Android, Lottie viene aggiunto tramite la dipendenza Gradle com.airbnb.android:lottie. Il componente principale è LottieAnimationView, che può essere posizionato in un layout XML come una View normale e configurato tramite attributi o programmaticamente.

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

Nel layout XML, LottieAnimationView viene configurato tramite attributi: lottie_rawRes (riferimento al JSON in res/raw), lottie_autoPlay, lottie_loop. Il caricamento dalla rete è supportato tramite lottie_url o programmaticamente tramite setAnimationFromUrl. La versione Android di Lottie utilizza il proprio renderer Canvas, indipendente dall'accelerazione hardware.

Caricamento da RawRes e rete

Per animazioni statiche, il JSON viene inserito in res/raw e referenziato tramite RawRes. Per animazioni dinamiche, Lottie carica JSON da un URL o oggetto Data con un callback di progresso che mostra la percentuale di download. La cache Lottie mantiene automaticamente le animazioni caricate in memoria per evitare un nuovo download durante renderizzazioni successive.

Lottie per Android supporta animazioni in RecyclerView tramite LottieAnimationView incorporata direttamente negli elementi dell'elenco. Per ottimizzare le prestazioni, si consiglia di utilizzare setAnimation con caricamento differito e disabilitare l'animazione per gli elementi fuori schermo tramite il callback RecyclerView.OnChildAttachStateChangeListener. Questo previene cali di FPS durante lo scroll di elenchi lunghi con icone animate.

Personalizzazione e controllo delle animazioni Lottie

Lottie fornisce un'API potente per personalizzare animazioni già pronte senza modificare il file After Effects originale. Ciò consente di adattare una singola animazione a temi, colori e dimensioni dell'app differenti.

Modifica del colore tramite KeyPath

I colori di riempimento e tratto possono essere modificati in fase di esecuzione tramite KeyPath — un percorso stringa verso un elemento dell'animazione. Ad esempio, per cambiare il colore di un'icona del carrello da rosso a blu, basta trovare il suo KeyPath e applicare il nuovo valore. Ciò elimina la necessità di memorizzare più versioni della stessa animazione per diverse combinazioni di colori.

Controllo di velocità e progresso

Ogni animazione Lottie può essere controllata tramite velocità (animationSpeed), progresso (setProgress) e intervallo di fotogrammi (play(fromFrame:toFrame:)). La modalità progresso consente di sincronizzare l'animazione con un gesto di scroll: più lo schermo viene scrollato, più l'animazione avanza — una tecnica popolare per onboarding ed effetti parallasse.