Overzicht
De animated image-widget is de eenvoudigste manier om beweging op je scherm te zetten: een draaiende loader, 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 looping beheert 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 geeft hem een set frames, vertelt hoe snel hij moet afspelen en of hij moet loopen, en hij doet de rest.
Hij is perfect voor één herhalende animatie: een laadspinner, een kloppend hart, een zwaaiende hand. Eén widget, één reeks, afspelend in een loop.
Onder de motorkap is dit LVGL's lv_animimg-widget. Wanneer je je project exporteert, schrijft PicoPixel de LVGL-code voor je (lv_animimg_create, lv_animimg_set_src, lv_animimg_set_duration, enzovoort), je hoeft die nooit aan te raken. Het richt zich op LVGL 8.x.
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 graphic 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 graphic meer dan één mode nodig heeft.
Een sprite is eigenlijk opgebouwd uit animated images; elk van zijn modes is onder de motorkap een eigen animated image. Dus als je merkt dat je naar een tweede animatie wilt kunnen schakelen, is dat je signaal om een sprite te gebruiken.
Een animated image toevoegen en frames uploaden
- Voeg de Animated Image-widget toe aan je scherm.
- Zoek in de properties 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 frameset die je eerder hebt gebruikt uit de Assets-tab pakken 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. Als je frames met verschillende groottes probeert toe te voegen, stopt PicoPixel je met 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. Identieke framegroottes houden de beweging schoon.
Resize je frames zodat ze matchen 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: duration
De Duration-instelling bepaalt hoe snel de animatie afspeelt. Hij wordt gemeten in milliseconden (ms) en staat voor de tijd voor één volledige passage door alle frames, niet de tijd per frame. Standaard is dit 1000 ms (één seconde).
PicoPixel verdeelt die duration gelijk over je frames. Dus 1000 ms verdeeld over 8 frames betekent dat elk frame 125 ms zichtbaar is. Sneller? Verlaag de duration. Langzamer en rustiger? Verhoog hem.
Loopen: één keer of voor altijd
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.
Playback regelen terwijl je UI draait
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 mode:
- Start, begin (of hervat) het afspelen.
- Stop, pauzeer de animatie.
- Restart, spring terug naar het eerste frame en speel opnieuw.
Bijvoorbeeld: houd een "connecting…"-spinner gestopt tot er op een knop wordt gedrukt, Start hem dan en Stop hem zodra de taak klaar is.
Licht blijven voor geheugen
Animaties zijn gewoon afbeeldingen, en afbeeldingen nemen ruimte in op een klein apparaat. Een paar gewoonten houden het efficiënt:
- 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, heeft de animated image LV_USE_ANIMIMG ingeschakeld nodig in je lv_conf.h. 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.
