Animatievoorbeelden

Wat is inbegrepen

• Vier 480 x 480 animatievoorbeelden, ingedeeld als Position-, Size-, Opacity- en Mixed-borden.
• Positieanimatie, waarbij een widget van de ene locatie naar de andere beweegt met keyframed X/Y-wijzigingen.
• Grootteanimatie, waarbij widgetbreedte en -hoogte worden aangepast met keyframed W/H-wijzigingen.
• Opacity-animatie, waarbij de blend-transparantie in de tijd verandert voor fade-achtige effecten.
• Gemengde animatie, waarbij meerdere animatietracks op één widget worden gecombineerd.
• Play Animation-knoppen, één per voorbeeld, zodat elke timeline vanuit de UI kan worden gestart.
• Timeline/keyframe-editorvoorbeeld, dat de echte animatiemodus met tracks en keyframes toont.
• PicoPixel-logodoel, gebruikt als geanimeerde widget in elk voorbeeld.
• Herbruikbare visuele iconen, waaronder graphics voor positie, grootte, opacity en gemengde animatie.
• Roboto-fontassets, gebruikt voor kaartkoppen, bijschriften en knoppen.

Asset-snapshot

Het assets-paneel toont dit als een compacte LVGL-animatiereferentie:

• Afbeeldingen: 5, waaronder het PicoPixel-logo, logotype en kleine animatieconcepticonen.
• Kleuren: 0, waarbij kleuren rechtstreeks in het ontwerp zijn toegepast.
• Fonts: 2, Roboto 22 en Roboto Bold 32.
• Widgets: 0, zodat het voorbeeld gericht blijft op schermobjecten, events en animatietimelines.

Zichtbare afbeeldingsassets zijn onder andere:

• 96x96 cyaan icoon in positie/resize-stijl.
• 96x96 cyaan gestippeld icoon in opacity-stijl.
• 250x250 PicoPixel-logoafbeelding.
• 356x100 PicoPixel-logotypeafbeelding.
• 96x96 roze icoon in mixed/position-stijl.

Die assetset is bewust klein. De beweging komt uit keyframed LVGL-objecteigenschappen, niet uit het opslaan van een grote reeks afbeeldingsframes.

Laagstructuur

Het lagenpaneel groepeert het project per animatietype:

• Position, met Play Pos Animation, Pico Logo, Image 1 en labels.
• Size, met Play Size Animation, Pico Logo, Image 3 en labels.
• Opacity, met Play Opacity Animation, Pico Logo, Image 4 en labels.
• Mixed, met Play Mixed Animation, Pico Logo en labels.

Elk bord volgt hetzelfde lespatroon: een titel en beschrijving leggen het animatietype uit, een PicoPixel-logo fungeert als geanimeerd doel en een blauwe knop start de weergave.

Timeline en keyframes

Het kernpunt van deze sjabloon is dat de animaties timeline-gestuurd zijn. In het voorbeeld van de animatie-editor toont de linkerkant animatietypen zoals Position, Size, Opacity en Mixed. De timeline klapt daarna de geselecteerde geanimeerde widget uit in eigenschapstracks.

Voor het gemengde voorbeeld toont de screenshot:

• Positietracks, met aparte X- en Y-waarden.
• Groottetracks, met aparte W- en H-waarden.
• Opacity-track, met een %-waarde.
• Meerdere keyframes, geplaatst op verschillende momenten in de tijd.
• Timeline-scrubbing, zodat je de animatie op een exacte timestamp kunt inspecteren.

Dit maakt het voorbeeld krachtiger dan een eenvoudige overgang. Je kunt een widget choreograferen door exacte waarden op exacte momenten in te stellen en daarna het resultaat bekijken voordat je exporteert.

Timeline-animaties versus frame-animaties

Deze sjabloon gaat over keyframed widgetanimaties: LVGL-objecten in de tijd verplaatsen, vergroten/verkleinen en laten vervagen. Dat is anders dan een frame-gebaseerde animated image, waarbij elk frame een afzonderlijke bitmap is.

• Gebruik deze sjabloon wanneer je de eigenschappen van een LVGL-object wilt animeren, zoals positie, breedte, hoogte of opacity.
• Gebruik een LVGL animated image wanneer je een vooraf gerenderde framereeks hebt, zoals een spinner, sprite-achtige loader of geïllustreerde loop.
• Gebruik de event editor wanneer je wilt dat een knop, schermlading, gesture of andere trigger een van deze animaties afspeelt.

