Les micro-interactions ont un rôle très important dans la qualité perçue des interfaces utilisateur. Chaque interaction de l'utilisateur avec un élément d'interface doit générer un retour immédiat afin de montrer que l'action a été prise en compte : rien de plus énervant que de cliquer plusieurs fois sur un bouton en pensant l'interface figée pour se retrouver quelques secondes plus tard avec une multitude de fenêtres ouvertes ou de fichiers téléchargés !

Le minimum syndical lorsqu'une action nécessite du temps avant de produire un résultat (appel Webservice, traitement asynchrone etc...) est d'afficher un loader, par exemple une roue tournante le temps du traitement pour que l'utilisateur comprenne que l'ordinateur est en train de traiter son action. Cependant, de plus en plus de sites Web et d'apps présentent des animations permettant d'améliorer grandement le ressenti de l'expérience utilisateur, et ces animations sont à la portée de chaque développeur et ne nécessitent plus de code lourd et complexe à maintenir comme il y a quelques années.

Lottie : BodyMovin + Airbnb = ❤️

Lottie est un framework mobile créé par Airbnb en 2017 afin d'adapter le plugin BodyMovin qui permet d'exporter des animations vectorielles et matricielles de Adobe After Effects vers un fichier JSON intégrable sur une page Web.

BodyMovin se présente comme une extension simple à utiliser qui permet d'exporter une composition sous forme d'un JSON qui contient l'ensemble des images clés et des formes vectorielles. A partir ce ces JSON, Lottie est ensuite capable de dessiner les différentes animations conçues sous After Effects.

Exemple d'animation

Dans l'exemple ci-après, on va simplement animer les différents points qui composent le logo de Niji via des images clés dans After Effects. Après avoir importé le logo au format vectoriel, ce qui nous permettra de jouer sur les formes qui le composent, il suffit de créer des images clés de position, et de bouger la position des différents points pour créer l'animation via interpolation des positions.

Une fois l'animation terminée, il faut l'exporter via Bodymovin

Le fichier JSON est alors prêt à être intégré dans une app ou sur un site Web !

Intégration dans une app mobile

Lottie est compatible avec des apps développées en natif, iOS et Android, mais également avec React-Native et Flutter.

Pour cet exemple, nous réaliserons l'intégration dans une app native iOS. L'intégration pour Android, Flutter ou React-Native est similaire.

Il faut tout d'abord intégrer la bibliothèque Lottie dans votre projet. Pour cela, il est possible d'utiliser CocoaPods, Carthage ou bien Swift Package Manager.

Exemple avec CocoaPods :

pod 'lottie-ios'

Lottie utilise ensuite des sous-classes de UIView qui peuvent être paramétrées de façon programmatique, ou via Interface Builder.

Ici, on définit le nom de l'animation dans Interface Builder, comme on le ferait avec le nom d'un asset associé à une UIImageView et on déclenche la lecture et la boucle en code dans le ViewController associé.

On a créé un IBOutlet entre la vue AnimationView et le ViewController associé, et on déclenche la lecture avec le code suivant dans le viewDidAppear(_ animated: Bool)

animationView.loopMode = .loop
animationView.play()

Il n'y a plus qu'à lancer l'app et observer le résultat !

Aller plus loin

L'exemple que l'on a présenté est très basique, mais il permet de se rendre compte de la puissance et de la facilité d'utilisation de Lottie. Remplacer une image statique par une animation attrayante est un jeu d'enfant et n'alourdit pas les builds de vos apps : les JSON générés sont presque aussi légers que des images SVG et scalent à l'infini.

On peut donc imaginer des composants plus complexes, comme des boutons se transformant en loader puis affichant un état de succès à la fin de l'action associée.

Lottie offre la possibilité de régler finement les animations : on peut jouer sur la vitesse de lecture, les couleurs de calques, les pauses/redémarrages à certaines frames. Tout ceci nous permet donc de créer des boucles répétées au sein d'une même animation : par exemple, au clic sur un bouton, on peut faire tourner une boucle animée pendant le temps (indéterminé) d'un appel réseau, puis déclencher la fin de l'animation une fois que l'appel est réussi pour afficher un retour à l'utilisateur.

LottieFiles

Il n'est pas toujours évident de créer des animations lorsqu'on n'a pas de ressources dédiées au motion design. C'est pourquoi le site LottieFiles propose une marketplace d'animations prêtes à l'emploi, certaines gratuites et libres de droits, d'autres payantes, permettant à leurs auteurs de se rémunérer.

LottieFiles propose plusieurs milliers d'animations, et permet de les retoucher avant de les intégrer, pour y inclure les couleurs de la charte de votre app par exemple.