Przykładyanimacji

Zawartość

• Cztery przykłady animacji 480 x 480, ułożone jako plansze Position, Size, Opacity i Mixed.
• Animacja pozycji, przesuwająca widget z jednego miejsca do drugiego za pomocą zmian X/Y w klatkach kluczowych.
• Animacja rozmiaru, dopasowująca szerokość i wysokość widgetu za pomocą zmian W/H w klatkach kluczowych.
• Animacja opacity, zmieniająca przezroczystość mieszania w czasie dla efektów fade.
• Animacja mieszana, łącząca kilka ścieżek animacji na jednym widżecie.
• Przyciski Play Animation, po jednym dla każdego przykładu, aby każdą oś czasu można było uruchomić z UI.
• Podgląd edytora osi czasu i klatek kluczowych, pokazujący rzeczywisty tryb animacji ze ścieżkami i klatkami.
• Cel z logo PicoPixel, używany jako animowany widget w każdym przykładzie.
• Ikony wizualne wielokrotnego użytku, w tym grafiki dla pozycji, rozmiaru, opacity i animacji mieszanej.
• Zasoby fontu Roboto, używane w nagłówkach kart, podpisach i przyciskach.

Migawka zasobów

Panel zasobów pokazuje ten projekt jako kompaktową referencję animacji LVGL:

• Images: 5, w tym logo PicoPixel, logotyp i małe ikony koncepcji animacji.
• Colors: 0, kolory są zastosowane bezpośrednio w projekcie.
• Fonts: 2, Roboto 22 i Roboto Bold 32.
• Widgets: 0, dzięki czemu przykład skupia się na obiektach ekranu, zdarzeniach i osiach czasu animacji.

Widoczne zasoby obrazów obejmują:

• 96x96 turkusową ikonę w stylu position/resize.
• 96x96 turkusową kropkowaną ikonę w stylu opacity.
• 250x250 obraz logo PicoPixel.
• 356x100 obraz logotypu PicoPixel.
• 96x96 różową ikonę w stylu mixed/position.

Ten zestaw zasobów jest celowo mały. Ruch pochodzi z klatkowanych właściwości obiektów LVGL, a nie z przechowywania dużej sekwencji obrazów.

Struktura warstw

Panel warstw grupuje projekt według typu animacji:

• Position, zawierający Play Pos Animation, Pico Logo, Image 1 i etykiety.
• Size, zawierający Play Size Animation, Pico Logo, Image 3 i etykiety.
• Opacity, zawierający Play Opacity Animation, Pico Logo, Image 4 i etykiety.
• Mixed, zawierający Play Mixed Animation, Pico Logo i etykiety.

Każda plansza używa tego samego wzorca edukacyjnego: tytuł i opis wyjaśniają typ animacji, logo PicoPixel działa jako animowany cel, a niebieski przycisk uruchamia odtwarzanie.

Oś czasu i klatki kluczowe

Najważniejsze w tym szablonie jest to, że animacje są kontrolowane przez oś czasu. W podglądzie edytora animacji lewa strona wyświetla typy animacji, takie jak Position, Size, Opacity i Mixed. Oś czasu rozwija wybrany animowany widget na ścieżki właściwości.

Dla przykładu mieszanego screenshot pokazuje:

• Ścieżki pozycji, z osobnymi wartościami X i Y.
• Ścieżki rozmiaru, z osobnymi wartościami W i H.
• Ścieżkę opacity, z wartością %.
• Wiele klatek kluczowych, rozmieszczonych w różnych punktach czasu.
• Przewijanie osi czasu, aby można było sprawdzić animację w dokładnym timestampie.

To sprawia, że przykład jest mocniejszy niż proste przejście. Możesz choreografować widget, ustawiając dokładne wartości w dokładnych momentach, a potem podejrzeć wynik przed eksportem.

Animacje osi czasu a animacje klatkowe

Ten szablon dotyczy animacji widgetów z klatkami kluczowymi: przesuwania, zmiany rozmiaru i zanikania obiektów LVGL w czasie. To coś innego niż obraz animowany oparty na klatkach, gdzie każda klatka jest osobną bitmapą.

• Użyj tego szablonu, gdy chcesz animować właściwości obiektu LVGL, takie jak pozycja, szerokość, wysokość albo opacity.
• Użyj LVGL animated image, gdy masz wstępnie wyrenderowaną sekwencję klatek, na przykład spinner, loader podobny do sprite'a albo ilustrowaną pętlę.
• Użyj event editor, gdy chcesz, aby przycisk, załadowanie ekranu, gest albo inny trigger odtworzył jedną z tych animacji.

