概览
正在寻找带有真实关键帧控制的免费 LVGL 动画模板？这个 PicoPixel 项目在 480 x 480 的嵌入式 UI 画布上展示基于时间轴的控件动画，覆盖位置、尺寸、透明度以及混合轨道。
这些不是静态运动稿，也不是逐帧图片序列。该模板展示的是细粒度的关键帧式动画，可以随时间分别控制单个属性。在时间轴视图中，你可以看到 X/Y 位置、W/H 尺寸和透明度的独立轨道，关键帧沿时间轴分布，因此每个属性都可以在自己的时间点变化。
你可以把它作为 ESP32 仪表盘、引导界面、加载状态、注意力提示、确认反馈、智能设备界面、信息亭面板，或任何需要控件在按钮按下后移动、调整大小、淡入淡出，或组合多个动画属性的 LVGL UI 起点。
包含内容
- 四个 480 x 480 动画示例，分别布局为 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值。 - 透明度轨道，具有
%值。 - 多个关键帧，放置在不同时间点。
- 时间轴拖动预览，可以在精确时间戳检查动画。
这让示例比简单过渡更强大。你可以通过在准确时间设置准确数值来编排一个控件，并在导出前预览结果。
导出前，请在 PicoPixel 中重命名重要对象，例如 btn_play_position、btn_play_size、btn_play_opacity、btn_play_mixed、animated_logo 和 animation_card。清晰的名称会让生成的 LVGL 动画和事件代码更容易阅读。
为什么它很适合 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 事件动作连接按钮，然后导出。
在烧录前先在 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()。
更多背景请阅读 事件编辑器指南 和 使用 PicoPixel 模板 指南。
适用场景
当你需要以下内容的清晰起点时，这个模板很适合：
- LVGL 关键帧动画示例
- ESP32 UI 动效原型
- 时间轴控制的控件运动
- 按钮触发的动画播放
- 位置、尺寸和透明度动画测试
- 加载状态和进度反馈
- 确认和注意力提示
- 引导界面和交互式演示
- 学习 PicoPixel 可视化时间轴如何变成 LVGL 行为