Tutoriel Swift : des animations faciles avec Lottie !

IphoneX Lottie Snowman

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 :

IphoneX Lottie Snowman

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 :

LottiePodfile

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/vinceBar/lottie-tutorial

Et voici le code du ViewController :

LottieTutorial

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/vinceBar/lottie-tutorial

Et si vous avec des questions ou suggestions, commentez !

 

 

 

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.