Lottie : qu'est-ce que c'est, animations et fonctionnement sur les plateformes mobiles

Qu'est-ce que Lottie et comment ça marche

Lottie est une bibliothèque open source créée par Airbnb en 2015 pour le rendu d'animations vectorielles en temps réel. Le développeur crée une animation dans Adobe After Effects, l'exporte via le plugin Bodymovin en JSON, et Lottie lit ce JSON sur l'appareil cible en interprétant les calques, les formes, la transparence et les courbes d'animation.

Contrairement aux fichiers vidéo ou GIF, Lottie est indépendant de la résolution — l'animation est rendue vectoriellement et apparaît identique sur les appareils avec n'importe quel DPI. Une animation JSON est en moyenne 5 à 10 fois plus petite qu'un GIF ou une vidéo équivalente, ce qui est critique pour les applications mobiles à bande passante limitée.

Selon Airbnb Engineering, l'adoption de Lottie a réduit la taille des animations dans l'application de 80 % par rapport aux séquences vidéo Precomposed, tout en maintenant 60 FPS sur tous les appareils pris en charge. Aujourd'hui, Lottie est pris en charge sur iOS, Android, Flutter, React Native, Web (HTML Canvas et SVG) et les plateformes de bureau.

Les performances de Lottie proviennent du rendu natif : sur iOS, il utilise Core Animation avec CALayer, sur Android — son propre moteur de rendu Canvas en C++ via JNI. Cela permet de lire des animations complexes avec des dizaines de calques sans perte d'images, même sur des appareils de milieu de gamme. Contrairement aux solutions basées sur WebView (GIF, APNG, vidéo), Lottie ne crée pas de processus de rendu séparé et ne consomme pas de mémoire supplémentaire pour le décodage des images.

Utilisez Lottie pour les indicateurs de chargement, les icônes avec micro-interactions, les écrans d'onboarding et les animations promotionnelles festives où la fluidité et la petite taille sont importantes.

L'écosystème Lottie comprend des lecteurs officiels pour huit plateformes, l'éditeur LottieFiles pour la prévisualisation dans le navigateur et une market place avec des milliers d'animations prêtes à l'emploi. Le développeur peut télécharger un JSON, l'intégrer dans un projet et ajuster les couleurs et la vitesse selon le système de conception sans ouvrir After Effects. LottieFiles fournit également un SDK pour une intégration accélérée avec la possibilité de charger des animations via un lien AIR, permettant de mettre à jour les animations sur les appareils sans publier une nouvelle version de l'application sur l'App Store ou Google Play.

Format JSON de Lottie et Bodymovin

Le schéma JSON de Lottie est un standard ouvert pour décrire l'animation vectorielle, composé de trois niveaux : composition, calques et formes. La composition contient les métadonnées : taille du canevas, fréquence d'images et durée.

Structure du JSON

L'objet JSON racine contient le champ layers — un tableau de calques d'animation. Chaque calque peut être un Shape Layer, Image Layer, Text Layer ou PreComp Layer. Pour chaque calque, des propriétés de transformation sont définies : position, échelle, rotation et opacité liées aux images clés.

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

Les images clés (Keyframes) sont définies comme des tableaux avec des horodatages, des valeurs et des courbes de Bézier pour l'interpolation. Bodymovin convertit automatiquement les courbes d'After Effects dans un format compatible Lottie, préservant le timing et les fonctions d'easing avec une précision d'image.

Bodymovin — plugin d'exportation

Bodymovin est une extension Adobe After Effects qui exporte une composition vers un fichier JSON Lottie. Le plugin prend en charge la plupart des fonctionnalités d'After Effects : formes, masques, effets, calques de texte et tracking. Des limitations s'appliquent aux calques 3D et à certains plugins — ils ne sont pas exportés et nécessitent de simplifier l'animation en 2D.

Intégration de Lottie sur iOS

Sur iOS, Lottie est intégré via Swift Package Manager, CocoaPods ou Carthage. Les classes principales sont LottieView pour SwiftUI et LottieAnimationView pour UIKit. Le package lottie-ios prend en charge les animations depuis le bundle, le réseau et les objets Data.

