Kapitel 15 – Animationen

LVGL 9 mit MicroPython
Kapitel	15
Titel	Animationen
Voraussetzungen	Grundkenntnisse in MicroPython
Getestet mit	LVGL 9.x
Schwierigkeitsgrad	★★★★☆
Benötigte Zeit	50 Minuten
Status	in Arbeit

Kapitel 15 – Animationen

Lernziel

Nach diesem Kapitel kannst du

• einfache Animationen erstellen,
• Werte über Zeit verändern,
• UI-Elemente bewegen und verändern,
• weiche Übergänge in LVGL nutzen.

Was ist eine Animation?

Eine Animation verändert einen Wert über die Zeit.

Beispiele:

• Position eines Buttons
• Größe eines Widgets
• Farbe eines Elements
• Transparenz

Grundprinzip

Eine Animation besteht aus:

• Objekt (was animiert wird)
• Eigenschaft (was sich ändert)
• Startwert
• Endwert
• Dauer

Einfaches Beispiel

import lvgl as lv

scr = lv.screen_active()

label = lv.label(scr)
label.set_text("Animation")
label.align(lv.ALIGN.LEFT_MID, 10, 0)

Animation erstellen

def anim_x(obj, v):
    obj.set_x(v)

a = lv.anim_t()
a.init()
a.set_var(label)
a.set_values(10, 200)
a.set_time(1000)
a.set_exec_cb(anim_x)
lv.anim_t.start(a)

Erklärung

• set_var → Objekt, das animiert wird
• set_values → Start- und Endwert
• set_time → Dauer in Millisekunden
• set_exec_cb → Funktion, die ausgeführt wird

Ergebnis

Das Label bewegt sich horizontal über den Bildschirm.

Animation: Größe ändern

def anim_w(obj, v):
    obj.set_width(v)

a = lv.anim_t()
a.init()
a.set_var(label)
a.set_values(50, 200)
a.set_time(800)
a.set_exec_cb(anim_w)
lv.anim_t.start(a)

Animation: Transparenz

def anim_opa(obj, v):
    obj.set_style_opa(v, 0)

a = lv.anim_t()
a.init()
a.set_var(label)
a.set_values(0, 255)
a.set_time(1000)
a.set_exec_cb(anim_opa)
lv.anim_t.start(a)

Wichtiger Hinweis

Hinweis

Viele Eigenschaften können nur über Styles animiert werden.

Direkte Animation funktioniert nur bei einfachen Werten wie Position oder Größe.

Typischer Fehler

Achtung

Animationen funktionieren nur, wenn das Objekt existiert.

Wird das Objekt gelöscht, bricht die Animation ab.

Beispiel: Button Animation

btn = lv.button(scr)
btn.align(lv.ALIGN.CENTER, 0, 0)

def move(obj, v):
    obj.set_x(v)

a = lv.anim_t()
a.init()
a.set_var(btn)
a.set_values(0, 150)
a.set_time(1200)
a.set_exec_cb(move)
lv.anim_t.start(a)

Anwendung

Animationen werden verwendet für:

• Übergänge zwischen Screens
• Menüs
• Ladeanzeigen
• visuelle Rückmeldungen
• moderne UI-Effekte

Merke

Merke

Eine Animation verändert einen Wert kontinuierlich über die Zeit.

Zusammenfassung

• Animationen verändern Werte über Zeit
• Sie benötigen eine Callback-Funktion
• Typische Werte sind Position, Größe und Transparenz
• Animationen verbessern die UI-Qualität deutlich