Lottie: vad är det, animationer och hur fungerar det på mobila plattformar

Vad är Lottie och hur fungerar det

Lottie är ett bibliotek med öppen källkod, skapat av Airbnb 2015, för att rendera vektoranimationer i realtid. Utvecklaren skapar animationen i Adobe After Effects, exporterar den via Bodymovin-plugin till JSON, och Lottie spelar upp denna JSON på målenheten genom att tolka lager, former, genomskinlighet och animationskurvor.

Till skillnad från videofiler eller GIF är Lottie inte beroende av skärmupplösning — animationen renderas vektoriellt och ser likadan ut på enheter med vilket DPI som helst. Storleken på en JSON-animation är i genomsnitt 5-10 gånger mindre än en motsvarande GIF eller video, vilket är kritiskt för mobila appar med begränsad datatrafik.

Enligt Airbnb Engineering minskade införandet av Lottie storleken på animationer i appen med 80% jämfört med Precomposed video, medan bildfrekvensen förblev 60 FPS på alla enheter. Idag stöds Lottie på iOS, Android, Flutter, React Native, Web (HTML Canvas och SVG) och stationära plattformar.

Lotties prestanda säkerställs av native-rendering: på iOS används Core Animation med CALayer, på Android — en egen Canvas-renderare i C++ via JNI. Detta gör det möjligt att spela upp komplexa animationer med dussintals lager utan bildförlust även på mellanklass-enheter. Till skillnad från WebView-lösningar (GIF, APNG, video) skapar Lottie ingen separat process för rendering och förbrukar inte extra minne för att avkoda bildrutor.

Använd Lottie för laddningsindikatorer, ikoner med mikrointeraktioner, onboarding-skärmar och festliga kampanjanimationer där jämnhet och liten storlek är viktiga.

Lottie-ekosystemet inkluderar officiella spelare för åtta plattformar, LottieFiles-redigeraren för förhandsvisning i webbläsaren och en marknadsplats med tusentals färdiga animationer. Utvecklaren kan ladda ner JSON, integrera den i projektet och justera färger och hastighet enligt designsystemet utan att öppna After Effects. LottieFiles tillhandahåller även SDK för snabbare integration med möjlighet att ladda animationer via AIR-länk, vilket gör det möjligt att uppdatera animationer på enheter utan att publicera en ny version av appen i App Store eller Google Play.

JSON-format för Lottie och Bodymovin

JSON-schemat Lottie är en öppen standard för att beskriva vektoranimation, som består av tre nivåer: komposition (composition), lager (layers) och former (shapes). Kompositionen innehåller metadata: canvasstorlek, bildfrekvens och varaktighet.

JSON-struktur

Rot-JSON-objektet innehåller fältet layers — en array av animationslager. Varje lager kan vara en form (Shape Layer), bild (Image Layer), text (Text Layer) eller prekomposition (PreComp Layer). För varje lager definieras transformationsegenskaper: position, skala, rotation och genomskinlighet kopplade till nyckelbildrutor.

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

Nyckelbildrutor (Keyframes) anges med arrayer av tidsstämplar, värden och Bezier-kurvor för interpolation. Bodymovin konverterar automatiskt After Effects-kurvor till ett format som Lottie förstår, och bevarar timing och ease-funktioner med bildnogramhet.

Bodymovin — exportplugin

Bodymovin är ett tillägg för Adobe After Effects som exporterar kompositionen till en Lottie JSON-fil. Pluginprogrammet stöder de flesta funktioner i After Effects: former, masker, effekter, textlager och spårning. Begränsningarna gäller 3D-lager och vissa pluginprogram — de exporteras inte och kräver förenkling av animationen till 2D.

Integrera Lottie på iOS

På iOS integreras Lottie via Swift Package Manager, CocoaPods eller Carthage. Huvudklassen — LottieView för SwiftUI och LottieAnimationView för UIKit. Paketet lottie-ios inkluderar stöd för animationer från bundle, nätverk och Data-objekt.

