Overzicht
De Animated Image-widget is de eenvoudigste manier om beweging op je scherm te zetten: een draaiende laadindicator, een stuiterend icoon, een knipperend oog. Deze gids legt uit hoe de LVGL Animated Image-widget in PicoPixel werkt: hoe je er een toevoegt, waarom elk frame dezelfde grootte moet hebben, hoe je snelheid en herhaling instelt en hoe je hem start en stopt terwijl je interface draait.
Wat is de Animated Image-widget?
Een Animated Image speelt een reeks stilstaande beelden na elkaar af, als een flipbook. Elk beeld is een frame, en snel door de frames gaan wekt de illusie van beweging. Je kiest de frames, stelt de afspeelduur in en bepaalt of de animatie zich herhaalt.
Deze widget is geschikt voor één herhalende animatie, zoals een laadindicator, kloppend hart of zwaaiende hand.
De widget gebruikt lv_animimg van LVGL 8.x. Bij het exporteren genereert PicoPixel de benodigde aanroepen, zoals lv_animimg_create, lv_animimg_set_src en lv_animimg_set_duration. Je hoeft die niet zelf te schrijven.
Animated image of sprite - welke gebruik ik?
Deze twee widgets lijken op elkaar, maar lossen verschillende problemen op:
- Animated image, één animatie die loopt. Kies dit wanneer je afbeelding maar één ding doet, zoals een spinner die draait.
- Sprite, meerdere animaties in één widget, met de mogelijkheid ertussen te wisselen (Idle, Running, Happy…). Kies dit wanneer je afbeelding meer dan één mode nodig heeft.
Een sprite combineert meerdere Animated Images, één per toestand. Wil je tussen twee of meer animaties kunnen wisselen, gebruik dan een sprite.
Een Animated Image toevoegen en frames uploaden
- Voeg de Animated Image-widget toe aan je scherm.
- Zoek bij de eigenschappen de rij Image Set en klik op Add Image Set.
- Klik op de NEW-tab op het uploadgebied ("Click to upload frames") en selecteer je afbeeldingen. Je kunt er veel tegelijk kiezen; de formaten zijn PNG en JPEG (
.png,.jpeg,.jpg). - Klik op Continue om de frames aan de widget te koppelen. De Image Set-rij toont nu hoeveel frames je hebt, bijvoorbeeld "8 frames".
Je kunt ook een eerder gebruikte beeldreeks kiezen op het tabblad Assets in plaats van opnieuw te uploaden.
Frames worden alfabetisch op bestandsnaam geordend, dus geef ze namen in volgorde met voorloopnullen, frame_01.png, frame_02.png, frame_03.png, om te garanderen dat ze goed afspelen. Een naam als frame_2.png sorteert na frame_10.png, wat je animatie door elkaar haalt.
Een Animated Image heeft minstens 2 frames nodig, en je kunt er maximaal 32 toevoegen. Heb je meer beweging nodig, overweeg dan minder, goed gekozen keyframes; elk frame wordt op het apparaat opgeslagen.
Waarom alle frames dezelfde grootte moeten hebben
Dit is de regel om te onthouden: elk frame moet exact dezelfde breedte en hoogte hebben. Bij verschillende frameafmetingen toont PicoPixel de melding "All frames must have the same dimensions."
De reden is simpel. De widget tekent elk frame op dezelfde plek, in dezelfde box. Als frame 1 64×64 is en frame 2 80×80, springt en verschuift het beeld tijdens het afspelen in plaats van netjes op zijn plaats te animeren. Met gelijke afmetingen blijft het beeld netjes op zijn plaats.
Maak alle frames even groot voordat je ze uploadt. De snelste manier naar een nette reeks is elk frame vanuit hetzelfde canvas in je afbeeldingstool exporteren, zodat ze gegarandeerd dezelfde afmetingen hebben.
De snelheid instellen: afspeelduur
De Duration-instelling bepaalt hoe snel de animatie afspeelt. Hij wordt gemeten in milliseconden (ms) en staat voor de tijd voor één volledige ronde door alle frames, niet de tijd per frame. Standaard is dit 1000 ms (één seconde).
PicoPixel verdeelt die afspeelduur gelijk over je frames. Dus 1000 ms verdeeld over 8 frames betekent dat elk frame 125 ms zichtbaar is. Sneller? Verlaag de afspeelduur. Langzamer en rustiger? Verhoog hem.
Herhalen: één keer of doorlopend
De Repeat-instelling bepaalt wat er gebeurt wanneer de animatie het einde bereikt. Je hebt twee keuzes:
- Infinite, de animatie loopt voor altijd. Dit is de standaard, en wat je wilt voor dingen zoals een spinner die nooit mag stoppen.
- Normal (a count), de animatie speelt een vast aantal keren af en stopt dan. Zet hem op 3 en hij loopt drie keer, waarna hij op het laatste frame blijft staan.
Afspelen regelen vanuit je interface
Je hoeft een animatie niet automatisch te laten lopen: je kunt hem starten en stoppen als reactie op wat de gebruiker doet, met de event-editor. Voeg een event toe, kies de actie Animated Image Mode, wijs hem naar je Animated Image en kies een afspeelactie:
- Start, begin (of hervat) het afspelen.
- Stop, pauzeer de animatie.
- Restart, spring terug naar het eerste frame en speel opnieuw.
Laat bijvoorbeeld een laadindicator pas met Start beginnen zodra de gebruiker op een knop drukt. Gebruik Stop wanneer de taak is afgerond.
Het geheugenverbruik beperken
Animaties zijn gewoon afbeeldingen, en afbeeldingen nemen ruimte in op een klein apparaat. Zo beperk je het geheugenverbruik:
- Gebruik alleen de frames die je nodig hebt. Vloeiende beweging vraagt zelden meer dan een handvol goed gekozen frames.
- Houd frameafmetingen bescheiden. Een 64×64-animatie is veel lichter dan een 240×240-animatie.
- Stem je kleurdiepte af op het display (zie de ESP32 tutorial voor meer over bouwen voor echte hardware).
Als je naar firmware exporteert, moet LV_USE_ANIMIMG in je lv_conf.h ingeschakeld zijn voor de Animated Image-widget. PicoPixel noteert dit voor je in de geëxporteerde README.md, zodat je build (of je AI-assistent) precies weet wat aan moet.
Volgende stappen
- Meer dan één animatie nodig in één widget? Stap over op de sprite-widget.
- Verbind je animatie met een knop of andere trigger via de event-editor.
- Breng je voltooide UI naar een apparaat met de ESP32 LVGL tutorial.
