애니메이션 예제 - 템플릿

개요

실제 키프레임 제어가 들어간 무료 LVGL 애니메이션 템플릿을 찾고 있나요? 이 PicoPixel 프로젝트는 480 x 480 임베디드 UI 캔버스에서 위치, 크기, 불투명도, 혼합 트랙을 사용하는 타임라인 기반 위젯 애니메이션을 보여 줍니다.

정적인 모션 목업이나 프레임별 이미지 시퀀스가 아닙니다. 개별 속성을 시간에 따라 제어하는 세밀한 키프레임 방식의 애니메이션을 보여 줍니다. 타임라인 보기에서는 X/Y 위치, W/H 크기, 불투명도 트랙이 분리되어 있으며, 각 속성이 각자의 시점에 바뀔 수 있도록 키프레임이 배치되어 있습니다.

ESP32 대시보드, 온보딩 화면, 로딩 상태, 주의 유도, 확인 피드백, 스마트 디바이스 인터페이스, 키오스크 패널, 또는 버튼을 누른 뒤 위젯을 이동, 크기 변경, 페이드, 여러 애니메이션 속성 조합으로 움직여야 하는 LVGL UI의 출발점으로 사용할 수 있습니다.

포함 내용

480 x 480 애니메이션 예제 4개가 Position, Size, Opacity, Mixed 보드로 배치되어 있습니다.
위치 애니메이션은 키가 지정된 X/Y 변경으로 위젯을 한 위치에서 다른 위치로 이동합니다.
크기 애니메이션은 키가 지정된 W/H 변경으로 위젯의 너비와 높이를 조정합니다.
불투명도 애니메이션은 시간에 따라 블렌드 투명도를 변경해 페이드 효과를 만듭니다.
혼합 애니메이션은 하나의 위젯에서 여러 애니메이션 트랙을 결합합니다.
Play Animation 버튼이 예제마다 하나씩 있어 각 타임라인을 UI에서 실행할 수 있습니다.
타임라인/키프레임 에디터 미리보기가 트랙과 키프레임이 포함된 실제 애니메이션 모드를 보여 줍니다.
PicoPixel 로고 타깃이 각 예제에서 애니메이션 대상 위젯으로 사용됩니다.
재사용 가능한 시각 아이콘에는 위치, 크기, 불투명도, 혼합 애니메이션 그래픽이 포함됩니다.
Roboto 폰트 에셋은 카드 제목, 캡션, 버튼에 사용됩니다.

자산 스냅샷

에셋 패널에서는 이 프로젝트가 간결한 LVGL 애니메이션 레퍼런스로 표시됩니다.

이미지: 5, PicoPixel 로고, 로고타입, 작은 애니메이션 콘셉트 아이콘을 포함합니다.
색상: 0, 색상은 디자인에 직접 적용되어 있습니다.
폰트: 2, Roboto 22와 Roboto Bold 32.
위젯: 0, 예제가 화면 객체, 이벤트, 애니메이션 타임라인에 집중되도록 유지합니다.

보이는 이미지 에셋에는 다음이 포함됩니다.

96x96 위치/크기 변경 스타일의 시안 아이콘.
96x96 불투명도 스타일의 시안 점선 아이콘.
250x250 PicoPixel 로고 이미지.
356x100 PicoPixel 로고타입 이미지.
96x96 분홍색 혼합/위치 스타일 아이콘.

이 에셋 세트는 의도적으로 작게 유지되어 있습니다. 움직임은 많은 이미지 프레임을 저장하는 방식이 아니라, 키프레임이 지정된 LVGL 객체 속성에서 만들어집니다.

레이어 구조

레이어 패널에서는 프로젝트가 애니메이션 종류별로 그룹화되어 있습니다.

Position에는 Play Pos Animation, Pico Logo, Image 1, 라벨이 포함됩니다.
Size에는 Play Size Animation, Pico Logo, Image 3, 라벨이 포함됩니다.
Opacity에는 Play Opacity Animation, Pico Logo, Image 4, 라벨이 포함됩니다.
Mixed에는 Play Mixed Animation, Pico Logo, 라벨이 포함됩니다.

