Exemplesd’animation

Ce qui est inclus

• Quatre exemples d'animation 480 x 480, organisés en panneaux Position, Size, Opacity et Mixed.
• Animation de position, qui déplace un widget d'un emplacement à un autre avec des changements X/Y par images clés.
• Animation de taille, qui ajuste la largeur et la hauteur du widget avec des changements W/H par images clés.
• Animation d'opacité, qui modifie la opacité dans le temps pour des effets de fondu.
• Animation mixte, qui combine plusieurs pistes d'animation sur un seul widget.
• Boutons Play Animation, un par exemple, afin de déclencher chaque timeline depuis l'interface.
• Aperçu de l'éditeur timeline/images clés, montrant le mode d'animation réel avec pistes et images clés.
• Cible logo PicoPixel, utilisée comme widget animé dans chaque exemple.
• Icônes visuelles réutilisables, notamment des graphismes de position, taille, opacité et animation mixte.
• Ressources de police Roboto, utilisées pour les titres de cartes, les légendes et les boutons.

Ressources du projet

Le panneau des ressources présente ce projet comme une référence compacte d'animation LVGL :

• Images : 5, dont le logo PicoPixel, le logotype et de petites icônes conceptuelles d'animation.
• Couleurs : 0, les couleurs étant appliquées directement dans le design.
• Polices : 2, Roboto 22 et Roboto Bold 32.
• Widgets : 0, afin de garder l'exemple centré sur les objets d'écran, les événements et les timelines d'animation.

Les ressources image visibles comprennent :

• Icône cyan de style position/redimensionnement en 96x96.
• Icône cyan en pointillés de style opacité en 96x96.
• Image du logo PicoPixel en 250x250.
• Image du logotype PicoPixel en 356x100.
• Icône rose de style mixte/position en 96x96.

Cet ensemble de ressources est volontairement petit. Le mouvement vient de propriétés d'objets LVGL animées par images clés, et non du stockage d'une grande séquence d'images.

Structure des calques

Le panneau des calques regroupe le projet par type d'animation :

• Position, contenant Play Pos Animation, Pico Logo, Image 1 et des libellés.
• Size, contenant Play Size Animation, Pico Logo, Image 3 et des libellés.
• Opacity, contenant Play Opacity Animation, Pico Logo, Image 4 et des libellés.
• Mixed, contenant Play Mixed Animation, Pico Logo et des libellés.

Chaque panneau suit le même schéma pédagogique : un titre et une description expliquent le type d'animation, un logo PicoPixel sert de cible animée, et un bouton bleu déclenche la lecture.

Timeline et images clés

Le point central de ce modèle est que les animations sont contrôlées par timeline. Dans l'aperçu de l'éditeur d'animation, la partie gauche liste les types d'animation comme Position, Size, Opacity et Mixed. La timeline développe ensuite le widget animé sélectionné en pistes de propriétés.

Pour l'exemple mixte, la capture montre :

• Pistes de position, avec des valeurs X et Y séparées.
• Pistes de taille, avec des valeurs W et H séparées.
• Piste d'opacité, avec une valeur %.
• Plusieurs images clés, placées à différents moments dans le temps.
• Défilement de la timeline, pour inspecter l'animation à un horodatage précis.

Vous pouvez définir précisément les valeurs du widget à chaque instant et vérifier le mouvement dans l’aperçu avant l’export.

Images clés ou séquence d’images ?

Ce modèle concerne les animations de widgets par images clés : déplacer, redimensionner et faire varier l'opacité d'objets LVGL dans le temps. C'est différent d'une image animée basée sur des images, où chaque image est un bitmap séparé.

• Utilisez ce modèle lorsque vous voulez animer les propriétés d'un objet LVGL, comme la position, la largeur, la hauteur ou l'opacité.
• Utilisez une image animée LVGL lorsque vous avez une séquence de images pré-rendue, comme un indicateur de chargement, un animation de chargement de type sprite ou une boucle illustrée.
• Utilisez l'éditeur d'événements lorsque vous voulez qu'un bouton, un chargement d'écran, un geste ou un autre déclencheur lance l'une de ces animations.

Les deux méthodes sont utiles. Les images clés conviennent particulièrement aux mouvements et aux transitions d’interface : elles gardent les widgets modifiables et évitent souvent de stocker une longue séquence d’images.

Pourquoi cela fonctionne bien pour LVGL

LVGL permet de modifier les propriétés des objets au fil du temps. Le mode Animation rend ces réglages visibles et vous évite de les écrire directement en C.

