Je ne sais pas si vous vous êtres déjà frotté à la programmation d’animations pour iOS ou mac OS, mais moi je trouve cela passablement compliqué et rébarbatif !
Heureusement, Airbnb à eu la bonne idée de mettre à notre disposition le framework Lottie !
Il s’agit ni plus ni moins que d’une méthode simple pour importer directement un fichier d’animation créé avec Adobe After Effects dans notre application Swift !
Comment ? Voyons cela…
Grâce à Lottie, les développeurs peuvent maintenant facilement intégrer le travail des designer dans leurs apps. Cela fait gagner un temps fou !
Concrètement, Lottie est un framework développé par l’entreprise Airbnd, utilisable avec iOS, mac OS, Android et React Native.
Les designers créent leurs animations avec After Effect, puis les exportent au format JSON grâce à une extension open source nommée Bodymovin.
Il ne reste « plus » qu’à intégrer ce fichier JSON dans notre application et à le lire…
Et le mieux, si vous n’êtes pas graphiste (comme moi 🙂 ), c’est que le site LottieFile a pensé à vous, et qu’il y a des centaines d’animations gratuites à télécharger.
Allez, fini la présentation, on entre dans le vif du sujet, place à la démo !
Nous allons donc créer une application iOS « LottieTutorial » avec 2 boutons et 1 animation :
En premier, il faut récupérer Lottie. Vous pouvez le télécharger ici : https://github.com/airbnb/lottie-ios ou l’intégrer à votre code avec Cocoapods.
Voici le podfile :
Ensuite, récupérez le fichier json ici : https://www.lottiefiles.com/3415-snowman et copiez-le à la racine de votre projet.
Voilà, le plus dur est fait !
Je vous laisse créer la vue, les images de boutons sont trouvables dans le projet de démo ici : https://gitlab.com/camilleBar/lottie-tutorial
Et voici le code du ViewController :
Pour intégrer notre animation, il faut :
- Importer Lottie
- Définir les propriétés de l’animation : fonction startAnim()
- Et la lancer : animationView.play()
A comparer au code nécessaire pour créer une telle animation de manière traditionnelle…
Comme d’habitude, le code source de la démo se trouve ici : https://gitlab.com/camilleBar/lottie-tutorial
Et si vous avec des questions ou suggestions, commentez !
Pour quelques lignes de plus... 
Bonjour, j’ai beau chercher partout je ne trouve pas la réponse à ma question !
J’ai pour projet de créer un jeu type quizz et je veux animer les images, j’ai entendu parler de lottie et je pense que ça m’aiderait pas mal (déjà pour garder une appli très légère et parce que je travaille avec after effects donc pas de soucis de ce côté la) mais je n’arrive tout simplement pas à comprendre si, une fois l’appli créée, chaque personne devra télécharger lottie pour que mon appli fonctionne et affiche les animations ou le truc sera intégré à mon appli ?
Ou alors il leur faudra une connection internet pour récupérer ce fameux « pod » (dont vous parler avec « cocoapods » (je ne sais pas ce que c’est du tout)) à chaque fois qu’ils lanceront l’appli ?
Ou alors ils n’ont besoin de rien et l’appli fonctionnera entièrement sans internet et sans rien besoin de faire de plus ?
Je trouve plein de chose sur lottie mais impossible d’avoir la réponse à cette question simple, probablement parce qu’elle est un peu bête parce que je ne connais pas suffisamment la programmation android et ios mais en tout cas voila, si vous avez la réponse ça m’aiderait haha ! Merci!
J’aimeJ’aime
Bonjour Tazok,
Lottie est un framework que l’on intègre lors du développement de l’application, ici, sous Xcode.
C’est au développeur de récupérer les librairies qui vont bien, via par exemple Cocoa Pods, et de les intégrer (ainsi que les animations générées sous After Effect) à l’application.
Ensuite, le binaire est distribué via l’App Store, et l’utilisateur final doit juste télécharger et installer l’application.
En espérant ainsi répondre à votre interrogation,
Bonne journée,
Vincent.
J’aimeJ’aime