Animatievoorbeelden

Wat is inbegrepen

• Vier animatievoorbeelden van 480 x 480, verdeeld over de schermen Position, Size, Opacity en Mixed.
• Positieanimatie, waarbij keyframes de X- en Y-coördinaten veranderen.
• Grootteanimatie, waarbij keyframes de breedte (W) en hoogte (H) veranderen.
• Animatie van de dekking, waarmee een widget geleidelijk zichtbaar of transparant wordt.
• Een gecombineerde animatie, met meerdere animatiesporen voor één widget.
• Play Animation-knoppen, waarmee je elk voorbeeld vanuit de interface start.
• Een voorbeeld van de animatie-editor, met de tijdlijn, sporen en keyframes in beeld.
• Het PicoPixel-logo, als bewegende widget in elk voorbeeld.
• Herbruikbare pictogrammen voor positie, grootte, dekking en gecombineerde animaties.
• Roboto-lettertypen voor titels, bijschriften en knoppen.

Gebruikte assets

In het paneel Assets zie je wat dit compacte voorbeeld bevat:

• Afbeeldingen: 5, waaronder het PicoPixel-beeldmerk, het woordmerk en pictogrammen voor de animaties.
• Kleuren: 0; de kleuren zijn rechtstreeks in het ontwerp ingesteld.
• Lettertypen: 2, Roboto 22 en Roboto Bold 32.
• Widgets: 0; dit voorbeeld gebruikt schermobjecten, events en animatietijdlijnen, zonder opgeslagen bibliotheekwidgets.

De zichtbare afbeeldingen zijn:

• Een cyaan pictogram voor positie en grootte van 96x96.
• Een cyaan gestippeld pictogram voor dekking van 96x96.
• Het PicoPixel-beeldmerk van 250x250.
• Het PicoPixel-woordmerk van 356x100.
• Een roze pictogram voor de gecombineerde animatie van 96x96.

Er zijn weinig assets nodig: het beeld beweegt doordat LVGL de eigenschappen van het object verandert. Het project hoeft niet voor elk animatieframe een afbeelding op te slaan.

Laagstructuur

Het lagenpaneel groepeert de voorbeelden 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 scherm heeft dezelfde opbouw: een titel en korte uitleg, het PicoPixel-logo dat wordt geanimeerd en een blauwe knop om de animatie te starten.

Tijdlijn en keyframes

De tijdlijn bepaalt het verloop van elke animatie. Links in de animatie-editor staan de voorbeelden Position, Size, Opacity en Mixed. Selecteer een widget om de sporen voor de afzonderlijke eigenschappen te bekijken.

Bij het gecombineerde voorbeeld zie je:

• Positiesporen, met aparte waarden voor X en Y.
• Groottesporen, met aparte waarden voor W en H.
• Een spoor voor dekking, met een waarde in %.
• Meerdere keyframes, op verschillende momenten.
• Een verplaatsbare afspeelkop, waarmee je een specifiek moment in de animatie kunt bekijken.

Zo kun je meerdere veranderingen op elkaar afstemmen. Stel de waarden en momenten in en bekijk het resultaat voordat je exporteert.

Tijdlijnanimaties en beeldreeksen

Dit sjabloon animeert widgets met keyframes: je verplaatst LVGL-objecten, verandert hun grootte of laat ze vervagen. Bij een geanimeerde afbeelding bestaat elk frame juist uit een afzonderlijke bitmap.

• Gebruik dit sjabloon om eigenschappen zoals positie, breedte, hoogte en dekking te animeren.
• Gebruik een geanimeerde LVGL-afbeelding voor een vooraf getekende beeldreeks, zoals een draaiende laadindicator, een sprite of een herhaalde illustratie.
• Gebruik de event-editor om een animatie te starten bij een knopdruk, het openen van een scherm, een veeggebaar of een andere trigger.

Beide technieken zijn bruikbaar. Keyframes passen vaak goed bij bewegingen en overgangen in een interface: het object blijft bewerkbaar en je hoeft geen grote reeks afbeeldingen te bewaren.

