Animationsbeispiele

Enthalten

• Vier 480 x 480 Animationsbeispiele, angeordnet als Boards für Position, Size, Opacity und Mixed.
• Positionsanimation, die ein Widget mit X/Y-Keyframes von einer Stelle zu einer anderen bewegt.
• Größenanimation, die Breite und Höhe des Widgets mit W/H-Keyframes anpasst.
• Deckkraftanimation, die die Deckkraft über die Zeit für Fade-Effekte verändert.
• Gemischte Animation, die mehrere Animationsspuren auf einem einzelnen Widget kombiniert.
• Play Animation-Buttons, je ein Button pro Beispiel, damit jede Zeitleiste aus der UI ausgelöst werden kann.
• Vorschau des Keyframe-Editors mit Zeitleiste, die den echten Animationsmodus mit Spuren und Keyframes zeigt.
• PicoPixel-Logo als Animationsobjekt, das in jedem Beispiel als animiertes Widget verwendet wird.
• Wiederverwendbare visuelle Icons, darunter Grafiken für Position, Größe, Deckkraft und gemischte Animation.
• Roboto-Schrift-Assets, verwendet für Kartenüberschriften, Beschriftungen und Buttons.

Asset-Überblick

Das Assets-Panel zeigt dies als kompakte LVGL-Animationsreferenz:

• Bilder: 5, einschließlich PicoPixel-Logo, Schriftzug und kleiner Konzept-Icons für Animationen.
• Farben: 0, wobei Farben direkt im Design angewendet sind.
• Schriften: 2, Roboto 22 und Roboto Bold 32.
• Widgets: 0, damit das Beispiel auf Bildschirmobjekte, Events und Animationszeitleisten fokussiert bleibt.

Sichtbare Bild-Assets sind:

• 96x96 cyanfarbenes Icon im Position-/Resize-Stil.
• 96x96 cyanfarbenes gepunktetes Icon im Deckkraft-Stil.
• 250x250 PicoPixel-Logo-Bild.
• 356x100 PicoPixel-Schriftzug-Bild.
• 96x96 pinkfarbenes Icon im Mixed-/Position-Stil.

Dieses Asset-Set ist absichtlich klein. Die Bewegung entsteht durch per Keyframes animierte LVGL-Objekteigenschaften, nicht durch das Speichern einer großen Folge von Einzelbildern.

Ebenenstruktur

Das Ebenen-Panel gruppiert das Projekt nach Animationstyp:

• Position, enthält Play Pos Animation, Pico Logo, Image 1 und Labels.
• Size, enthält Play Size Animation, Pico Logo, Image 3 und Labels.
• Opacity, enthält Play Opacity Animation, Pico Logo, Image 4 und Labels.
• Mixed, enthält Play Mixed Animation, Pico Logo und Labels.

Jedes Board folgt demselben Lernmuster: Titel und Beschreibung erklären den Animationstyp, ein PicoPixel-Logo dient als animiertes Ziel, und ein blauer Button startet die Wiedergabe.

Zeitleiste und Keyframes

In dieser Vorlage steuerst du die Animationen über eine Zeitleiste. In der Vorschau des Animationseditors listet die linke Seite Animationstypen wie Position, Size, Opacity und Mixed. Auf der Zeitleiste werden die einzelnen Eigenschaften des ausgewählten Widgets als eigene Spuren angezeigt.

Beim gemischten Beispiel zeigt der Screenshot:

• Positionsspuren, mit getrennten Werten für X und Y.
• Größenspuren, mit getrennten Werten für W und H.
• Deckkraftspur, mit einem %-Wert.
• Mehrere Keyframes, an unterschiedlichen Zeitpunkten platziert.
• Verschiebbare Abspielposition, mit der du die Animation zu jedem gewünschten Zeitpunkt prüfen kannst.

Damit lassen sich mehr als einfache Übergänge gestalten: Lege für jede Eigenschaft den Wert zu einem bestimmten Zeitpunkt fest und prüfe die gesamte Bewegung vor dem Export.

Keyframe-Animationen vs. Frame-Animationen

Diese Vorlage dreht sich um per Keyframes animierte Widget-Animationen: LVGL-Objekte werden über die Zeit bewegt, skaliert und in ihrer Deckkraft verändert. Das unterscheidet sich von einem framebasierten animierten Bild, bei dem jedes Frame ein eigenes Bitmap ist.

• Verwende diese Vorlage, wenn du Eigenschaften eines LVGL-Objekts animieren möchtest, etwa Position, Breite, Höhe oder Deckkraft.
• Verwende ein animiertes LVGL-Bild, wenn du eine vorbereitete Bildsequenz wie einen Spinner, einen animierten Ladeindikator oder eine gezeichnete Animationsschleife hast.
• Verwende den Event-Editor, wenn ein Schaltflächenklick, das Laden einer Ansicht, eine Geste oder ein anderer Auslöser eine dieser Animationen starten soll.

Beide Ansätze können nützlich sein. Keyframes sind für UI-Bewegung und Übergänge meist besser, weil das Objekt bearbeitbar bleibt und nicht viele Bildframes gespeichert werden müssen.