LottieView i SwiftUI

LottieView är en View-komponent för SwiftUI som tar emot JSON-filnamnet från bundle eller en URL för att ladda från nätet. Animationen spelas automatiskt upp med angiven hastighet och antal upprepningar.

import Lottie

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

För UIKit används LottieAnimationView med konfiguration via Interface Builder eller programmatiskt. View stöder alla animationstillstånd: play, pause, stop, samt en förloppsindikator för att ladda data. LottieAnimationView kan bäddas in i UITableViewCell eller UICollectionViewCell för animerade ikoner i listor — vid scrollning pausas cellanimationen och återupptas när den visas på skärmen, vilket sparar CPU- och GPU-resurser.

Modern iOS-utveckling använder aktivt Lottie i kombination med SwiftUI för att skapa animerade onboarding-skärmar och interaktiva element: vid scrollning synkroniseras animationens förlopp med scrollpositionen via ScrollViewReader. Detta skapar en parallaxeffekt där animationen kontinuerligt följer användarens fingerrörelse, vilket ökar engagemanget utan att använda tunga videofiler.

Hantera uppspelning

Lottie-spelaren på iOS tillhandahåller API för uppspelning från en specifik bildruta till en annan, ändra fyllnings-/linjefärg via KeyPaths och lyssna på händelser via LottieAnimationDelegate. Du kan pausa animationen vid scrollning och återuppta vid stopp för prestandaoptimering.

Integrera Lottie på Android

På Android ansluts Lottie via Gradle-beroendet com.airbnb.android:lottie. Huvudkomponenten — LottieAnimationView, som kan placeras i XML-layouten som en vanlig View och konfigureras via attribut eller programmatiskt.

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

I XML-layouten konfigureras LottieAnimationView via attribut: lottie_rawRes (referens till JSON i res/raw), lottie_autoPlay, lottie_loop. Laddning från nätet stöds via lottie_url eller programmatiskt via setAnimationFromUrl. Android-versionen av Lottie använder en egen Canvas-renderare, oberoende av hårdvaruacceleration.

Ladda från RawRes och nätet

För statiska animationer placeras JSON i res/raw och refereras via RawRes. För dynamiska animationer laddar Lottie JSON från en URL eller ett Data-objekt med en förloppscallback som visar laddningsprocenten. Lotties cache sparar automatiskt laddade animationer i minnet för att undvika omladdning vid upprepad rendering.

Lottie för Android stöder animation i RecyclerView via LottieAnimationView inbäddad direkt i listelementet. För prestandaoptimering rekommenderas att använda setAnimation med fördröjd laddning och inaktivera animation för osynliga element via callback RecyclerView.OnChildAttachStateChangeListener. Detta förhindrar FPS-fall vid scrollning av långa listor med animerade ikoner.

Anpassa och hantera Lottie-animationer

Lottie tillhandahåller ett kraftfullt API för att anpassa färdiga animationer utan att ändra den ursprungliga After Effects-filen. Detta gör det möjligt att anpassa en enda animation till olika teman, färger och appstorlekar.

Ändra färg via KeyPath

Fyllnings- och linjefärger kan ändras under körning via KeyPath — en säkväg till animationselementet. Till exempel, för att ändra färgen på en varukorgsikon från röd till blå, räcker det att hitta dess KeyPath och tillämpa ett nytt värde. Detta eliminerar behovet av att lagra flera versioner av samma animation för olika färgscheman.

Hantera hastighet och förlopp

Varje Lottie-animation kan kontrolleras efter hastighet (animationSpeed), förlopp (setProgress) och bildintervall (play(fromFrame:toFrame:)). Förloppsläget gör det möjligt att synkronisera animationen med en scrollgest: ju längre skärmen scrollas, desto mer framskriden är animationen — detta är en populär teknik för onboarding och parallaxeffekter.