Exemplesdanimation

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 transparence de mélange 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.

Instantané des ressources

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.

C'est ce qui rend l'exemple plus puissant qu'une simple transition. Vous pouvez chorégraphier un widget en définissant des valeurs exactes à des moments exacts, puis prévisualiser le résultat avant l'export.

Animations timeline ou animations par 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 frames, où chaque frame 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 frames pré-rendue, comme un spinner, un loader 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 approches peuvent être utiles. Les images clés sont généralement meilleures pour les mouvements et transitions d'interface, car elles gardent l'objet modifiable et peuvent éviter de stocker de nombreuses frames.

Pourquoi cela fonctionne bien pour LVGL

LVGL sait bien mettre à jour des propriétés d'objets dans le temps, et le mode animation de PicoPixel rend ces valeurs visibles au lieu de les cacher dans du C écrit à la main.

• 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 transparence de mélange, utiles pour les fondus, états désactivés, révélations et signaux d'attention.
• 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 live 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 build LVGL.

Modèle d'exécution

PicoPixel peut générer pour vous la configuration des animations et les actions de lecture. Si vous devez étendre un projet exporté à la main, le même concept correspond au code d'animation LVGL normal : initialiser une animation, choisir un objet cible, définir les valeurs et le timing, 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);
}

Pour la plupart des utilisateurs du modèle, la timeline visuelle est le chemin le plus simple : créez les images clés dans PicoPixel, connectez un bouton à l'action d'événement Play Animation, puis exportez.

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, un retour de bouton, 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 timing 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 les projets ESP32, le flux habituel est :

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 timing et l'easing 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.

Meilleures utilisations

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 d'attention
• Écrans d'onboarding et démos interactives
• Comprendre comment les timelines visuelles PicoPixel deviennent un comportement LVGL