Oba podejścia mogą być przydatne. Klatki kluczowe zwykle lepiej sprawdzają się w ruchu UI i przejściach, bo zachowują edytowalność obiektu i mogą uniknąć przechowywania wielu klatek obrazu.

Dlaczego to dobrze działa z LVGL

LVGL dobrze radzi sobie z aktualizowaniem właściwości obiektów w czasie, a tryb animacji PicoPixel pokazuje te wartości zamiast ukrywać je w ręcznie pisanym C.

• Klatki pozycji mapują się na współrzędne obiektu, co jest przydatne dla paneli, ikon, kart i ruchu powiadomień.
• Klatki rozmiaru mapują się na szerokość i wysokość, co jest przydatne dla rozwijanych kontrolek, efektów pulse, podkreślania postępu i stanów focus.
• Klatki opacity mapują się na przezroczystość mieszania, co jest przydatne dla fade, stanów disabled, reveal i sygnałów uwagi.
• Ścieżki mieszane łączą wiele właściwości, więc jeden widget może się przesuwać, zmieniać rozmiar i zanikać jako jedna oś czasu.
• Zdarzenia mogą uruchamiać animacje, więc kliknięcie przycisku może uruchomić oś czasu w podglądzie live i wyeksportowanym projekcie LVGL.
• Projekt eksportuje się jako standardowy kod UI LVGL 8.x, więc można go zintegrować z ESP-IDF, Arduino, PlatformIO, STM32, Zephyr albo innym buildem LVGL.

Wzorzec runtime

PicoPixel może wygenerować konfigurację animacji i akcje odtwarzania za Ciebie. Jeśli musisz ręcznie rozszerzyć wyeksportowany projekt, ten sam koncept mapuje się na zwykły kod animacji LVGL: zainicjalizuj animację, wybierz obiekt docelowy, ustaw wartości i timing, a potem ją uruchom.

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);
}

Dla większości użytkowników szablonu łatwiejszą drogą jest wizualna oś czasu: utwórz klatki kluczowe w PicoPixel, połącz przycisk z akcją zdarzenia Play Animation, a potem eksportuj.

Dostosowywanie

Użyj tego jako darmowego szablonu animacji keyframe LVGL, a potem dopasuj osie czasu do własnej UI.

• Zastąp logo PicoPixel własną ikoną, kafelkiem statusu, kartą, modalem albo indykatorem.
• Zmień klatki pozycji, aby przesunąć panel, poruszyć powiadomienie albo skierować uwagę na kontrolkę.
• Zmień klatki rozmiaru, aby zbudować pulse, feedback przycisku, rozwijaną kartę albo stan focus.
• Zmień klatki opacity, aby wprowadzać lub wygaszać treść.
• Połącz pozycję, rozmiar i opacity w przykładzie mixed, aby uzyskać bogatszy ruch UI.
• Dopasuj timing, aby animacja była wystarczająco szybka dla interakcji embedded.
• Użyj zdarzeń takich jak Clicked albo Screen Loaded, aby odtwarzać animacje we właściwym momencie.
• Zachowaj umiarkowane rozmiary obrazów i usuń nieużywane zasoby przed flashowaniem na płytki z ograniczoną pamięcią.

Eksport do projektu

Otwórz szablon w PicoPixel, sprawdź oś czasu animacji, zmień nazwy ważnych obiektów i podejrzyj każdą planszę przyciskiem Play Animation. Następnie wyeksportuj projekt jako kod LVGL C.

Dla projektów ESP32 typowy flow wygląda tak:

1. Wybierz planszę pasującą do ruchu, którego potrzebujesz: Position, Size, Opacity albo Mixed.
2. Zastąp logo i etykiety własnymi obiektami UI.
3. Dopasuj klatki kluczowe, timing i easing na osi czasu animacji.
4. Użyj event editor, aby połączyć trigger z akcją Play Animation.
5. Wyeksportuj UI PicoPixel jako LVGL C.
6. Dodaj wyeksportowane pliki do projektu ESP-IDF, Arduino albo PlatformIO.
7. Wywołaj ui_init() po przygotowaniu LVGL i sterownika display.

Więcej kontekstu znajdziesz w event editor guide oraz przewodniku using PicoPixel templates.

Najlepsze zastosowania

Ten szablon dobrze pasuje, gdy potrzebujesz czytelnego punktu startowego dla:

• przykładów animacji keyframe LVGL
• prototypów ruchu UI na ESP32
• ruchu widgetów sterowanego osią czasu
• odtwarzania animacji wyzwalanego przyciskiem
• testowania animacji pozycji, rozmiaru i opacity
• stanów ładowania i feedbacku postępu
• potwierdzeń i sygnałów uwagi
• ekranów onboardingu i interaktywnych demo
• nauki, jak wizualne osie czasu PicoPixel stają się zachowaniem LVGL