개요
animated image 위젯은 화면에 움직임을 넣는 가장 간단한 방법입니다. 회전하는 로더, 튀어 오르는 아이콘, 깜박이는 눈 같은 것들을 만들 수 있습니다. 이 가이드는 PicoPixel에서 LVGL animated image 위젯이 어떻게 동작하는지 설명합니다. 추가하는 방법, 모든 프레임의 크기가 같아야 하는 이유, 속도와 반복을 제어하는 법, 인터페이스가 실행되는 동안 시작하고 멈추는 방법을 다룹니다.
animated image 위젯이란?
animated image는 정지 이미지 여러 장을 차례대로 재생합니다. 플립북과 비슷합니다. 각 이미지는 frame이고, 빠르게 넘기면 움직이는 것처럼 보입니다. 프레임 세트를 넘겨주고 재생 속도와 반복 여부를 알려주면 나머지는 위젯이 처리합니다.
하나의 반복 애니메이션에 적합합니다. 로딩 스피너, 박동하는 하트, 손을 흔드는 아이콘처럼요. 위젯 하나, 시퀀스 하나, 반복 재생입니다.
내부적으로는 LVGL의 lv_animimg 위젯입니다. 프로젝트를 내보내면 PicoPixel이 LVGL 코드(lv_animimg_create, lv_animimg_set_src, lv_animimg_set_duration 등)를 작성해 줍니다. 직접 만질 필요가 없습니다. 대상은 LVGL 8.x입니다.
Animated image와 sprite: 무엇을 써야 할까요?
두 위젯은 비슷해 보이지만 해결하는 문제가 다릅니다.
- Animated image는 반복되는 하나의 애니메이션입니다. 그래픽이 스피너처럼 항상 한 가지 동작만 할 때 사용하세요.
- **Sprite**는 하나의 위젯 안에 여러 애니메이션을 담고, 그 사이를 전환할 수 있습니다(Idle, Running, Happy 등). 그래픽에 둘 이상의 모드가 필요할 때 사용하세요.
사실 sprite는 animated image들로 만들어집니다. 각 모드는 내부적으로 자기만의 animated image입니다. 그래서 전환할 수 있는 두 번째 애니메이션이 필요해진다면 sprite를 쓸 때입니다.
animated image 추가하고 프레임 업로드하기
- 화면에 Animated Image 위젯을 추가합니다.
- 속성에서 Image Set 행을 찾아 Add Image Set을 클릭합니다.
- NEW 탭에서 업로드 영역("Click to upload frames")을 클릭하고 이미지를 선택합니다. 여러 장을 한 번에 고를 수 있으며 형식은 PNG와 JPEG(
.png,.jpeg,.jpg)입니다. - Continue를 클릭해 프레임을 위젯에 연결합니다. Image Set 행에는 프레임 수가 표시됩니다(예: "8 frames").
이미 사용한 프레임 세트는 다시 업로드하지 않고 Assets 탭에서 가져올 수도 있습니다.
프레임은 파일 이름의 알파벳순으로 정렬되므로 frame_01.png, frame_02.png, frame_03.png처럼 앞에 0을 붙여 순서대로 이름을 지정하세요. frame_2.png 같은 이름은 frame_10.png 뒤에 정렬되어 애니메이션 순서를 망가뜨립니다.
animated image에는 최소 2프레임이 필요하고 최대 32프레임까지 추가할 수 있습니다. 더 많은 움직임이 필요하다면 프레임 수를 줄이고 잘 고른 키프레임을 사용하는 것을 고려하세요. 모든 프레임은 디바이스에 저장됩니다.
모든 프레임 크기가 같아야 하는 이유
기억해야 할 규칙은 하나입니다. 모든 프레임은 정확히 같은 너비와 높이를 가져야 합니다. 서로 다른 크기의 프레임을 추가하려 하면 PicoPixel은 "All frames must have the same dimensions." 메시지와 함께 막습니다.
이유는 간단합니다. 위젯은 각 프레임을 같은 위치, 같은 박스 안에 그립니다. 1번 프레임이 64×64이고 2번 프레임이 80×80이면 제자리에서 부드럽게 움직이는 대신 그림이 튀고 흔들립니다. 모든 프레임 크기를 동일하게 유지해야 움직임이 깔끔합니다.
업로드하기 전에 프레임 크기를 맞추세요. 깔끔한 시퀀스를 만드는 가장 빠른 방법은 이미지 도구에서 같은 캔버스로 모든 프레임을 내보내는 것입니다. 그러면 치수가 같다는 것이 보장됩니다.
속도 설정: duration
Duration 설정은 애니메이션 재생 속도를 제어합니다. 단위는 **밀리초(ms)**이며, 프레임 하나의 시간이 아니라 모든 프레임을 한 번 완전히 재생하는 시간을 뜻합니다. 기본값은 1000 ms(1초)입니다.
PicoPixel은 이 시간을 프레임 전체에 균등하게 나눕니다. 따라서 8프레임에 1000 ms를 설정하면 각 프레임은 125 ms씩 표시됩니다. 더 빠르게 하려면 duration을 낮추고, 더 느리고 여유 있게 하려면 올리세요.
반복: 한 번 재생하거나 계속 재생하기
Repeat 설정은 애니메이션이 끝에 도달했을 때 어떻게 할지 결정합니다. 선택지는 두 가지입니다.
- Infinite는 애니메이션을 계속 반복합니다. 기본값이며, 멈추지 않아야 하는 스피너에 적합합니다.
- **Normal(횟수)**은 지정한 횟수만큼 재생한 뒤 멈춥니다. 3으로 설정하면 세 번 재생하고 마지막 프레임에 머뭅니다.
UI 실행 중 재생 제어하기
애니메이션을 항상 자동으로 돌릴 필요는 없습니다. event editor를 사용하면 사용자 동작에 반응해 시작하고 멈출 수 있습니다. 이벤트를 추가하고 Animated Image Mode action을 선택한 다음 animated image를 가리키고 모드를 고르세요.
- Start는 재생을 시작(또는 재개)합니다.
- Stop은 애니메이션을 일시정지합니다.
- Restart는 첫 프레임으로 돌아가 다시 재생합니다.
예를 들어 "connecting..." 스피너를 버튼이 눌릴 때까지 멈춰 두었다가 Start하고, 작업이 끝나면 Stop할 수 있습니다.
메모리를 가볍게 유지하기
애니메이션은 결국 이미지이고, 이미지는 작은 디바이스에서 공간을 차지합니다. 다음 습관이 효율을 높여 줍니다.
- 필요한 프레임만 사용하세요. 부드러운 움직임에도 잘 고른 몇 장의 프레임이면 충분한 경우가 많습니다.
- 프레임 크기를 적당히 유지하세요. 64×64 애니메이션은 240×240보다 훨씬 가볍습니다.
- 색상 깊이를 디스플레이에 맞추세요(실제 하드웨어 빌드는 ESP32 tutorial 참고).
펌웨어로 내보내는 경우 animated image에는 lv_conf.h에서 LV_USE_ANIMIMG가 활성화되어 있어야 합니다. PicoPixel은 내보낸 README.md에 이 내용을 적어 두므로 빌드(또는 AI assistant)가 무엇을 켜야 하는지 알 수 있습니다.
다음 단계
- 하나의 위젯 안에 둘 이상의 애니메이션이 필요하다면 sprite widget로 넘어가세요.
- event editor로 애니메이션을 버튼이나 다른 트리거에 연결하세요.
- ESP32 LVGL tutorial을 따라 완성한 UI를 디바이스에 올려 보세요.