LottieView dans SwiftUI

LottieView est un composant View pour SwiftUI qui accepte un nom de fichier JSON du bundle ou une URL pour le chargement réseau. L'animation est lue automatiquement à la vitesse et au nombre de répétitions spécifiés.

import Lottie

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

Pour UIKit, LottieAnimationView est utilisé, configurable via Interface Builder ou par programmation. La vue prend en charge tous les états d'animation : play, pause, stop, ainsi qu'une barre de progression pour le chargement des données. LottieAnimationView peut être intégrée dans UITableViewCell ou UICollectionViewCell pour des icônes animées dans les listes — lors du défilement, l'animation se met en pause et lorsque la cellule apparaît à l'écran, elle reprend, économisant les ressources CPU et GPU.

Le développement iOS moderne utilise activement Lottie avec SwiftUI pour créer des écrans d'onboarding animés et des éléments interactifs : lors du défilement, la progression de l'animation se synchronise avec la position de défilement via ScrollViewReader. Cela crée un effet de parallaxe où l'animation suit en continu le mouvement du doigt de l'utilisateur, augmentant l'engagement sans utiliser de fichiers vidéo lourds.

Contrôle de la lecture

Le lecteur Lottie sur iOS fournit une API pour la lecture d'une image spécifique à une autre, le changement des couleurs de remplissage/trait via KeyPaths et l'écoute des événements via LottieAnimationDelegate. Vous pouvez mettre en pause l'animation pendant le défilement et la reprendre à l'arrêt pour optimiser les performances.

Intégration de Lottie sur Android

Sur Android, Lottie est ajouté via la dépendance Gradle com.airbnb.android:lottie. Le composant principal est LottieAnimationView, qui peut être placé dans une mise en page XML comme une View normale et configuré via des attributs ou par programmation.

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

Dans la mise en page XML, LottieAnimationView est configuré via des attributs : lottie_rawRes (référence au JSON dans res/raw), lottie_autoPlay, lottie_loop. Le chargement réseau est pris en charge via lottie_url ou par programmation via setAnimationFromUrl. La version Android de Lottie utilise son propre moteur de rendu Canvas, indépendant de l'accélération matérielle.

Chargement depuis RawRes et le réseau

Pour les animations statiques, le JSON est placé dans res/raw et référencé via RawRes. Pour les animations dynamiques, Lottie charge le JSON depuis une URL ou un objet Data avec un callback de progression indiquant le pourcentage de téléchargement. Le cache Lottie conserve automatiquement les animations chargées en mémoire pour éviter un nouveau téléchargement lors de rendus ultérieurs.

Lottie pour Android prend en charge l'animation dans RecyclerView via LottieAnimationView intégrée directement dans les éléments de liste. Pour optimiser les performances, il est recommandé d'utiliser setAnimation avec chargement différé et de désactiver l'animation pour les éléments hors écran via le callback RecyclerView.OnChildAttachStateChangeListener. Cela évite les chutes de FPS lors du défilement de longues listes avec des icônes animées.

Personnalisation et contrôle des animations Lottie

Lottie fournit une API puissante pour personnaliser les animations prêtes à l'emploi sans modifier le fichier After Effects original. Cela permet d'adapter une même animation à différents thèmes, couleurs et tailles d'application.

Changement de couleur via KeyPath

Les couleurs de remplissage et de trait peuvent être modifiées à l'exécution via KeyPath — un chemin de chaîne vers un élément d'animation. Par exemple, pour changer la couleur d'une icône de panier du rouge au bleu, il suffit de trouver son KeyPath et d'appliquer la nouvelle valeur. Cela élimine le besoin de stocker plusieurs versions de la même animation pour différents jeux de couleurs.

Contrôle de la vitesse et de la progression

Chaque animation Lottie peut être contrôlée par la vitesse (animationSpeed), la progression (setProgress) et la plage d'images (play(fromFrame:toFrame:)). Le mode progression permet de synchroniser l'animation avec un geste de défilement : plus l'écran défile, plus l'animation avance — une technique populaire pour l'onboarding et les effets de parallaxe.