• Les images clés de position correspondent aux coordonnées d'objet, utiles pour les panneaux, icônes, cartes et déplacements de notifications.
• Les images clés de taille correspondent à la largeur et à la hauteur, utiles pour les contrôles extensibles, effets de pulsation, mises en avant de progression et états de focus.
• Les images clés d'opacité correspondent à la opacité, utiles pour les fondus, états désactivés, révélations et signaux visuels.
• Les pistes mixtes combinent plusieurs propriétés, afin qu'un widget puisse se déplacer, changer de taille et s'estomper dans une seule timeline.
• Les événements peuvent déclencher les animations, donc un clic sur un bouton peut lancer la timeline dans l'aperçu en direct et dans le projet LVGL exporté.
• Le projet s'exporte en code d'interface LVGL 8.x standard, intégrable à ESP-IDF, Arduino, PlatformIO, STM32, Zephyr ou un autre projet LVGL.

Fonctionnement dans le firmware

PicoPixel génère la configuration des animations et les actions qui les lancent. Pour compléter le code exporté à la main, suivez le principe habituel de LVGL : initialiser une animation, lui associer un objet, définir ses valeurs et sa durée, puis la démarrer.

static void set_opa(void * obj, int32_t value)
{
    lv_obj_set_style_opa((lv_obj_t *)obj, (lv_opa_t)value, 0);
}

static void fade_logo(lv_obj_t * logo)
{
    lv_anim_t a;
    lv_anim_init(&a);
    lv_anim_set_var(&a, logo);
    lv_anim_set_values(&a, LV_OPA_COVER, LV_OPA_30);
    lv_anim_set_time(&a, 450);
    lv_anim_set_exec_cb(&a, set_opa);
    lv_anim_start(&a);
}

Le plus simple est de créer les images clés dans la timeline PicoPixel, de relier un bouton à l’action Play Animation, puis d’exporter le projet.

Personnalisation

Utilisez-le comme modèle gratuit d'animation LVGL par images clés, puis adaptez les timelines à votre propre interface.

• Remplacez le logo PicoPixel par votre propre icône, tuile de statut, carte, modale ou indicateur.
• Modifiez les images clés de position pour faire glisser un panneau, déplacer une notification ou guider l'attention vers un contrôle.
• Modifiez les images clés de taille pour créer une pulsation, une réaction visuelle à un appui, une carte extensible ou un état de focus.
• Modifiez les images clés d'opacité pour faire apparaître ou disparaître du contenu.
• Combinez position, taille et opacité dans l'exemple mixte pour un mouvement d'interface plus riche.
• Ajustez le durée et le rythme afin que l'animation soit assez rapide pour les interactions embarquées.
• Utilisez des événements comme Clicked ou Screen Loaded pour lancer les animations au bon moment.
• Gardez des images de taille modeste et supprimez les ressources inutilisées avant de flasher sur des cartes limitées en mémoire.

Exporter vers votre projet

Ouvrez le modèle dans PicoPixel, inspectez la timeline d'animation, renommez les objets importants et prévisualisez chaque panneau avec son bouton Play Animation. Exportez ensuite le projet en code C LVGL.

Pour intégrer le projet à un ESP32 :

1. Choisissez le panneau qui correspond au mouvement dont vous avez besoin : Position, Size, Opacity ou Mixed.
2. Remplacez le logo et les libellés par vos propres objets d'interface.
3. Ajustez les images clés, le durée et le rythme et la courbe d’accélération dans la timeline d'animation.
4. Utilisez l'éditeur d'événements pour connecter un déclencheur à l'action Play Animation.
5. Exportez l'interface PicoPixel en C LVGL.
6. Ajoutez les fichiers exportés à votre projet ESP-IDF, Arduino ou PlatformIO.
7. Appelez ui_init() une fois LVGL et votre pilote d'affichage prêts.

Pour plus de contexte, lisez le guide de l'éditeur d'événements et le guide sur l'utilisation des modèles PicoPixel.

Idées d’utilisation

Ce modèle convient bien lorsque vous voulez un point de départ clair pour :

• Exemples d'animation LVGL par images clés
• Prototypes de mouvement d'interface ESP32
• Mouvement de widgets contrôlé par timeline
• Lecture d'animation déclenchée par bouton
• Tests d'animation de position, taille et opacité
• États de chargement et retours de progression
• Retours de confirmation et signaux visuels
• Écrans d'prise en main et démos interactives
• Comprendre comment les timelines visuelles PicoPixel deviennent un comportement LVGL