Présentation
Le widget d'image animée est la façon la plus simple d'ajouter du mouvement à votre écran : un indicateur de chargement qui tourne, une icône qui rebondit, un œil qui cligne. Ce guide explique comment fonctionne le widget d'image animée LVGL dans PicoPixel : comment en ajouter un, pourquoi chaque image doit avoir la même taille, comment contrôler la vitesse et la mise en boucle, et comment le démarrer et l'arrêter pendant que votre interface est en cours d'exécution.
Qu'est-ce que le widget d'image animée ?
Une image animée joue une séquence d'images fixes l'une après l'autre, comme un flipbook. Chaque image est une frame, et les faire défiler rapidement crée l'illusion du mouvement. Vous lui fournissez un ensemble de frames, vous lui dites à quelle vitesse jouer et s'il doit boucler, et il fait le reste.
C'est parfait pour une animation unique et répétitive : un spinner de chargement, un cœur qui pulse, une main qui fait signe. Un widget, une séquence, jouant en boucle.
Sous le capot, c'est le widget lv_animimg de LVGL. Quand vous exportez votre projet, PicoPixel écrit le code LVGL pour vous (lv_animimg_create, lv_animimg_set_src, lv_animimg_set_duration, etc.), vous n'avez jamais à y toucher. Il cible LVGL 8.x.
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 spinner 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.
En fait, un sprite est constitué d'images animées : chacun de ses modes est sa propre image animée sous le capot. Donc si vous vous retrouvez à vouloir une deuxième animation vers laquelle basculer, c'est le signe d'utiliser un sprite à la place.
Ajouter une image animée et importer des frames
- Ajoutez le widget Animated Image à votre écran.
- Dans ses propriétés, trouvez la ligne Image Set et cliquez sur Add Image Set.
- 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). - Cliquez sur Continue pour attacher les frames au widget. La ligne Image Set affichera désormais le nombre de frames que vous avez (par exemple, « 8 frames »).
Vous pouvez également utiliser un ensemble de frames déjà utilisé depuis l'onglet Assets plutôt que de les importer à nouveau.
Les frames sont triées alphabétiquement par nom de fichier, nommez-les donc en séquence avec des zéros non significatifs : frame_01.png, frame_02.png, frame_03.png, pour garantir qu'elles se lisent dans le bon ordre. Un nom comme frame_2.png se trierait après frame_10.png, ce qui désorganiserait votre animation.
Une image animée nécessite au minimum 2 frames, et vous pouvez en ajouter jusqu'à 32. Si vous avez besoin de plus de mouvement, envisagez moins de frames bien choisies — chaque frame est stockée sur l'appareil.
Pourquoi toutes les frames 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 frames de tailles différentes, PicoPixel vous en empêche avec le message « All frames must have the same dimensions. »
La raison est simple. Le widget dessine chaque frame au même endroit, dans la même boîte. Si la frame 1 fait 64×64 et la frame 2 fait 80×80, l'image sauterait et se déplacerait pendant la lecture au lieu de s'animer doucement sur place. Le fait de garder toutes les frames identiques en taille est ce qui rend le mouvement propre.
Redimensionnez vos frames pour qu'elles correspondent avant de les importer. La façon la plus rapide d'obtenir une séquence propre est d'exporter chaque frame depuis le même canevas dans votre outil d'image, afin qu'elles aient garantiment les mêmes dimensions.
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 frames, pas le temps par frame. La valeur par défaut est 1000 ms (une seconde).
PicoPixel répartit cette durée uniformément sur vos frames. Ainsi, une durée de 1000 ms répartie sur 8 frames signifie que chaque frame s'affiche pendant 125 ms. Vous voulez que ce soit plus rapide ? Réduisez la durée. Plus lent et plus détendu ? 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 spinner 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 frame.
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 frame et rejouer.
Par exemple : gardez un spinner « 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.
Garder la mémoire légère
Les animations sont juste des images, et les images prennent de la place sur un petit appareil. Quelques habitudes permettent de rester efficace :
- N'utilisez que les frames dont vous avez besoin. Un mouvement fluide nécessite rarement plus d'une poignée de frames 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).
Si vous exportez vers du firmware, l'image animée nécessite LV_USE_ANIMIMG activé dans votre lv_conf.h. PicoPixel le note pour vous dans le README.md exporté, afin que votre build (ou votre assistant IA) sache exactement quoi activer.
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.
- Emportez votre interface terminée sur un appareil avec le tutoriel LVGL pour ESP32.
