Lottie — qu'est-ce que c'est, animation vectorielle dans les applications mobiles

Qu'est-ce que Lottie ?

Lottie — une bibliothèque multiplateforme pour lire des animations vectorielles, développée chez Airbnb en 2015. Elle résout le problème des fichiers vidéo lourds et des feuilles de sprites raster : un designer crée une animation dans After Effects, l'exporte via Bodymovin en JSON, et un développeur intègre ce fichier dans une application mobile. Lottie rend l'animation par programmation via Canvas, Core Animation ou Skia, selon la plateforme.

Le principal avantage de Lottie — l'animation vectorielle se redimensionne sans perte de qualité sur n'importe quel écran : de l'Apple Watch aux téléviseurs 4K. La taille du fichier JSON d'animation est généralement de 5 à 50 Ko, soit des dizaines de fois moins qu'un fichier vidéo équivalent. Selon Airbnb Engineering (2025), Lottie prend en charge plus de 80% des fonctionnalités d'Adobe After Effects, notamment les masques, les effets, les courbes et les expressions.

Bodymovin — est un plugin pour After Effects (gratuit, GitHub) qui sérialise une composition au format JSON compris par l'environnement d'exécution de Lottie. Prend en charge After Effects CC 2018 et versions ultérieures. Pour les animations complexes avec de nombreuses images clés, dotLottie est recommandé — un format basé sur Lottie JSON mais compressé et emballé dans un seul fichier.

Architecture de Lottie : comment fonctionne le rendu

Lottie utilise une architecture de rendu en couches qui s'adapte aux capacités de la plateforme. Sur Android, l'animation est dessinée via l'API Canvas — le propre moteur de rendu de Lottie (LottieDrawable), qui n'utilise pas les animations système. Sur iOS, Lottie s'appuie sur Core Animation Layers, offrant des performances élevées et 60 FPS. Sur Flutter, Lottie utilise Skia Canvas via CustomPainter.

Le rendu passe par trois étapes : l'analyse JSON — décomposition de l'animation en LottieComposition (toutes les couches, formes, images clés) ; l'interpolation — calcul des valeurs intermédiaires entre les images clés en tenant compte des courbes d'easing ; le dessin — rendu de l'image actuelle sur Canvas ou via Core Animation. Lottie prend en charge l'accélération matérielle : sur Android — accélération via Canvas avec Hardware Accelerator, sur iOS — CALayer avec accélération GPU intégrée de Core Animation.

Utiliser Lottie sur Android (Kotlin)

Sur Android, LottieAnimationView étend AppCompatImageView et gère tout le cycle de chargement et de rendu. Le fichier JSON est placé dans le dossier res/raw ou assets. LottieAnimationView prend en charge le contrôle de la lecture — play, pause, resume, setFrame, setProgress, repeat, speed — et l'écoute via AnimatorUpdateListener et 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

// Configuration programmatique de 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()
}

// Chargement depuis assets et mise en cache
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

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

Bonnes pratiques Android : utilisez setCacheStrategy(CacheStrategy.Strong) pour les animations fréquemment répétées — la composition est mise en cache en mémoire et chaque nouvelle instance n'analyse pas JSON à nouveau. Pour les listes (RecyclerView), utilisez LottieAnimationView avec enableMergePathsForKitKatAndAbove(true) et disableExtraScaleModeForOlderWorkarounds() pour optimiser le rendu. Pour les animations avec fond transparent, définissez android:layerType="hardware" pour l'accélération GPU.

Utiliser Lottie sur iOS (Swift)

Sur iOS, AnimationView est la classe principale de Lottie pour UIKit et SwiftUI. Elle est ajoutée via Swift Package Manager ou CocoaPods. Les fichiers JSON sont ajoutés au bundle du projet. AnimationView détermine automatiquement l'échelle (densité logique de l'écran) et utilise Core Animation pour rendre les couches à 60 FPS.

import Lottie

// UIKit : AnimationView avec contrôle manuel
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 : animation avec progression (pour liaison à des événements)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

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

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

Bonnes pratiques iOS : pour les animations qui démarrent immédiatement après le chargement, utilisez animationView.play(fromProgress: 0, toProgress: 1) avec loopMode = .playOnce pour des effets d'accentuation ponctuels. Pour Lottie dans UITableView/UICollectionView, utilisez AnimationView avec un fichier d'animation mis en cache via LottieAnimation.cached. Le rendu d'un grand nombre de couches (50+) peut entraîner des chutes de FPS — dans ce cas, activez renderingEngine = .mainThread (par défaut) ou .coreAnimation pour macOS.

Lottie vs vidéo : comparaison des formats d'animation

Lottie diffère fondamentalement des fichiers vidéo : il ne stocke pas de pixels, mais décrit des formes vectorielles, leurs transformations et leurs courbes d'évolution dans le temps. La vidéo (MP4, WebM) est une séquence d'images raster à résolution fixe. La différence se manifeste dans la taille du fichier, la qualité de mise à l'échelle, l'interactivité et les performances.

Quand choisir Lottie : icônes de chargement, animations de likes/réactions, écrans d'intégration, micro-animations d'accentuation des boutons. Pour les scènes complexes avec effets 3D, éclairage réaliste ou personnages photoréalistes, la vidéo reste un choix plus pratique. Lottie n'est pas conçu pour lire de longues scènes (plus de 10 secondes) — la durée optimale d'une animation est de 2 à 5 secondes.

Optimisation des performances de Lottie

Les performances de Lottie dépendent du nombre de couches, de la complexité des masques et des effets, et du moteur de rendu. Pour maintenir 60 FPS sur les appareils de milieu de gamme, suivez ces recommandations : limitez le nombre de couches à 30–40 par scène, évitez les pré-compositions imbriquées qui se chevauchent, utilisez dotLottie pour les animations complexes.

// Optimisation de Lottie pour RecyclerView
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// Mise en cache de la composition en mémoire
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// Pool de LottieAnimationView pour réutilisation
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)
    }
}

// Désactivation des fonctionnalités inutiles
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // Limitation du nombre d'images

Optimisations supplémentaires : activez enableMergePathsForKitKatAndAbove(true) pour les appareils avec Android 4.4+ — cela fusionne les chemins qui se chevauchent en un seul chemin, réduisant le nombre d'appels de dessin. Utilisez dotLottie au lieu de JSON — le format binaire comprime l'animation de 50 à 80% grâce à la sérialisation protobuf, ce qui réduit le temps d'analyse. Pour les animations dans RecyclerView, définissez repeatCount = 0 (lecture unique) et arrêtez l'animation lors du défilement via recyclerView.addOnScrollListener. Selon le Airbnb Engineering Blog (2025), ces mesures réduisent la charge CPU jusqu'à 40%.