Lottie: wat is het, animaties en hoe werkt het op mobiele platforms

Wat is Lottie en hoe werkt het

Lottie — is een open-source bibliotheek, gemaakt door Airbnb in 2015, voor het renderen van vectoranimaties in realtime. De ontwikkelaar maakt een animatie in Adobe After Effects, exporteert deze via de Bodymovin-plug-in naar JSON, en Lottie speelt deze JSON af op het doelapparaat door lagen, vormen, transparantie en animatiecurves te interpreteren.

In tegenstelling tot videobestanden of GIF is Lottie niet afhankelijk van de schermresolutie — de animatie wordt vectorieel gerenderd en ziet er hetzelfde uit op apparaten met elke DPI. De grootte van een JSON-animatie is gemiddeld 5-10 keer kleiner dan een equivalente GIF of video, wat cruciaal is voor mobiele apps met beperkt dataverkeer.

Volgens Airbnb Engineering heeft de implementatie van Lottie de grootte van animaties in de app met 80% verminderd in vergelijking met Precomposed video, terwijl de framerate 60 FPS bleef op alle ondersteunde apparaten. Tegenwoordig wordt Lottie ondersteund op iOS, Android, Flutter, React Native, Web (HTML Canvas en SVG) en desktopplatforms.

De prestaties van Lottie worden gegarandeerd door native rendering: op iOS wordt Core Animation met CALayer gebruikt, op Android — een eigen Canvas-renderer in C++ via JNI. Hierdoor kunnen complexe animaties met tientallen lagen worden afgespeeld zonder frameverlies, zelfs op mid-range apparaten. In tegenstelling tot WebView-oplossingen (GIF, APNG, video) creëert Lottie geen apart proces voor rendering en verbruikt het geen extra geheugen voor het decoderen van frames.

Gebruik Lottie voor laadindicatoren, pictogrammen met micro-interacties, onboarding-schermen en feestelijke promotie-animaties waar vloeiendheid en kleine omvang belangrijk zijn.

Het Lottie-ecosysteem omvat officiële spelers voor acht platforms, de LottieFiles-editor voor voorbeeldweergave in de browser en een marktplaats met duizenden kant-en-klare animaties. De ontwikkelaar kan JSON downloaden, in het project integreren en kleuren en snelheid aanpassen aan het ontwerpsysteem zonder After Effects te openen. LottieFiles biedt ook een SDK voor versnelde integratie met de mogelijkheid om animaties te laden via een AIR-link, waardoor animaties op apparaten kunnen worden bijgewerkt zonder een nieuwe versie van de app in de App Store of Google Play te publiceren.

JSON-formaat van Lottie en Bodymovin

Het JSON-schema Lottie — is een open standaard voor het beschrijven van vectoranimatie, bestaande uit drie niveaus: compositie (composition), lagen (layers) en vormen (shapes). De compositie bevat metadata: canvasgrootte, framerate en duur.

JSON-structuur

Het root-JSON-object bevat het veld layers — een array van animatielagen. Elke laag kan een vorm (Shape Layer), afbeelding (Image Layer), tekst (Text Layer) of precompositie (PreComp Layer) zijn. Voor elke laag worden transformatie-eigenschappen gedefinieerd: positie, schaal, rotatie en transparantie, gekoppeld aan sleutelframes.

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

Sleutelframes (Keyframes) worden opgegeven met arrays van tijdstempels, waarden en Bezier-curves voor interpolatie. Bodymovin converteert After Effects-curves automatisch naar een voor Lottie begrijpelijk formaat, waarbij de timing en ease-functies met framenauwkeurigheid behouden blijven.

Bodymovin — exportplug-in

Bodymovin — is een extensie voor Adobe After Effects die de compositie exporteert naar een Lottie JSON-bestand. De plug-in ondersteunt de meeste mogelijkheden van After Effects: vormen, maskers, effecten, tekstlagen en tracking. Beperkingen gelden voor 3D-lagen en sommige plug-ins — ze worden niet geëxporteerd en vereisen vereenvoudiging van de animatie naar 2D.

Lottie integreren op iOS

Op iOS wordt Lottie geïntegreerd via Swift Package Manager, CocoaPods of Carthage. De hoofdklasse — LottieView voor SwiftUI en LottieAnimationView voor UIKit. Het lottie-ios-pakket ondersteunt animaties uit de bundle, het netwerk en Data-objecten.

LottieView in SwiftUI

