Lottie Swift : guide complet avec exemples

Introduction à Lottie pour Swift

Lottie est une bibliothèque open source puissante, développée par Airbnb, qui permet d'afficher des animations vectorielles créées dans Adobe After Effects sur des plateformes mobiles et web. Les animations sont exportées au format JSON (via le plugin Bodymovin) et lues en temps réel sans perte de qualité.

Pour les développeurs Swift, Lottie ouvre des possibilités infinies : des simples indicateurs de chargement et icônes aux animations complexes plein écran, écrans d'accueil et éléments d'interface interactifs. Contrairement aux GIF ou vidéos, les animations Lottie :

• Vectorielles — se redimensionnent sans perte de qualité sur tous les appareils.
• Légères — les fichiers JSON pèsent généralement entre 1 et 50 Ko.
• Interactives — vous contrôlez la lecture, la vitesse, la couleur et la progression.
• Multiplateformes — le même JSON fonctionne sur iOS, Android, Web, React Native et Flutter.

Cet article est un guide complet pour utiliser Lottie en Swift. Vous apprendrez à installer la bibliothèque, maîtriserez toutes les méthodes clés, analyserez un exemple concret et éviterez les erreurs courantes.

Installation de Lottie

Lottie pour Swift s'installe via Swift Package Manager (SPM) ou CocoaPods. La méthode recommandée est SPM, car elle est intégrée à Xcode.

Installation via Swift Package Manager (SPM)

1. Dans Xcode, ouvrez votre projet et sélectionnez File → Add Packages...
2. Collez l'URL du dépôt : https://github.com/airbnb/lottie-ios.git
3. Choisissez la version (la dernière stable est recommandée) et cliquez sur Add Package.
4. Assurez-vous que le package est ajouté à votre cible.

Installation via CocoaPods

Si vous utilisez CocoaPods, ajoutez ceci à votre Podfile :

pod 'lottie-ios'

Exécutez ensuite :

pod install

Installation via Carthage (méthode obsolète)

github "airbnb/lottie-ios"

Exécutez carthage update --platform iOS et ajoutez le framework à votre projet.

Important : Après l'installation, importez la bibliothèque dans le fichier souhaité :

import Lottie

Démarrage rapide avec un exemple de code

Créons une application simple qui lit une animation Lottie en plein écran.

Étape 1 : Préparez le fichier JSON

Téléchargez ou créez une animation Lottie. Pour tester, utilisez des animations gratuites sur LottieFiles. Placez le fichier JSON (par exemple, animation.json) dans le dossier Assets de votre projet Xcode.

Étape 2 : Écrivez le code

import UIKit
import Lottie

class ViewController: UIViewController {
    
    private var animationView: LottieAnimationView?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 1. Initialisation de l'animation depuis Assets
        animationView = LottieAnimationView(name: "animation")
        
        // 2. Configuration des dimensions et de la position
        animationView?.frame = view.bounds
        animationView?.contentMode = .scaleAspectFit
        
        // 3. Ajout à l'écran
        view.addSubview(animationView!)
        
        // 4. Lancement de l'animation
        animationView?.play { (finished) in
            print("Animation terminée : \(finished)")
        }
    }
}

Lancez l'application — vous verrez l'animation jouer une fois. Pour la rendre infinie, remplacez l'appel play par play(fromProgress: 0, toProgress: 1, loopMode: .loop).

Méthodes et fonctions principales de Lottie

Voici les 10 méthodes clés de Lottie pour Swift. Chaque méthode est accompagnée d'une description, de ses paramètres et d'un exemple de code fonctionnel.