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 !

 

 

 

2 réflexions sur “Tutoriel Swift : des animations faciles avec Lottie !

  1. 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'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'aime

Répondre

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.