Bonjour ! Je suis zm soft, un développeur inscrit fin 2023 qui a commencé à publier des applications. Je prévois également de lancer une application pour développeurs — consultez-la à son lancement.
Utilisez-vous des animations dans vos applications ? Même une petite animation peut rendre une application plus claire et plus soignée. Aujourd'hui je veux écrire sur l'ajout d'animations aux applications Android.
LottieAnimation
J'utilise LottieAnimation, une bibliothèque d'affichage d'animations. Je l'ai choisie car elle rend l'ajout d'animations légères relativement simple.
Quelles animations sont disponibles
L'un des meilleurs atouts de cette bibliothèque est l'énorme sélection d'animations disponibles gratuitement. Vous pouvez les parcourir sur le site LottieFiles. Il y a beaucoup d'options payantes aussi, mais filtrer par gratuit est plus que suffisant pour la plupart des cas d'utilisation.
Je n'ai ni les compétences ni l'énergie pour créer des animations de zéro, donc chaque fois que j'ai besoin de quelque chose d'animé, je commence par voir ce qui est disponible sur ce site. Par exemple, utiliser une animation "appuyez ici" au premier lancement est un excellent moyen de guider les utilisateurs vers les zones cliquables. J'ai en fait utilisé une animation comme celle-ci pour montrer aux utilisateurs comment interagir avec mon application.
L'attrait est la simplicité
L'implémentation est simple. Si vous avez juste besoin d'afficher une animation dans une mise en page fixe, c'est tout ce dont vous avez besoin — aucune logique requise :
Implémentation Lottie de base
Lottie est extrêmement simple à implémenter. Il suffit de l'intégrer dans votre mise en page et cela fonctionne sans logique supplémentaire.
Exemple :
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_id"
app:lottie_rawRes="@raw/your_lottie_animation"/>
Comment utiliser Lottie
Voici le flux de travail général :
- Ajouter la bibliothèque (mettre à jour
build.gradle) - Obtenir et placer le fichier d'animation
- Configurer le fichier de mise en page
- Personnaliser l'animation
Implémentation avec du code
Ajout de la bibliothèque à build.gradle :
D'abord, ajoutez la bibliothèque pour rendre Lottie disponible. Utilisez la dernière version sauf si vous avez des problèmes de compatibilité.
dependencies {
implementation 'com.airbnb.android:lottie:3.4.0'
}
Placement du fichier d'animation :
Téléchargez votre fichier d'animation (.json) depuis LottieFiles et placez-le dans le dossier res/raw de votre application.
Configuration de la mise en page :
Ajoutez LottieAnimationView à votre mise en page XML et référencez le fichier d'animation que vous avez téléchargé.
Personnalisation de l'animation :
Vous pouvez personnaliser le comportement de l'animation selon vos besoins :
- Activer ou désactiver la boucle
- Définir le nombre de boucles
- Définir la vitesse de lecture (y compris la lecture inverse)
Avec le contrôle dynamique, vous pouvez jouer/mettre en pause à tout moment ou changer la vitesse par programmation.
Pour la configuration statique, les attributs suivants contrôlent le comportement de l'animation :
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_id"
android:scaleType="centerCrop"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_speed="0.15"
app:lottie_rawRes="@raw/your_lottie_animation"/>
Cet exemple joue automatiquement your_lottie_animation.json en boucle à 0,15× de vitesse.
Pour le contrôle dynamique :
lottieAnimationView.playAnimation()
Vous pouvez également ajouter un listener pour détecter quand une animation se termine :
lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {
// Appelé quand l'animation démarre
}
override fun onAnimationEnd(animation: Animator) {
// Appelé quand l'animation se termine
}
override fun onAnimationCancel(animation: Animator) {
// Appelé quand l'animation est annulée
}
override fun onAnimationRepeat(animation: Animator) {
// Appelé quand l'animation se répète
}
})
Mises en garde et dépannage
Lottie est très utile, mais il y a quelques points à surveiller. Le repositionnement d'objets ne fonctionne pas toujours comme prévu. Voici deux vrais problèmes que j'ai rencontrés.
Exemple de dépannage 1 :
J'ai causé un débordement de pile dans la façon dont je gérais l'événement de fin d'animation. Plus précisément, j'avais configuré une lecture avant et arrière alternée — et appeler la lecture suivante directement depuis le callback créait une récursion infinie. La correction consistait à envoyer au thread principal plutôt que d'appeler directement :
lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {
// Appelé quand l'animation démarre
}
override fun onAnimationEnd(animation: Animator) {
lottieAnimationView.speed = lottieAnimationView.speed*(-1) // inverser la direction
lottieAnimationView.post {
// Envoyer pour éviter le débordement de pile d'un appel récursif direct
if(isAttachedToWindow) {
lottieAnimationView.playAnimation()
}
}
}
override fun onAnimationCancel(animation: Animator) {
// Appelé quand l'animation est annulée
}
override fun onAnimationRepeat(animation: Animator) {
// Appelé quand l'animation se répète
}
})
Exemple de dépannage 2 :
Vous devez également gérer onPause. Vous devriez arrêter les animations en arrière-plan pour éviter un traitement inutile :
override fun onResume(owner: LifecycleOwner) {
super.onResume(owner)
lottieAnimationView.playAnimation()
}
override fun onPause(owner: LifecycleOwner) {
lottieAnimationView.cancelAnimation()
super.onPause(owner)
}
Cependant, si vous faites quoi que ce soit sur les événements de fin d'animation, cela seul ne suffit pas. Vous devrez également vérifier si la vue parente est toujours attachée avant de déclencher quoi que ce soit :
if(isAttachedToWindow) {
binding.lottieBackground.playAnimation()
}
Résumé
Lottie est un outil puissant pour améliorer l'interface de votre application. Il a une énorme sélection d'animations gratuites et l'implémentation est simple. Comprenez les cas particuliers, gérez-les de manière appropriée et vous en tirerez beaucoup. Malgré les pièges occasionnels, c'est une excellente bibliothèque dans l'ensemble — avec de nombreuses ressources gratuites disponibles. Vaut définitivement la peine d'essayer si vous voulez améliorer l'aspect de votre application.