概览
动画图片控件可以为界面添加旋转的加载图标、弹跳的图标或眨眼表情。本指南介绍如何在 PicoPixel 中添加 LVGL 动画图片控件、准备尺寸一致的帧、设置速度和循环次数，以及在运行时控制播放。
什么是动画图片控件？
动画图片按顺序播放一组静态图片，如同翻页动画。每张图片称为一帧，连续快速播放就会产生动态效果。你只需提供图片帧，设置播放时长和循环方式。
它适合播放一段重复动画，例如加载指示器、跳动的爱心或挥手图标。
该功能基于 LVGL 的 lv_animimg 控件。导出时，PicoPixel 会生成 lv_animimg_create、lv_animimg_set_src、lv_animimg_set_duration 等代码，无需手写。当前支持 LVGL 8.x。
动画图片与精灵：该选哪个？
- Animated Image（动画图片）：只播放一段动画，适合一直旋转的加载图标等。
- Sprite（精灵）：在一个控件中保存多段动画，并按需切换，例如 Idle、Running 和 Happy。
精灵的每个模式底层都是一段动画图片。如果需要在多个动画之间切换，就应使用精灵。
添加控件并上传图片帧
- 将 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_2.png 会排在 frame_10.png 之后。
每段动画至少需要 2 帧，最多支持 32 帧。每一帧都要存储在设备中，尽量选择能表现动作的关键画面。
为什么每一帧的尺寸必须一致？
所有帧的宽度和高度必须完全相同。 上传不同尺寸的图片时，PicoPixel 会提示 “All frames must have the same dimensions.”
控件会在同一区域绘制每一帧。如果第一帧是 64×64，第二帧是 80×80，播放时就可能出现跳动和偏移。统一尺寸后，画面才能保持对齐。
请在上传前统一帧尺寸。最好在图像工具中使用同一个画布导出所有帧，避免尺寸不一致。
设置播放速度
Duration 表示动画完整播放一次所需的时间，单位为毫秒（ms），并非单帧时长。默认值为 1000 ms，即一秒。
PicoPixel 会将时长平均分配给所有帧。例如 8 帧动画设置为 1000 ms，每帧显示 125 ms。缩短时长会加快播放，延长时长会放慢播放。
设置循环次数
Repeat 决定动画播放完后是否继续：
- Infinite：无限循环，默认选项，适合持续旋转的加载图标。
- Normal：播放指定次数后停止。例如设置为 3，就会播放三次，再停留在最后一帧。
在运行时控制播放
通过事件编辑器，可以根据用户操作启动或停止动画。添加事件，将动作设为 Animated Image Mode，选择目标动画图片，再设置播放模式：
- Start：开始或继续播放。
- Stop：暂停播放。
- Restart：返回第一帧并重新播放。
例如，将表示“正在连接”的加载动画默认设为停止，按钮按下后执行 Start，任务完成后执行 Stop。
控制内存占用
动画由图片组成，在小型设备上需要注意资源开销：
- 精简帧数：少量选得合适的帧，也能形成流畅的动画。
- 控制尺寸：64×64 的动画比 240×240 占用的空间小得多。
- 使用适合显示屏的色深：更多硬件配置说明见 ESP32 教程。
在固件中使用动画图片，需要在 lv_conf.h 中启用 LV_USE_ANIMIMG。导出的 README.md 会注明这一要求，便于你或 AI 编程助手完成配置。
下一步
- 需要在多个动画间切换？使用精灵控件。
- 使用事件编辑器，让按钮或其他事件控制动画。
- 按照 ESP32 LVGL 教程，将界面部署到设备。
