Travailler avec le widget d'image animée LVGL

Qu'est-ce que le widget d'image animée ?

Une image animée affiche une suite d’images fixes. Leur succession rapide crée l’illusion du mouvement, comme dans un folioscope. Il suffit de fournir les images, de choisir la durée de lecture et d’indiquer si la séquence doit se répéter.

Ce widget convient aux animations simples qui se répètent, comme un indicateur de chargement, un cœur qui bat ou une main qui salue.

Image animée vs. sprite : lequel utiliser ?

Ces deux widgets se ressemblent mais résolvent des problèmes différents :

• Image animée, une animation qui boucle. Utilisez-la quand votre graphique ne fait qu'une seule chose, comme un indicateur qui tourne.
• Sprite, plusieurs animations dans un seul widget, avec la possibilité de basculer entre elles (Idle, Running, Happy…). Utilisez-le quand votre graphique a besoin de plus d'un mode.

Chaque mode d’un sprite utilise sa propre image animée. Si vous avez besoin de passer d’une animation à une autre, choisissez donc un sprite.

Ajouter une image animée et importer des images

1. Ajoutez le widget Animated Image à votre écran.
2. Dans ses propriétés, trouvez la ligne Image Set et cliquez sur Add Image Set.
3. Dans l'onglet NEW, cliquez sur la zone d'import (« Click to upload frames ») et sélectionnez vos images. Vous pouvez en sélectionner plusieurs à la fois ; les formats acceptés sont PNG et JPEG (.png, .jpeg, .jpg).
4. Cliquez sur Continue pour associer les images au widget. La ligne Image Set affichera désormais le nombre d’images que vous avez (par exemple, « 8 frames »).

Vous pouvez également utiliser un ensemble de images déjà utilisé depuis l'onglet Assets plutôt que de les importer à nouveau.

Pourquoi toutes les images doivent avoir la même taille

C'est la règle à retenir absolument : chaque frame doit avoir exactement la même largeur et la même hauteur. Si vous essayez d'ajouter des images de tailles différentes, PicoPixel vous en empêche avec le message « All frames must have the same dimensions. »

Le widget affiche chaque image au même emplacement. Si l’une mesure 64×64 et la suivante 80×80, l’animation semble sauter au lieu de rester stable. Des dimensions identiques garantissent un mouvement régulier.

Régler la vitesse : la durée

Le paramètre Duration contrôle la vitesse de lecture de l'animation. Il est mesuré en millisecondes (ms) et représente le temps pour un passage complet à travers toutes les images, pas le temps par image. La valeur par défaut est 1000 ms (une seconde).

PicoPixel répartit cette durée uniformément sur vos images. Ainsi, une durée de 1000 ms répartie sur 8 images signifie que chaque image s'affiche pendant 125 ms. Vous voulez que ce soit plus rapide ? Réduisez la durée. Pour ralentir la lecture, augmentez-la.

Boucle : lire une fois ou tourner indéfiniment

Le paramètre Repeat décide de ce qui se passe quand l'animation atteint la fin. Vous avez deux choix :

• Infinite, l'animation boucle indéfiniment. C'est la valeur par défaut, et c'est ce que vous voulez pour des choses comme un indicateur qui ne doit jamais s'arrêter.
• Normal (un nombre), l'animation se joue un nombre défini de fois puis s'arrête. Mettez-le à 3 et il tourne trois fois, puis s'immobilise sur la dernière image.

Contrôler la lecture pendant que votre interface est active

Vous n'avez pas à laisser une animation se dérouler automatiquement : vous pouvez la démarrer et l'arrêter en réponse à ce que fait l'utilisateur, en utilisant l'éditeur d'événements. Ajoutez un événement, choisissez l'action Animated Image Mode, pointez-la vers votre image animée et choisissez un mode :

• Start, commencer (ou reprendre) la lecture.
• Stop, mettre l'animation en pause.
• Restart, revenir à la première image et rejouer.

Par exemple : gardez un indicateur « connexion en cours… » arrêté jusqu'à ce qu'un bouton soit pressé, puis démarrez-le, et arrêtez-le une fois la tâche terminée.

Limiter la consommation de mémoire

Chaque image d’une animation occupe de la mémoire sur l’appareil. Quelques habitudes permettent de limiter cette consommation :

• N'utilisez que les frames dont vous avez besoin. Un mouvement fluide nécessite rarement plus d'une poignée de images bien choisies.
• Gardez des dimensions de frame modestes. Une animation en 64×64 est beaucoup plus légère qu'une en 240×240.
• Adaptez votre profondeur de couleur à l'écran (consultez le tutoriel ESP32 pour en savoir plus sur la compilation pour du matériel réel).

Prochaines étapes

• Besoin de plus d'une animation dans un seul widget ? Passez au widget sprite.
• Connectez votre animation à un bouton ou un autre déclencheur avec l'éditeur d'événements.
• Installez votre interface sur un appareil avec le tutoriel LVGL pour ESP32.