각 보드는 같은 학습 패턴을 따릅니다. 제목과 설명이 애니메이션 종류를 설명하고, PicoPixel 로고가 애니메이션 대상이 되며, 파란색 버튼이 재생을 시작합니다.

타임라인과 키프레임

이 템플릿의 핵심은 애니메이션이 타임라인으로 제어된다는 점입니다. 애니메이션 에디터 미리보기의 왼쪽에는 Position, Size, Opacity, Mixed 같은 애니메이션 종류가 나열됩니다. 타임라인은 선택한 애니메이션 대상 위젯을 속성 트랙으로 펼쳐 보여 줍니다.

혼합 예제의 스크린샷에는 다음이 표시됩니다.

위치 트랙은 X와 Y 값을 따로 가집니다.
크기 트랙은 W와 H 값을 따로 가집니다.
불투명도 트랙은 % 값을 가집니다.
여러 키프레임이 시간상의 서로 다른 지점에 배치되어 있습니다.
타임라인 스크러빙으로 정확한 타임스탬프에서 애니메이션을 확인할 수 있습니다.

이 점 때문에 이 예제는 단순한 전환보다 더 강력합니다. 정확한 시간에 정확한 값을 설정해 위젯의 움직임을 구성하고, 내보내기 전에 결과를 미리 볼 수 있습니다.

TIP

내보내기 전에 PicoPixel에서 중요한 객체 이름을 바꾸세요. 예를 들어 btn_play_position, btn_play_size, btn_play_opacity, btn_play_mixed, animated_logo, animation_card 같은 이름입니다. 명확한 이름을 사용하면 생성된 LVGL 애니메이션 코드와 이벤트 코드를 훨씬 쉽게 따라갈 수 있습니다.

타임라인 애니메이션과 프레임 애니메이션

이 템플릿은 LVGL 객체를 시간에 따라 이동, 크기 변경, 페이드하는 키프레임 기반 위젯 애니메이션을 다룹니다. 각 프레임이 별도의 비트맵인 프레임 기반 애니메이션 이미지와는 다릅니다.

위치, 너비, 높이, 불투명도처럼 LVGL 객체의 속성을 애니메이션하려면 이 템플릿을 사용하세요.
스피너, 스프라이트형 로더, 일러스트 루프처럼 미리 렌더링된 프레임 시퀀스가 있다면 LVGL animated image를 사용하세요.
버튼, 화면 로드, 제스처 또는 다른 트리거로 이런 애니메이션을 재생하고 싶다면 event editor를 사용하세요.

두 방식 모두 유용할 수 있습니다. UI 모션과 전환에는 대개 키프레임이 더 적합합니다. 객체를 계속 편집 가능한 상태로 유지하고 많은 이미지 프레임을 저장하지 않아도 되기 때문입니다.

LVGL에 잘 맞는 이유

LVGL은 시간에 따라 객체 속성을 업데이트하는 데 강하고, PicoPixel의 애니메이션 모드는 그 값을 손으로 작성한 C 코드 안에 숨기지 않고 눈에 보이게 만듭니다.

위치 키프레임은 객체 좌표에 매핑되어 패널, 아이콘, 카드, 알림 이동에 유용합니다.
크기 키프레임은 너비와 높이에 매핑되어 확장 컨트롤, 펄스 효과, 진행 강조, 포커스 상태에 유용합니다.
불투명도 키프레임은 블렌드 투명도에 매핑되어 페이드, 비활성 상태, 표시 전환, 주의 유도에 유용합니다.
혼합 트랙은 여러 속성을 결합하므로 하나의 위젯을 하나의 타임라인에서 이동, 크기 변경, 페이드할 수 있습니다.
이벤트로 애니메이션을 실행할 수 있어 버튼 클릭이 라이브 미리보기와 내보낸 LVGL 프로젝트 모두에서 타임라인을 실행할 수 있습니다.
프로젝트는 표준 LVGL 8.x UI 코드로 내보내지므로 ESP-IDF, Arduino, PlatformIO, STM32, Zephyr 또는 다른 LVGL 빌드에 통합할 수 있습니다.

