Les problèmes de performances du Lottie proviennent généralement du fichier et non du lecteur. After Effects facilite l'ajout de fonctionnalités coûteuses à restituer image par image sur un téléphone.
Commencez par le fichier. Les masques et les passe-partout représentent souvent le coût le plus élevé ; remplacez-les par des formes plus simples lorsque cela est possible. Supprimez les effets et les flous dont le joueur n'a pas besoin. Fusionnez les formes, réduisez le nombre de calques et précomposez soigneusement. Les grandes images intégrées ajoutent de la mémoire et des coûts de décodage, alors optimisez-les ou remplacez-les par des vecteurs. Un inspecteur Lottie, tel que notre visionneuse gratuite Lottie JSON, vous aide à voir ce qu'il y a à l'intérieur d'un fichier.
Vérifiez ensuite comment l'application le lit. Les animations qui continuent de tourner en boucle lorsqu'elles sont hors écran, dans un onglet fermé ou dans une cellule de liste qui défile utilisent toujours le processeur et la batterie. Mettez-les en pause lorsqu'ils ne sont pas visibles et arrêtez les boucles qui ne sont pas nécessaires. Évitez de jouer des dizaines d'animations à la fois.
Choisissez les bonnes options pour votre plateforme. Sur le Web, les moteurs de rendu SVG et Canvas fonctionnent différemment selon l'animation, alors testez les deux. Le format compressé .lottie (dotLottie) réduit la taille du téléchargement. Sur Android, testez avec l'accélération matérielle là où votre lecteur la prend en charge.
Enfin, mesurez sur un appareil bas de gamme. Si une animation est encore trop lourde, ce n'est peut-être pas le bon outil pour le travail : un simple CSS ou une animation native peut remplacer une boucle décorative, et les composants interactifs peuvent être mieux construits dans un outil basé sur l'état tel que Rive ou ExodeUI, que nous créons.