Beide benaderingen kunnen nuttig zijn. Keyframes zijn meestal beter voor UI-beweging en overgangen, omdat ze het object bewerkbaar houden en kunnen voorkomen dat je veel afbeeldingsframes moet opslaan.

Waarom dit goed werkt voor LVGL

LVGL is sterk in het bijwerken van objecteigenschappen in de tijd, en PicoPixel's animatiemodus maakt die waarden zichtbaar in plaats van ze te verbergen in handgeschreven C.

• Positiekeyframes mappen naar objectcoördinaten, nuttig voor panelen, iconen, kaarten en meldingsbeweging.
• Groottekeyframes mappen naar breedte en hoogte, nuttig voor uitklappende controls, pulse-effecten, progressiemarkering en focusstates.
• Opacity-keyframes mappen naar blend-transparantie, nuttig voor fades, disabled states, reveals en aandachtscues.
• Gemengde tracks combineren meerdere eigenschappen, zodat één widget als één timeline kan bewegen, van grootte kan veranderen en kan vervagen.
• Events kunnen animaties starten, zodat een knopklik de timeline kan uitvoeren in de live preview en in het geëxporteerde LVGL-project.
• Het project exporteert als standaard LVGL 8.x UI-code, zodat het kan worden geïntegreerd in ESP-IDF, Arduino, PlatformIO, STM32, Zephyr of een andere LVGL-build.

Runtime-patroon

PicoPixel kan de animatie-instelling en afspeelacties voor je genereren. Als je een geëxporteerd project met de hand moet uitbreiden, mappt hetzelfde concept naar normale LVGL-animatiecode: initialiseer een animatie, kies een doelobject, stel waarden en timing in en start hem.

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

Voor de meeste gebruikers van de sjabloon is de visuele timeline de makkelijkere route: maak de keyframes in PicoPixel, verbind een knop met de eventactie Play Animation en exporteer daarna.

Aanpassen

Gebruik dit als gratis LVGL-keyframe-animatiesjabloon en pas daarna de timelines aan je eigen UI aan.

• Vervang het PicoPixel-logo door je eigen icoon, statustegel, kaart, modal of indicator.
• Wijzig de positiekeyframes om een paneel te laten inschuiven, een melding te verplaatsen of de aandacht naar een control te leiden.
• Wijzig de groottekeyframes om een pulse, knopfeedback, uitklappende kaart of focusstate te bouwen.
• Wijzig de opacity-keyframes om content in of uit te faden.
• Combineer positie, grootte en opacity in het gemengde voorbeeld voor rijkere UI-beweging.
• Pas de timing aan zodat de animatie snel genoeg voelt voor embedded interacties.
• Gebruik events zoals Clicked of Screen Loaded om animaties op het juiste moment af te spelen.
• Houd afbeeldingsformaten bescheiden en verwijder ongebruikte assets voordat je naar geheugenbeperkte boards flasht.

Exporteren naar je project

Open de sjabloon in PicoPixel, inspecteer de animatietimeline, hernoem de belangrijke objecten en bekijk elk bord met zijn Play Animation-knop. Exporteer het project daarna als LVGL C-code.

Voor ESP32-projecten is de gebruikelijke flow:

1. Kies het bord dat past bij de beweging die je nodig hebt: Position, Size, Opacity of Mixed.
2. Vervang het logo en de labels door je eigen UI-objecten.
3. Pas de keyframes, timing en easing in de animatietimeline aan.
4. Gebruik de event editor om een trigger aan de actie Play Animation te koppelen.
5. Exporteer de PicoPixel-UI als LVGL C.
6. Voeg de geëxporteerde bestanden toe aan je ESP-IDF-, Arduino- of PlatformIO-project.
7. Roep ui_init() aan nadat LVGL en je displaydriver klaar zijn.

Lees voor meer achtergrond de event editor guide en de gids over PicoPixel templates gebruiken.

Beste toepassingen

Deze sjabloon past goed wanneer je een duidelijk startpunt wilt voor:

• LVGL-keyframe-animatievoorbeelden
• ESP32 UI-bewegingsprototypes
• Timeline-gestuurde widgetbeweging
• Door knoppen gestarte animatieweergave
• Testen van positie-, grootte- en opacity-animatie
• Laadstatussen en voortgangsfeedback
• Bevestigings- en aandachtscues
• Onboarding-schermen en interactieve demo's
• Leren hoe visuele PicoPixel-timelines LVGL-gedrag worden