Omówienie
Widget animated image to najprostszy sposób na dodanie ruchu do ekranu: obracający się loader, odbijająca ikona, mrugające oko. Ten przewodnik wyjaśnia, jak działa widget LVGL animated image w PicoPixel: jak go dodać, dlaczego każda klatka musi mieć ten sam rozmiar, jak sterować szybkością i zapętlaniem oraz jak uruchamiać i zatrzymywać animację podczas działania interfejsu.
Czym jest widget animated image?
Animated image odtwarza sekwencję nieruchomych obrazów jeden po drugim, jak flipbook. Każdy obraz to klatka, a szybkie przechodzenie między nimi tworzy iluzję ruchu. Dajesz mu zestaw klatek, mówisz, jak szybko ma grać i czy ma się zapętlać, a resztę robi sam.
Świetnie nadaje się do jednej, powtarzalnej animacji: spinnera ładowania, pulsującego serca, machającej dłoni. Jeden widget, jedna sekwencja, odtwarzana w pętli.
Pod spodem jest to widget LVGL lv_animimg. Gdy eksportujesz projekt, PicoPixel pisze kod LVGL za Ciebie (lv_animimg_create, lv_animimg_set_src, lv_animimg_set_duration itd.), więc nie musisz go dotykać. Celuje w LVGL 8.x.
Animated image czy sprite - czego użyć?
Te dwa widgety wyglądają podobnie, ale rozwiązują różne problemy:
- Animated image, jedna animacja w pętli. Wybierz go, gdy grafika robi tylko jedną rzecz, np. spinner, który się kręci.
- Sprite, kilka animacji w jednym widgetcie, z możliwością przełączania między nimi (Idle, Running, Happy…). Wybierz go, gdy grafika potrzebuje więcej niż jednego trybu.
W praktyce sprite jest zbudowany z animated images; każdy jego tryb jest osobnym animated image pod spodem. Jeśli więc chcesz przełączać na drugą animację, to znak, że powinieneś użyć sprite'a.
Dodawanie animated image i przesyłanie klatek
- Dodaj widget Animated Image do ekranu.
- W jego właściwościach znajdź wiersz Image Set i kliknij Add Image Set.
- Na karcie NEW kliknij obszar przesyłania ("Click to upload frames") i wybierz obrazy. Możesz wybrać wiele naraz; formaty to PNG i JPEG (
.png,.jpeg,.jpg). - Kliknij Continue, aby podłączyć klatki do widgetu. Wiersz Image Set pokaże teraz liczbę klatek, np. "8 frames".
Możesz też wziąć użyty wcześniej zestaw klatek z karty Assets, zamiast przesyłać go ponownie.
Klatki są sortowane alfabetycznie według nazwy pliku, więc nazwij je po kolei z zerami wiodącymi, frame_01.png, frame_02.png, frame_03.png, aby mieć pewność poprawnej kolejności. Nazwa frame_2.png posortuje się po frame_10.png, co pomiesza animację.
Animated image potrzebuje co najmniej 2 klatek, a maksymalnie możesz dodać 32. Jeśli potrzebujesz więcej ruchu, rozważ mniej, ale dobrze dobranych klatek kluczowych; każda klatka jest przechowywana na urządzeniu.
Dlaczego wszystkie klatki muszą mieć ten sam rozmiar
To najważniejsza zasada: każda klatka musi mieć dokładnie tę samą szerokość i wysokość. Jeśli spróbujesz dodać klatki o różnych rozmiarach, PicoPixel zatrzyma Cię komunikatem "All frames must have the same dimensions."
Powód jest prosty. Widget rysuje każdą klatkę w tym samym miejscu, w tym samym polu. Jeśli klatka 1 ma 64×64, a klatka 2 ma 80×80, obraz będzie przeskakiwał zamiast płynnie animować się w miejscu. Identyczny rozmiar klatek sprawia, że ruch wygląda czysto.
Dopasuj rozmiar klatek przed przesłaniem. Najszybszy sposób na czystą sekwencję to eksport każdej klatki z tego samego canvasu w narzędziu graficznym, dzięki czemu wymiary będą wspólne.
Ustawianie szybkości: duration
Ustawienie Duration kontroluje szybkość animacji. Jest mierzone w milisekundach (ms) i oznacza czas jednego pełnego przejścia przez wszystkie klatki, nie czas pojedynczej klatki. Domyślnie to 1000 ms (jedna sekunda).
PicoPixel dzieli ten czas równo między klatki. 1000 ms rozłożone na 8 klatek oznacza 125 ms na klatkę. Chcesz szybciej? Zmniejsz duration. Wolniej i spokojniej? Zwiększ je.
Zapętlanie: raz czy na zawsze
Ustawienie Repeat decyduje, co stanie się po dojściu animacji do końca. Masz dwie opcje:
- Infinite, animacja zapętla się bez końca. To domyślne ustawienie, dobre dla spinnera, który nie powinien przestawać.
- Normal (a count), animacja odtwarza się podaną liczbę razy i zatrzymuje. Ustaw 3, a wykona trzy przebiegi i zostanie na ostatniej klatce.
Sterowanie odtwarzaniem podczas działania UI
Nie musisz pozwalać animacji działać automatycznie: możesz ją uruchamiać i zatrzymywać w odpowiedzi na działania użytkownika, używając edytora zdarzeń. Dodaj zdarzenie, wybierz akcję Animated Image Mode, wskaż animated image i wybierz tryb:
- Start, zacznij (albo wznów) odtwarzanie.
- Stop, wstrzymaj animację.
- Restart, wróć do pierwszej klatki i odtwórz od nowa.
Przykład: trzymaj spinner "connecting…" zatrzymany, aż użytkownik naciśnie przycisk, potem użyj Start, a po zakończeniu zadania użyj Stop.
Oszczędzanie pamięci
Animacje to obrazy, a obrazy zajmują miejsce na małym urządzeniu. Kilka nawyków pomaga zachować wydajność:
- Używaj tylko potrzebnych klatek. Płynny ruch rzadko wymaga więcej niż kilku dobrze dobranych klatek.
- Trzymaj skromne wymiary klatek. Animacja 64×64 jest znacznie lżejsza niż 240×240.
- Dopasuj głębię koloru do wyświetlacza (zobacz tutorial ESP32, aby dowiedzieć się więcej o budowaniu na prawdziwy hardware).
Jeśli eksportujesz firmware, animated image wymaga włączenia LV_USE_ANIMIMG w lv_conf.h. PicoPixel zapisuje tę informację w wyeksportowanym README.md, aby build (albo asystent AI) dokładnie wiedział, co włączyć.
Następne kroki
- Potrzebujesz więcej niż jednej animacji w jednym widgetcie? Przejdź do widgetu sprite.
- Podłącz animację do przycisku albo innego wyzwalacza w edytorze zdarzeń.
- Przenieś gotowe UI na urządzenie z tutorialem ESP32 LVGL.
