Animationsbeispiele

Enthalten

• Vier 480 x 480 Animationsbeispiele, angeordnet als Boards für Position, Size, Opacity und Mixed.
• Positionsanimation, die ein Widget mit gekeyten X/Y-Änderungen von einer Stelle zu einer anderen bewegt.
• Größenanimation, die Breite und Höhe des Widgets mit gekeyten W/H-Änderungen anpasst.
• Deckkraftanimation, die die Blend-Transparenz ü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 Timeline aus der UI ausgelöst werden kann.
• Vorschau des Timeline-/Keyframe-Editors, die den echten Animationsmodus mit Spuren und Keyframes zeigt.
• PicoPixel-Logo-Ziel, das in jedem Beispiel als animiertes Widget verwendet wird.
• Wiederverwendbare visuelle Icons, darunter Grafiken für Position, Größe, Deckkraft und gemischte Animation.
• Roboto-Font-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, Logotype 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 Animations-Timelines 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-Logotype-Bild.
• 96x96 pinkfarbenes Icon im Mixed-/Position-Stil.

Dieses Asset-Set ist absichtlich klein. Die Bewegung entsteht durch keyframed 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.

Timeline und Keyframes

Der Kern dieser Vorlage ist, dass die Animationen von einer Timeline gesteuert werden. In der Vorschau des Animationseditors listet die linke Seite Animationstypen wie Position, Size, Opacity und Mixed. Die Timeline klappt das ausgewählte animierte Widget anschließend in Eigenschaftsspuren auf.

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.
• Timeline-Scrubbing, damit Sie die Animation an einem exakten Zeitstempel prüfen können.

Dadurch ist das Beispiel deutlich mächtiger als eine einfache Transition. Sie können ein Widget choreografieren, indem Sie exakte Werte zu exakten Zeiten setzen, und das Ergebnis vor dem Export ansehen.

Timeline-Animationen vs. Frame-Animationen

Diese Vorlage dreht sich um keyframed 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.

• Verwenden Sie diese Vorlage, wenn Sie Eigenschaften eines LVGL-Objekts animieren möchten, etwa Position, Breite, Höhe oder Deckkraft.
• Verwenden Sie ein animiertes LVGL-Bild, wenn Sie eine vorgerenderte Frame-Sequenz wie einen Spinner, einen Sprite-ähnlichen Loader oder eine illustrierte Schleife haben.
• Verwenden Sie den Event-Editor, wenn ein Button, ein Screen-Load, eine Geste oder ein anderer Trigger 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 editierbar bleibt und nicht viele Bildframes gespeichert werden müssen.

Warum das gut für LVGL funktioniert

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

• Positions-Keyframes werden Objektkoordinaten zugeordnet, nützlich für Panels, Icons, Karten und Benachrichtigungsbewegungen.
• Größen-Keyframes werden Breite und Höhe zugeordnet, nützlich für aufklappende Controls, Pulse-Effekte, Fortschrittsbetonung und Fokuszustände.
• Deckkraft-Keyframes werden Blend-Transparenz zugeordnet, nützlich für Fades, deaktivierte Zustände, Reveals und Aufmerksamkeitshinweise.
• Gemischte Spuren kombinieren mehrere Eigenschaften, sodass ein Widget in einer einzigen Timeline wandern, die Größe ändern und ausblenden kann.
• Events können Animationen auslösen, sodass ein Buttonklick die Timeline in der Live-Vorschau und im exportierten LVGL-Projekt starten kann.
• Das Projekt exportiert als standardmäßiger LVGL-8.x-UI-Code, integrierbar in ESP-IDF, Arduino, PlatformIO, STM32, Zephyr oder einen anderen LVGL-Build.

Laufzeitmuster

PicoPixel kann die Animationseinrichtung und Play-Aktionen für Sie erzeugen. Wenn Sie ein exportiertes Projekt von Hand erweitern müssen, 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 Timeline der einfachere Weg: Keyframes in PicoPixel anlegen, einen Button mit der Event-Aktion Play Animation verbinden und anschließend exportieren.

Anpassen

Verwenden Sie dies als kostenlose LVGL-Keyframe-Animationsvorlage und passen Sie die Timelines anschließend an Ihre eigene UI an.

• Ersetzen Sie das PicoPixel-Logo durch Ihr eigenes Icon, Status-Tile, Ihre Karte, Ihr Modal oder Ihren Indikator.
• Ändern Sie die Positions-Keyframes, um ein Panel einzuschieben, eine Benachrichtigung zu bewegen oder die Aufmerksamkeit auf ein Control zu lenken.
• Ändern Sie die Größen-Keyframes, um einen Puls, Button-Feedback, eine expandierende Karte oder einen Fokuszustand zu bauen.
• Ändern Sie die Deckkraft-Keyframes, um Inhalte ein- oder auszublenden.
• Kombinieren Sie Position, Größe und Deckkraft im Mixed-Beispiel für reichere UI-Bewegung.
• Passen Sie das Timing an, damit die Animation schnell genug für eingebettete Interaktionen wirkt.
• Verwenden Sie Events wie Clicked oder Screen Loaded, um Animationen im richtigen Moment abzuspielen.
• Halten Sie Bildgrößen moderat und entfernen Sie ungenutzte Assets, bevor Sie auf speicherbegrenzte Boards flashen.

Export in Ihr Projekt

Öffnen Sie die Vorlage in PicoPixel, prüfen Sie die Animations-Timeline, benennen Sie die wichtigen Objekte um und testen Sie jedes Board mit seinem Play Animation-Button. Exportieren Sie das Projekt danach als LVGL-C-Code.

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

1. Wählen Sie das Board, das zur benötigten Bewegung passt: Position, Size, Opacity oder Mixed.
2. Ersetzen Sie Logo und Labels durch Ihre eigenen UI-Objekte.
3. Passen Sie Keyframes, Timing und Easing in der Animations-Timeline an.
4. Verwenden Sie den Event-Editor, um einen Trigger mit der Aktion Play Animation zu verbinden.
5. Exportieren Sie die PicoPixel-UI als LVGL C.
6. Fügen Sie die exportierten Dateien Ihrem ESP-IDF-, Arduino- oder PlatformIO-Projekt hinzu.
7. Rufen Sie ui_init() auf, nachdem LVGL und Ihr Display-Treiber bereit sind.

Mehr Hintergrund finden Sie im Event-Editor-Leitfaden und im Leitfaden zur Verwendung von PicoPixel-Vorlagen.

Beste Einsatzfälle

Diese Vorlage passt gut, wenn Sie einen klaren Ausgangspunkt brauchen für:

• LVGL-Keyframe-Animationsbeispiele
• ESP32-UI-Bewegungsprototypen
• Timeline-gesteuerte Widget-Bewegung
• Button-getriggerte Animationswiedergabe
• Tests für Positions-, Größen- und Deckkraftanimationen
• Ladezustände und Fortschrittsfeedback
• Bestätigungs- und Aufmerksamkeitshinweise
• Onboarding-Screens und interaktive Demos
• Lernen, wie visuelle PicoPixel-Timelines zu LVGL-Verhalten werden