Omówienie
Widżet Animated Image pozwala łatwo dodać ruch do ekranu: obracający się wskaźnik ładowania, podskakującą ikonę czy mrugające oko. Ten przewodnik wyjaśnia, jak działa widżet 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 widżet Animated Image?
Animated Image wyświetla kolejne nieruchome obrazy, podobnie jak kartki szybko przewracanej książeczki z rysunkami. Każdy obraz to klatka, a szybkie przechodzenie między nimi tworzy iluzję ruchu. Wystarczy dodać klatki, ustawić czas odtwarzania i zdecydować, czy animacja ma się powtarzać.
Świetnie nadaje się do jednej, powtarzalnej animacji: wskaźnika ładowania ładowania, pulsującego serca, machającej dłoni. Jeden widżet, jedna sekwencja, odtwarzana w pętli.
Wykorzystuje on widżet 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 pisać go ręcznie. Generowany kod jest zgodny z LVGL 8.x.
Animated image czy sprite - czego użyć?
Te dwa widżety 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. wskaźnik ładowania, który się kręci.
- Sprite, kilka animacji w jednym widżecie, z możliwością przełączania między nimi (Idle, Running, Happy…). Wybierz go, gdy grafika potrzebuje więcej niż jednego trybu.
Sprite składa się z kilku widżetów Animated Image — po jednym dla każdego trybu. 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 widżet 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 widżetu. 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. Widżet 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. Jednakowe wymiary klatek zapobiegają takim przesunięciom.
Dopasuj rozmiar klatek przed przesłaniem. Najszybszy sposób na czystą sekwencję to eksport każdej klatki z obszaru roboczego o tych samych wymiarach 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 wartość Duration. Aby zwolnić animację, zwiększ tę wartość.
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 wskaźnika ładowania, 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ż widżet 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: pozostaw animację „łączenie…” wstrzymaną, 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.
- Ogranicz wymiary klatek. Animacja 64×64 jest znacznie lżejsza niż 240×240.
- Dopasuj głębię koloru do wyświetlacza (zobacz poradnik ESP32, aby dowiedzieć się więcej o uruchamianiu projektu na urządzeniu).
W wyeksportowanym oprogramowaniu widżet Animated Image wymaga włączenia LV_USE_ANIMIMG w lv_conf.h. PicoPixel zapisuje tę informację w wyeksportowanym README.md, aby osoba kompilująca projekt lub asystent AI wiedzieli, co włączyć.
Następne kroki
- Potrzebujesz więcej niż jednej animacji w jednym widżecie? Przejdź do widżetu sprite.
- Podłącz animację do przycisku albo innego wyzwalacza w edytorze zdarzeń.
- Przenieś gotowe UI na urządzenie z poradnikiem ESP32 LVGL.