Waarom dit goed werkt voor LVGL

LVGL kan objecteigenschappen tijdens het afspelen aanpassen. In de animatiemodus van PicoPixel stel je die veranderingen visueel in, zonder zelf de C-code te schrijven.

• Positiekeyframes veranderen de coördinaten, bijvoorbeeld om panelen, pictogrammen, kaarten of meldingen te verplaatsen.
• Groottekeyframes veranderen breedte en hoogte, bijvoorbeeld voor uitklapbare bedieningselementen, pulserende effecten, voortgang of focus.
• Keyframes voor dekking veranderen de transparantie, bijvoorbeeld om inhoud te laten verschijnen, te vervagen of een uitgeschakelde toestand te tonen.
• Gecombineerde sporen veranderen meerdere eigenschappen, zodat één widget tegelijk kan bewegen, groter worden en vervagen.
• Events kunnen animaties starten, zowel in de live voorvertoning als in het geëxporteerde LVGL-project.
• Het project levert standaard UI-code voor LVGL 8.x op, die je kunt toevoegen aan ESP-IDF, Arduino, PlatformIO, STM32, Zephyr of een ander LVGL-project.

Gebruik vanuit de firmware

PicoPixel genereert de animatie-instellingen en de acties om ze af te spelen. Wil je het geëxporteerde project zelf uitbreiden, dan werkt dat volgens hetzelfde principe: initialiseer een LVGL-animatie, kies het doelobject, stel de waarden en duur in en start de animatie.

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 toepassingen is de visuele tijdlijn het eenvoudigst. Maak keyframes in PicoPixel, koppel een knop aan Play Animation en exporteer het project.

Aanpassen

Pas de animaties aan je eigen interface aan:

• Vervang het PicoPixel-logo door een eigen pictogram, statuskaart, paneel, dialoogvenster of indicator.
• Laat met positiekeyframes een paneel inschuiven, een melding bewegen of een bedieningselement opvallen.
• Gebruik groottekeyframes voor een pulserende knop, een uitklapbare kaart of een focusindicator.
• Laat inhoud geleidelijk verschijnen of verdwijnen met keyframes voor dekking.
• Combineer positie, grootte en dekking in het Mixed-voorbeeld.
• Pas de duur aan zodat de interface vlot reageert.
• Start animaties met events zoals Clicked of Screen Loaded.
• Houd afbeeldingen klein en verwijder ongebruikte assets voordat je de interface op een board met weinig geheugen gebruikt.

Exporteren naar je project

Open het sjabloon in PicoPixel, bekijk de tijdlijn, geef belangrijke objecten herkenbare namen en test elk scherm met de bijbehorende Play Animation-knop. Exporteer daarna de LVGL C-code.

Voor een ESP32-project zijn dit de gebruikelijke stappen:

1. Kies het voorbeeld dat je nodig hebt: Position, Size, Opacity of Mixed.
2. Vervang het logo en de labels door je eigen interface-elementen.
3. Stel de keyframes, duur en versnellingscurve in op de tijdlijn.
4. Koppel in de event-editor een trigger aan Play Animation.
5. Exporteer de PicoPixel-interface als LVGL C-code.
6. Voeg de bestanden toe aan je ESP-IDF-, Arduino- of PlatformIO-project.
7. Roep ui_init() aan nadat LVGL en je displaydriver zijn geïnitialiseerd.

Lees ook de uitleg over de event-editor en de gids over PicoPixel-sjablonen gebruiken.

Geschikte toepassingen

Gebruik dit sjabloon als startpunt voor:

• Voorbeelden van LVGL-animaties met keyframes
• Prototypes van geanimeerde ESP32-interfaces
• Widgetbewegingen op een tijdlijn
• Animaties die met een knop starten
• Proeven met positie, grootte en dekking
• Laadindicatoren en voortgangsweergaven
• Bevestigingen en opvallende meldingen
• Welkomstschermen en interactieve demo's
• Leren hoe de visuele tijdlijn wordt omgezet in LVGL-animaties