런타임 패턴

PicoPixel은 애니메이션 설정과 재생 액션을 생성할 수 있습니다. 내보낸 프로젝트를 직접 확장해야 할 때도 같은 개념은 일반적인 LVGL 애니메이션 코드로 이어집니다. 애니메이션을 초기화하고, 대상 객체를 선택하고, 값과 타이밍을 설정한 뒤 시작하면 됩니다.

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

대부분의 템플릿 사용자는 시각적 타임라인을 사용하는 편이 더 쉽습니다. PicoPixel에서 키프레임을 만들고, 버튼을 Play Animation 이벤트 액션에 연결한 다음 내보내면 됩니다.

TIP

보드에 플래시하기 전에 PicoPixel에서 프로젝트를 열고 모든 애니메이션을 라이브로 미리보세요. 미리보기 모드에는 하드웨어가 필요하지 않습니다.

사용자화

무료 LVGL 키프레임 애니메이션 템플릿으로 사용한 뒤, 자신의 UI에 맞게 타임라인을 조정하세요.

PicoPixel 로고를 자신의 아이콘, 상태 타일, 카드, 모달, 표시기로 바꿉니다.
위치 키프레임을 바꿔 패널을 슬라이드하거나, 알림을 이동하거나, 사용자의 주의를 컨트롤로 유도합니다.
크기 키프레임을 바꿔 펄스, 버튼 피드백, 확장 카드, 포커스 상태를 만듭니다.
불투명도 키프레임을 바꿔 콘텐츠를 페이드 인하거나 페이드 아웃합니다.
혼합 예제에서 위치, 크기, 불투명도를 결합해 더 풍부한 UI 모션을 만듭니다.
임베디드 상호작용에 충분히 빠르게 느껴지도록 타이밍을 조정합니다.
Clicked 또는 Screen Loaded 같은 이벤트를 사용해 적절한 순간에 애니메이션을 재생합니다.
메모리가 제한된 보드에 플래시하기 전에 이미지 크기를 적당히 유지하고 사용하지 않는 에셋을 제거합니다.

프로젝트로 내보내기

PicoPixel에서 템플릿을 열고, 애니메이션 타임라인을 확인하고, 중요한 객체 이름을 바꾼 뒤 각 보드를 Play Animation 버튼으로 미리보세요. 그런 다음 프로젝트를 LVGL C 코드로 내보냅니다.

ESP32 프로젝트에서는 보통 다음 흐름을 따릅니다.

필요한 움직임에 맞는 보드를 선택합니다: Position, Size, Opacity, Mixed.
로고와 라벨을 자신의 UI 객체로 바꿉니다.
애니메이션 타임라인에서 키프레임, 타이밍, 이징을 조정합니다.
이벤트 에디터에서 트리거를 Play Animation 액션에 연결합니다.
PicoPixel UI를 LVGL C로 내보냅니다.
내보낸 파일을 ESP-IDF, Arduino 또는 PlatformIO 프로젝트에 추가합니다.
LVGL과 디스플레이 드라이버가 준비된 뒤 ui_init()을 호출합니다.

더 자세한 배경은 event editor guide와 using PicoPixel templates 가이드를 참고하세요.

가장 적합한 용도

이 템플릿은 다음을 위한 명확한 출발점이 필요할 때 잘 맞습니다.

LVGL 키프레임 애니메이션 예제
ESP32 UI 모션 프로토타입
타임라인으로 제어되는 위젯 모션
버튼으로 실행되는 애니메이션 재생
위치, 크기, 불투명도 애니메이션 테스트
로딩 상태와 진행 피드백
확인 및 주의 유도
온보딩 화면과 인터랙티브 데모
PicoPixel의 시각적 타임라인이 LVGL 동작으로 바뀌는 방식 학습

애니메이션예제

개요