Überblick
Das Widget für animierte Bilder ist der einfachste Weg, Bewegung auf deinen Bildschirm zu bringen – ein drehender Ladekreis, ein hüpfendes Symbol, ein blinkendes Auge. Diese Anleitung erklärt, wie das LVGL-Widget für animierte Bilder in PicoPixel funktioniert: wie du eines hinzufügst, warum jeder Frame die gleiche Größe haben muss, wie du Geschwindigkeit und Schleifen steuerst und wie du es starten und stoppen kannst, während deine Oberfläche läuft.
Was ist das Widget für animierte Bilder?
Ein animiertes Bild spielt eine Folge von Standbildern nacheinander ab, wie ein Daumenkino. Jedes Bild ist ein Frame, und das schnelle Durchblättern erzeugt die Illusion von Bewegung. Du gibst ihm eine Reihe von Frames, sagst ihm, wie schnell es abspielen soll und ob es in einer Schleife laufen soll, und es erledigt den Rest.
Es ist perfekt für eine einzelne, sich wiederholende Animation: ein Ladespinner, ein pulsierendes Herz, eine winkende Hand. Ein Widget spielt dabei eine Bildsequenz in einer Schleife ab.
Im Hintergrund handelt es sich um LVGLs lv_animimg-Widget. Wenn du dein Projekt exportierst, schreibt PicoPixel den LVGL-Code für dich (lv_animimg_create, lv_animimg_set_src, lv_animimg_set_duration usw.) – du musst ihn nie anfassen. Es zielt auf LVGL 8.x ab.
Animiertes Bild vs. Sprite – was soll ich verwenden?
Diese beiden Widgets sehen ähnlich aus, lösen aber unterschiedliche Probleme:
- Animiertes Bild – eine Animation, die in einer Schleife läuft. Greife darauf zurück, wenn deine Grafik immer nur eine Sache tut, wie ein Spinner, der dreht.
- Sprite – mehrere Animationen in einem Widget, mit der Möglichkeit, zwischen ihnen zu wechseln (Idle, Running, Happy…). Greife darauf zurück, wenn deine Grafik mehr als einen Modus benötigt.
Tatsächlich besteht ein Sprite aus animierten Bildern – jeder seiner Modi ist im Hintergrund sein eigenes animiertes Bild. Wenn du also feststellst, dass du eine zweite Animation haben möchtest, zu der du wechseln kannst, ist ein Sprite die passende Wahl.
Ein animiertes Bild hinzufügen und Frames hochladen
- Füge das Animated Image-Widget zu deinem Bildschirm hinzu.
- Suche in seinen Eigenschaften die Zeile Image Set und klicke auf Add Image Set.
- Klicke auf der Registerkarte NEW auf den Upload-Bereich („Click to upload frames") und wähle deine Bilder aus. Du kannst viele auf einmal auswählen; die Formate sind PNG und JPEG (
.png,.jpeg,.jpg). - Klicke auf Continue, um die Frames mit dem Widget zu verknüpfen. Die Image Set-Zeile zeigt dann an, wie viele Frames du hast (zum Beispiel „8 frames").
Du kannst auch einen bereits verwendeten Frame-Satz aus der Registerkarte Assets auswählen, anstatt ihn erneut hochzuladen.
Frames werden alphabetisch nach Dateiname sortiert. Benenne sie also in Reihenfolge mit führenden Nullen: frame_01.png, frame_02.png, frame_03.png, um sicherzustellen, dass sie in der richtigen Reihenfolge abgespielt werden. Ein Name wie frame_2.png würde nach frame_10.png sortiert werden, was deine Animation durcheinanderbringt.
Ein animiertes Bild benötigt mindestens 2 Frames, und du kannst bis zu 32 hinzufügen. Wenn du mehr Bewegung benötigst, erwäge weniger, aber gut gewählte Keyframes – jeder Frame wird auf dem Gerät gespeichert.
Warum alle Frames die gleiche Größe haben müssen
Dabei gilt eine feste Regel: Jeder Frame muss exakt die gleiche Breite und Höhe haben. Wenn du versuchst, Frames unterschiedlicher Größe hinzuzufügen, stoppt PicoPixel dich mit der Meldung „All frames must have the same dimensions."
Der Grund ist einfach. Das Widget zeichnet jeden Frame an der gleichen Stelle, in der gleichen Box. Wenn Frame 1 64×64 und Frame 2 80×80 ist, würde das Bild bei der Wiedergabe springen oder sich verschieben. Gleiche Abmessungen sorgen dafür, dass die Animation ruhig an ihrem vorgesehenen Platz bleibt.
Ändere die Größe deiner Frames vor dem Hochladen. Der schnellste Weg zu einer sauberen Sequenz ist, jeden Frame vom gleichen Arbeitsfläche in deinem Bildbearbeitungsprogramm zu exportieren, sodass sie garantiert die gleichen Abmessungen haben.
Die Geschwindigkeit einstellen: Dauer
Die Einstellung Duration steuert, wie schnell die Animation abgespielt wird. Sie wird in Millisekunden (ms) gemessen und stellt die Zeit für einen vollständigen Durchgang durch alle Frames dar – nicht die Zeit pro Frame. Der Standardwert ist 1000 ms (eine Sekunde).
PicoPixel teilt diese Dauer gleichmäßig auf deine Frames auf. Eine Dauer von 1000 ms auf 8 Frames verteilt bedeutet also, dass jeder Frame für 125 ms angezeigt wird. Willst du es schneller? Verringere die Dauer. Langsamer und entspannter? Erhöhe sie.
Schleifen: einmal abspielen oder für immer laufen
Die Einstellung Repeat bestimmt, was passiert, wenn die Animation das Ende erreicht. Du hast zwei Möglichkeiten:
- Infinite – die Animation läuft für immer in einer Schleife. Das ist der Standard und was du für Dinge wie einen Spinner möchtest, der nie aufhören soll.
- Normal (eine Anzahl) – die Animation spielt eine festgelegte Anzahl von Malen ab und stoppt dann. Setze es auf 3 und es läuft dreimal, dann hält es beim letzten Frame an.
Wiedergabe steuern, während deine Benutzeroberfläche läuft
Du musst eine Animation nicht automatisch ablaufen lassen: Du kannst sie als Reaktion auf das, was der Benutzer tut, starten und stoppen, indem du den Event-Editor verwendest. Füge ein Ereignis hinzu, wähle die Aktion Animated Image Mode und dein animiertes Bild als Ziel. Anschließend wählst du einen Modus:
- Start – Abspielen beginnen (oder fortsetzen).
- Stop – die Animation pausieren.
- Restart – zum ersten Frame zurückspringen und erneut abspielen.
Zum Beispiel: Lasse einen Ladeindikator zunächst pausiert, bis eine Schaltfläche gedrückt wird, dann starte ihn und stoppe ihn, sobald die Aufgabe abgeschlossen ist.
Speicher schonen
Animationen sind nur Bilder, und Bilder nehmen auf einem kleinen Gerät Platz ein. Mit diesen Schritten begrenzt du den Speicherbedarf:
- Verwende nur die Frames, die du brauchst. Flüssige Bewegung braucht selten mehr als eine Handvoll gut gewählter Frames.
- Halte die Abmessungen klein. Eine 64×64-Animation benötigt deutlich weniger Speicher als eine mit 240×240 Pixeln.
- Passe deine Farbtiefe an das Display an (sieh dir das ESP32-Tutorial für mehr Informationen zum Erstellen für echte Hardware an).
Damit das animierte Bild in deiner Firmware funktioniert, muss LV_USE_ANIMIMG in der lv_conf.h aktiviert sein. PicoPixel vermerkt dies für dich in der exportierten README.md, sodass dein Build (oder dein KI-Assistent) genau weiß, was aktiviert werden muss.
Nächste Schritte
- Brauchst du mehr als eine Animation in einem einzelnen Widget? Wechsle zum Sprite-Widget.
- Verknüpfe deine Animation mit einem Button oder einem anderen Auslöser mit dem Event-Editor.
- Bringe deine fertige Benutzeroberfläche auf ein Gerät mit dem ESP32-LVGL-Tutorial.