Warum das gut für LVGL funktioniert

LVGL eignet sich gut dafür, Objekteigenschaften im Zeitverlauf zu aktualisieren, und der Animationsmodus von PicoPixel macht diese Werte sichtbar, statt sie in handgeschriebenem C zu verstecken.

• Positions-Keyframes steuern die Objektkoordinaten, nützlich für Panels, Icons, Karten und animierte Benachrichtigungen.
• Größen-Keyframes steuern Breite und Höhe, nützlich für aufklappende Bedienelemente, Pulsieren, Hervorheben von Fortschritten und Fokuszustände.
• Deckkraft-Keyframes steuern die Transparenz, nützlich für Überblendungen, deaktivierte Zustände, Einblendeffekte und Aufmerksamkeitshinweise.
• Gemischte Spuren kombinieren mehrere Eigenschaften, sodass ein Widget in einer einzigen Zeitleiste wandern, die Größe ändern und ausblenden kann.
• Events können Animationen auslösen, sodass ein Buttonklick die Zeitleiste in der Live-Vorschau und im exportierten LVGL-Projekt starten kann.
• Das Projekt lässt sich exportieren als Standard-LVGL-8.x-Code, integrierbar in ESP-IDF, Arduino, PlatformIO, STM32, Zephyr oder einen anderen LVGL-Build.

Ansteuerung zur Laufzeit

PicoPixel kann die Animationseinrichtung und Play-Aktionen für dich erzeugen. Wenn du ein exportiertes Projekt von Hand erweitern musst, entspricht dasselbe Konzept normalem LVGL-Animationscode: Animation initialisieren, Zielobjekt wählen, Werte und Timing setzen und starten.

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);
}

Für die meisten Nutzer der Vorlage ist die visuelle Zeitleiste der einfachere Weg: Keyframes in PicoPixel anlegen, einen Button mit der Event-Aktion Play Animation verbinden und anschließend exportieren.

Anpassen

Verwende dies als kostenlose LVGL-Keyframe-Animationsvorlage und passe die Zeitleisten anschließend an deine eigene UI an.

• Ersetze das PicoPixel-Logo durch ein eigenes Icon, eine Statuskachel, Karte, ein Dialogfenster oder eine Anzeige.
• Ändere die Positions-Keyframes, um ein Panel einzuschieben, eine Benachrichtigung zu bewegen oder die Aufmerksamkeit auf ein Bedienelement zu lenken.
• Ändere die Größen-Keyframes, um einen Puls, Button-Feedback, eine expandierende Karte oder einen Fokuszustand zu bauen.
• Ändere die Deckkraft-Keyframes, um Inhalte ein- oder auszublenden.
• Kombiniere Position, Größe und Deckkraft im Mixed-Beispiel für vielseitigere Bewegungsabläufe.
• Passe das Timing an, damit die Animation schnell genug für eingebettete Interaktionen wirkt.
• Verwende Events wie Clicked oder Screen Loaded, um Animationen im richtigen Moment abzuspielen.
• Halte Bildgrößen moderat und entferne ungenutzte Assets, bevor du auf Boards mit wenig Speicher flashst.

Export in dein Projekt

Öffne die Vorlage in PicoPixel, prüfe die Animationszeitleiste, benenne die wichtigen Objekte um und teste jedes Board mit seinem Play Animation-Button. Exportiere das Projekt danach als LVGL-C-Code.

Für ESP32-Projekte ist der übliche Ablauf:

1. Wähle das Board, das zur benötigten Bewegung passt: Position, Size, Opacity oder Mixed.
2. Ersetze Logo und Labels durch deine eigenen UI-Objekte.
3. Passe Keyframes, Timing und Bewegungskurven in der Animationszeitleiste an.
4. Verwende den Event-Editor, um einen Trigger mit der Aktion Play Animation zu verbinden.
5. Exportiere die PicoPixel-UI als LVGL-C-Code.
6. Füge die exportierten Dateien deinem ESP-IDF-, Arduino- oder PlatformIO-Projekt hinzu.
7. Rufe ui_init() auf, nachdem LVGL und dein Display-Treiber bereit sind.

Mehr Hintergrund findest du im Event-Editor-Leitfaden und im Leitfaden zur Verwendung von PicoPixel-Vorlagen.

Geeignete Einsatzbereiche

Diese Vorlage eignet sich als Ausgangspunkt für:

• LVGL-Keyframe-Animationsbeispiele
• ESP32-UI-Bewegungsprototypen
• Über die Zeitleiste gesteuerte Widget-Bewegung
• Durch Schaltflächen ausgelöste Animationswiedergabe
• Tests für Positions-, Größen- und Deckkraftanimationen
• Ladezustände und Fortschrittsfeedback
• Bestätigungs- und Aufmerksamkeitshinweise
• Einführungsseiten und interaktive Demos
• Lernen, wie Animationen aus PicoPixels Zeitleiste in LVGL umgesetzt werden