LottieView — is een View-component voor SwiftUI die de naam van een JSON-bestand uit de bundle of een URL om van het netwerk te laden accepteert. De animatie wordt automatisch afgespeeld met de opgegeven snelheid en het aantal herhalingen.

import Lottie

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

Voor UIKit wordt LottieAnimationView gebruikt met configuratie via Interface Builder of programmatisch. View ondersteunt alle animatiestatussen: play, pause, stop, evenals een voortgangsbalk voor het laden van gegevens. LottieAnimationView kan worden ingebed in UITableViewCell of UICollectionViewCell voor geanimeerde pictogrammen in lijsten — tijdens het scrollen wordt de celanimatie gepauzeerd en hervat bij weergave op het scherm, wat CPU- en GPU-bronnen bespaart.

Moderne iOS-ontwikkeling gebruikt Lottie actief in combinatie met SwiftUI voor het maken van geanimeerde onboarding-schermen en interactieve elementen: tijdens het scrollen van het scherm wordt de voortgang van de animatie gesynchroniseerd met de scrollpositie via ScrollViewReader. Dit creëert een parallax-effect waarbij de animatie continu de vingerbeweging van de gebruiker volgt, wat de betrokkenheid verhoogt zonder zware videobestanden te gebruiken.

Afspelen beheren

De Lottie-speler op iOS biedt een API voor afspelen van een specifiek tot een specifiek frame, het wijzigen van vul-/lijnkleur via KeyPaths en het luisteren naar gebeurtenissen via LottieAnimationDelegate. Je kunt de animatie pauzeren tijdens het scrollen en hervatten bij stoppen voor prestatie-optimalisatie.

Lottie integreren op Android

Op Android wordt Lottie aangesloten via de Gradle-afhankelijkheid com.airbnb.android:lottie. Het hoofdcomponent — LottieAnimationView, die in de XML-layout als een gewone View kan worden geplaatst en geconfigureerd via attributen of programmatisch.

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

In de XML-layout wordt LottieAnimationView geconfigureerd via attributen: lottie_rawRes (verwijzing naar JSON in res/raw), lottie_autoPlay, lottie_loop. Laden via het netwerk wordt ondersteund via lottie_url of programmatisch via setAnimationFromUrl. De Android-versie van Lottie gebruikt een eigen Canvas-renderer, onafhankelijk van hardwareversnelling.

Laden via RawRes en netwerk

Voor statische animaties wordt JSON in res/raw geplaatst en via RawRes verwezen. Voor dynamische animaties laadt Lottie JSON van een URL of Data-object met een voortgangscallback die het laadpercentage weergeeft. De Lottie-cache slaat geladen animaties automatisch in het geheugen op om opnieuw laden bij herhaalde rendering te voorkomen.

Lottie voor Android ondersteunt animaties in RecyclerView via LottieAnimationView die direct in het lijstelement is ingebed. Voor prestatie-optimalisatie wordt aanbevolen om setAnimation met uitgesteld laden te gebruiken en animatie uit te schakelen voor niet-zichtbare elementen via de callback RecyclerView.OnChildAttachStateChangeListener. Dit voorkomt FPS-daling tijdens het scrollen van lange lijsten met geanimeerde pictogrammen.

Lottie-animaties aanpassen en beheren

Lottie biedt een krachtige API voor het aanpassen van kant-en-klare animaties zonder het originele After Effects-bestand te wijzigen. Hiermee kan een enkele animatie worden aangepast aan verschillende thema’s, kleuren en app-groottes.

Kleur wijzigen via KeyPath

Vul- en lijnkleuren kunnen tijdens runtime worden gewijzigd via KeyPath — een stringpad naar het animatie-element. Om bijvoorbeeld de kleur van een winkelwagenpictogram van rood naar blauw te wijzigen, volstaat het om de KeyPath te vinden en een nieuwe waarde toe te passen. Dit elimineert de noodzaak om meerdere versies van dezelfde animatie voor verschillende kleurenschema’s op te slaan.

Snelheid en voortgang beheren

Elke Lottie-animatie kan worden bestuurd op snelheid (animationSpeed), voortgang (setProgress) en framebeperking (play(fromFrame:toFrame:)). De voortgangsmodus maakt het mogelijk de animatie te synchroniseren met een scrollgebaar: hoe verder het scherm wordt gescrolld, hoe verder de animatie is gevorderd — dit is een populaire techniek voor onboarding en parallax-effecten.