Bonjour, Habr!
À un moment donné, le propriétaire du produit nous a demandé de réfléchir à la création d'un processus efficace pour introduire l'animation dans notre application Android / iOS. À ce moment-là, nous avons fait la tâche de pré-remplir l'application avec des données personnelles pour un produit de prêt, et il a fallu un certain temps pour que le serveur réponde, pendant lequel nous voulions montrer une belle animation de chargement.
La tâche était claire: le concepteur voulait dessiner magnifiquement, donner le code source aux deux
plates-formes sans dopilivaniya de sa part, et pour qu'il ne traîne pas sur les appareils plus anciens (oui, nous supportons toujours Android 4.1).
Quelles étaient mes options pour introduire l'animation:- Stylos utilisant un vecteur animé dessinable. La bonne chose est que le rendu fonctionne
dans un thread séparé (à partir de l'api 25), les inconvénients sont la complexité de création de telles animations et un petit nombre de manipulations avec des objets. Pour les animations simples, tout fonctionne bien, mais un peu plus compliqué, et l'enfer commence. Oui, et sur différentes plateformes, vous ne démarrerez pas. - Gif - ils pèsent beaucoup, ont une taille fixe, ce qui signifie qu'ils ne se mettent pas à l'échelle normalement. Et vous ne ferez aucune manipulation spéciale avec eux.
- La séquence png (pas de commentaire).
Ayant creusé pendant un certain temps vers l'animation vectorielle native de l'androïde et du gif (oh mon dieu, nous avons toujours envisagé cette option), je me suis souvenu de la merveilleuse bibliothèque Lottie et je l'ai montrée à mes collègues.
Après quelques tests avec différents périphériques, nous avons décidé que la bibliothèque devait être implémentée, d'autant plus que ses capacités étaient impressionnantes. Le concepteur était particulièrement ravi, maintenant il pouvait faire presque n'importe quelle animation dans Adobe After Effects, et exporter vers un fichier json en quelques clics. Nous avons également été ravis, mais tout d'abord.
Lottie a été inventé et mis en œuvre par Airbnb en réponse à une demande croissante d'animation multiplateforme, il fonctionne donc également (enfin, presque) sur toutes les plates-formes. Les développeurs eux-mêmes affirment que leur objectif est de réaliser le nombre maximum de fonctionnalités After Effects, et ils y sont parvenus. L'intégration d'une animation Lottie est aussi simple que l'insertion d'une image dans ImageView.
Classes clés 3:- LottieAnimationView est le successeur d'ImageView et le moyen le plus simple d'utiliser l'animation. Vous pouvez décrire l'animation en xml, ou vous pouvez dans le code, la plupart des méthodes sont prises en charge.
- LottieDrawable - Descendant dessinable, avec les mêmes fonctionnalités que la classe précédente, vous permet d'appliquer une animation à n'importe quelle vue.
- LottieComposition et son compagnon LottieCompositionFactory vous permettent de précharger des animations à partir de diverses sources et de les appliquer à LottieDrawable et LottieAnimationView.
Chargement des ressources
Prend en charge le chargement des ressources à partir de:
- res / raw
- src / actifs
- Json string
- Toute URL du réseau menant à un fichier json ou zip (implémentée via HttpURLConnection, afin de ne pas ajouter de dépendances externes. Si vous avez une animation avec des images, vous devez utiliser zip)
- Fichier json ou zip InputStream
Mise en cache d'animation
La chose intéressante est que toutes les animations téléchargées via res / raw ou assets sont enregistrées par le cache LRU, ce qui nous permet de ne pas perdre de temps à recharger et analyser l'animation, car dans le cas d'animations complexes, cela peut prendre un certain temps. Ce qui est encore plus cool, si vous avez besoin de précharger l'animation, puis d'afficher instantanément l'animation dans le fragment suivant, vous pouvez utiliser le code
LottieCompositionFactory.fromRawRes(context, rawFile)
L'animation est mise en cache à l'aide de la clé rawFile, et là où vous en avez vraiment besoin, elle démarre presque instantanément.
Gestion du progrès
Lottie vous permet de définir l'état actuel de l'animation via setProgress (...). Cela peut être utile si vous souhaitez animer l'état de téléchargement de fichier, la position de défilement, divers gestes, etc. J'ai vu diverses implémentations sur BottomSheets, PullToRefresh, CollapsingToolbarLayout.
Voici comment utiliser progress avec AppBarLayout:
appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset -> val percent = Math.abs(verticalOffset).toFloat()/appBarLayout.totalScrollRange animationView.progress = percent })
Boucle
Lottie prend en charge setRepeatMode () ou setRepeatCount () en boucle non seulement toute l'animation, mais aussi tout fragment à l'intérieur (0.0 ... 1.0). Ceci est implémenté par les propriétés setMinFrame, setMaxFrame, setMinAndMaxFrame. Nous l'avons utilisé pour ne pas implémenter 3 animations pour différents états de téléchargement de fichiers: inactif, progression, terminé. Voici un petit morceau de code qui résout ce problème:
when (loadingStatus) { LoadingStatus.IDLE -> { animationView.setMaxProgress(0.1f) } LoadingStatus.PROGRESS -> { animationView.setMinAndMaxProgress(0.2f, 0.9f) animationView.repeatCount = LottieDrawable.INFINITE animationView.playAnimation() } LoadingStatus.COMPLETE -> { animationView.setMinAndMaxProgress(0.9f, 1f) animationView.repeatCount = 1 animationView.playAnimation() }}
Les photos
L'un des principaux avantages de Lottie pour nous est que la bibliothèque prend en charge l'insertion d'images directement dans l'animation. De plus, vous pouvez insérer à la fois une image statique et une image dynamique téléchargée sur Internet. Je vais maintenant expliquer comment cela fonctionne.
Dans le cas d'une image statique, tout est simple: le concepteur décharge l'archive contenant json plus l'image elle-même.
{ "v": "5.1.13", "fr": 29.9700012207031, "ip": 0, "op": 47.0000019143492, "w": 1034, "h": 1334, "nm": " 1", "ddd": 0, "assets": [ { "id": "image_0", "w": 130, "h": 436, "u": "images/", "p": "img_0.png" }, { "id": "comp_0", "layers": [ ... ]}] }
Cette img_0.png, c'est l'image que vous devez mettre dans src / assets, et qui sera à l'intérieur de l'animation.
Pour le chargement dynamique, la méthode setImageAssetDelegate est utilisée, à laquelle vous devez transmettre le bitmap. Nous préchargeons l'image avec Glide, donc au stade de l'ouverture d'un fragment avec une animation et une image, tout sort du cache, donc tout est assez rapide. Voici le code:
glideLoader.loadAsBitmap(imageUrl).into(object: CustomTarget<Bitmap>() { override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) { viewAnimation.setImageAssetDelegate(object: ImageAssetDelegate { override fun fetchBitmap(asset: LottieImageAsset?): Bitmap { asset?.let { val resizeBitmap =Bitmap.createScaledBitmap(resource, it.width, it.height, true); return resizeBitmap } ?: run { return resource } } }) setAnimation(viewAnimation, animationImage) } override fun onLoadCleared(placeholder: Drawable?) {} })
Performances
Bien sûr, il vaut mieux ne pas utiliser beaucoup d'animation sur des écrans où l'utilisateur passe beaucoup de temps, car il est exigeant pour le processeur. Selon nos tests, la charge du processeur sur certaines animations atteint 20%. Par conséquent, le cas idéal d'une telle animation est constitué d'éléments interactifs qui se déclenchent une fois.
Si l'animation sur certains appareils ralentit, cela aide parfois
viewAnimation.useHardwareAcceleration(true)
Cependant, les développeurs recommandent d'utiliser cette méthode avec prudence, car différents téléphones utilisent l'accélération matérielle de différentes manières, donc au lieu de l'accélération, vous pouvez obtenir l'effet inverse.
Conclusion
En général, l'utilisation de la bibliothèque Lottie simplifie considérablement la mise en œuvre de l'animation dans l'application.
Les principaux avantages de la lottie que nous avons mis en évidence:- Petite taille de bibliothèque (300 ko)
- Solution multiplateforme ios / android / web
- Télécharger des animations sur le Web
- Gestion des progrès et bouclage n'importe où
- Un grand nombre de fonctionnalités issues d'effets secondaires permet au concepteur de réaliser l'effet recherché.
Inconvénients:- Le rendu est effectué dans le thread principal et les fps peuvent chuter de manière significative dans l'application.
- L'analyse des animations de Lottie peut prendre un temps considérable avec des animations complexes.
Au fait, pour vérifier à quel point l'animation est gourmande en ressources, vous pouvez utiliser l'application officielle
Lottie de Google Play . Il y a un graphique de rendu où vous pouvez voir le temps de rendu d'une image et voir à quoi ressemblera l'animation si vous la coupez en images, ou comment l'accélération matérielle et bien plus encore affecteront.