本文介绍LVGL中的Lottie动画能力：如何将设计侧导出的.json（Lottie动画描述文件）在嵌入式设备的LVGL界面上解析、光栅化并播放。
重点覆盖：
原理链路（Lottie→ThorVG→LVGL draw buffer）、资源与性能影响、与常见位图动画方案的取舍，以及工程集成要点。
从RA8D1/RA8P1的应用角度看，Lottie的意义不仅是增加动画效果，而是为高品质嵌入式HMI提供一种更灵活的UI资产交付方式。RA8D1/RA8P1/RA8D2具备高性能Cortex-M85、GLCDC、2D Drawing Engine、RGB/MIPI-DSI显示接口以及较丰富的片上/外部存储资源，能够更好地承载LVGL+ThorVG+Lottie带来的实时矢量渲染、帧缓冲合成和显示输出需求。
因此,本文也会结合RA8平台特点，说明Lottie在MCU图形UI中的适用边界与工程价值。
背景与术语
工作原理与数据流（从文件到屏幕）
图1 RA8+LVGL Lottie图形显示数据流。
2.1
数据来源与资源组织
资源形态：一个Lottie .json文件（或同等内容的内存数据）。
存放位置：可放在Flash／SD卡／ROM文件系统中，或编译进固件（如将JSON转为十六进制数组）。
2.2
渲染与显示流程
2.3
控制方式（播放/暂停/跳转）
Lottie Widget以LVGL anim机制驱动播放；通过获取其内部动画对象，可以调整播放速度、循环方式、起止帧等。
根据LVGL文档，默认行为通常为60 FPS无限循环播放（具体可由工程侧重新配置动画参数）。
常见控制需求：播放/暂停/停止、跳转到指定帧、按交互状态切换不同动画资源（例如“加载中/成功/失败”）。
以下是LVGL Lottie动画系统的完整介绍，含优缺点及与GIF/APNG/Animated-WebP/PNG序列帧等方案的对比（结合你嵌入式+PLC+UI开发背景，重点关注资源、性能、稳定性）。
主要特性（相对传统位图动画）
优缺点与适用场景
4.1
优点
画质与缩放：矢量描述使动画在不同尺寸组件中缩放时更不易失真，适合按钮反馈、加载指示、状态切换等UI交互动画。
可维护性：资源以JSON形式管理，便于版本控制、按项目/主题替换，以及在不改动业务代码的情况下更新动画资产。
4.1.2
存储与带宽（通常更省，但与动画复杂度相关）
对许多“图标级/交互级”动画而言，JSON资源体积往往小于同效果的GIF/APNG或序列帧，从而降低Flash占用与加载带宽。
位图逐帧资源的存储开销通常与“分辨率×帧数”近似成正比；而矢量动画更多与“路径复杂度”相关，在小型UI动画场景下更具优势。
4.2
缺点与工程风险
CPU开销更高：需要解析JSON、计算矢量路径与逐帧光栅化；在资源受限MCU/MPU上更容易成为瓶颈。
RAM与动态内存压力：Lottie Widget需要一块用于存放“当前帧”的ARGB8888缓冲区（大小约为w×h×4字节）。此外，渲染引擎在解析与绘制过程中可能产生额外的heap分配，峰值内存需要重点评估。
4.2.2
稳定性与可预期性
在无MMU、异常保护能力有限的平台上，动态内存碎片、越界与异常路径更难兜底；相比纯位图播放，矢量解析/渲染链路更长，问题定位与防护成本更高。
由于是实时渲染，每帧耗时会随场景复杂度波动；当渲染耗时超过刷新周期时会出现掉帧或卡顿，而位图逐帧在“解码足够快”的前提下更容易获得稳定帧时间。
4.3
何时选择Lottie（快速选型）
更适合：尺寸较小的交互动画（图标、按钮反馈、加载指示、状态切换），需要缩放清晰、希望设计资产跨平台复用。
需要谨慎：大面积全屏复杂动画、强实时性场景、RAM紧张且无法提供ARGB8888缓冲区的设备。
不建议：极低端MCU（CPU/RAM较小）且界面必须“绝不掉帧”的场景，此时可优先考虑位图序列帧或更简单LVGL内置动画。
常见动画方案对比（嵌入式LVGL选型）
选型建议可以概括为：如果你更关注画质与缩放、资源可维护性，并且设备具备足够的CPU与RAM（能提供ARGB8888帧缓冲），优先考虑Lottie；如果你更关注帧时间稳定与实现确定性，且Flash足够，位图序列帧往往更稳；GIF/APNG则属于“开发成本低、效果中等”的折中方案。
Renesas RA8D1面向图形显示应用，集成Cortex-M85、较大的片上SRAM、图形LCD控制器（GLCDC）、RGB/MIPI-DSI显示接口、2D Drawing Engine，以及外部SDRAM/Octal SPI等存储接口，可为LVGL+Lottie提供更完整的图形显示能力支撑。RA8P1/RA8D2则进一步提升到1GHz Cortex-M85，并集成Ethos-U55 NPU、GLCDC、2D Drawing Engine、MIPI DSI/CSI与更大的片上SRAM，适合将图形UI、视觉/语音AI与实时交互结合在同一MCU平台上。
前文提到，Lottie的核心挑战在于“矢量实时光栅化+ARGB8888中间缓冲+LVGL合成刷新”。这正好对应了RA8D1/RA8P1/RA8D2的图形显示设计重点：高性能Cortex-M85负责动画解析、路径计算和UI逻辑调度；2D Drawing Engine可用于加速常见2D绘制、Alpha blending、图形填充和图层合成相关操作；GLCDC负责从帧缓冲读取图像层并输出到RGB或MIPI-DSI面板。这样可以把Lottie运行时的压力从“单纯依赖CPU软件绘制”转变为“CPU+2D图形引擎+显示控制器协同工作”。
因此，在RA8D1/RA8P1上使用LVGL Lottie时，推荐将Lottie定位为“小到中等尺寸的高品质交互动画”，例如加载动画、状态切换、AI识别结果提示、设备运行状态图标等；对于全屏复杂矢量动画，仍应控制路径复杂度、画布尺寸和同时播放数量。这样既能体现Lottie在设计复用、缩放清晰和资源可维护性上的优势，也能充分发挥RA8系列在高性能CPU、图形显示控制、2D加速和AI场景融合方面的特点。
ThorVG与LVGL的关系（为什么Lottie要它）
ThorVG（Thor Vector Graphics）是一套轻量的2D矢量图形渲染引擎，可将矢量场景（例如SVG、Lottie）光栅化为像素输出。LVGL在矢量图形能力上通过适配层将ThorVG作为一种绘制后端接入，从而让控件能够以统一方式使用矢量渲染能力（包括Lottie动画与SVG图像）。由于ThorVG主要以C++实现，工程侧需要确保构建系统可编译并链接C++代码。
LVGL通过适配层将ThorVG接入为绘制后端之一，用于渲染：
Lottie（.json）：矢量动画（逐帧光栅化输出）。
SVG（.svg）：矢量图片（按需缩放渲染）。
ThorVG Scene Graph：ThorVG内部的场景/图元树结构（用于组织复杂绘制对象）。
工程集成要点（配置、缓冲区与资源加载）
7.1
配置与依赖
依赖关系
根据LVGL文档，Lottie Widget基于ThorVG。要启用该能力，通常需要在lv_conf.h中开启（名称以你所用版本为准）：
LV_USE_LOTTIE：启用Lottie控件。
LV_USE_VECTOR_GRAPHIC：启用矢量图形相关能力。
LV_USE_THORVG_INTERNAL或LV_USE_THORVG_EXTERNAL：选择使用LVGL内置/集成的ThorVG，或链接外部ThorVG。
注意：ThorVG主要使用C++实现。因此在创建或移植RA8工程时，不能只按纯C工程来配置，需要确认所使用的工具链与工程模板已经启用C++编译支持，并将相关.cpp源文件纳入构建。同时，还需要检查C/C++混合编译、链接选项、运行库支持以及必要的初始化流程是否配置正确。RA8平台本身可以承载LVGL+ThorVG+Lottie这类应用，但工程侧必须具备C++编译与链接能力；否则在引入ThorVG后，容易出现.cpp文件无法编译、符号未解析或运行库缺失等编译/链接问题。
7.2
设置渲染缓冲区（必须）
Lottie的每一帧会先渲染到一块由用户提供的缓冲区中。根据LVGL文档，该缓冲区通常使用ARGB8888格式，因此缓冲区大小应按以下方式估算：buffer_bytes=width×height×4。
为避免“缓冲区尺寸”和“显示尺寸”不一致，Lottie Widget的尺寸通常会在内部被设置为缓冲区的宽高（即动画的渲染目标尺寸）。因此在选定动画显示大小时，应同步规划缓冲区大小与RAM预算。
lv_lottie_set_buffer( lottie , w , h , buf )或lv_lottie_set_draw_buf ( lottie , draw_buf )来设置缓冲区。
使用绘图缓冲区时，必须由用户预先初始化LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED颜色格式。
7.3
设置动画资源（从文件或内存数据）
LVGL示例中常把JSON资源存为“十六进制数组”（而不是长字符串），主要是为了：
避免在源码字符串中处理大量转义字符（如引号）。
规避某些编译器/链接器对“超长字符串常量”的限制，减少构建不确定性。
LVGL提供脚本可将.json转为十六进制数组，便于直接编译进固件（脚本路径与参数以你工程所用版本为准）。
例如：
./filetohex.py path/to/lottie.json --filter-character --null-terminate > out.txt--filter-character通常用于过滤非ASCII字符，--null-terminate用于在末尾补\0以确保字符串正确结束（以具体脚本实现为准）。
要从数据创建动画，请使用lv_lottie_set_src_data ( lottie , data , sizeof ( data ) )
如果从文件加载，可使用相应接口指定.json路径。根据LVGL文档：Lottie的文件加载器不走LVGL文件系统接口，需要使用普通文件路径（且不带驱动器号）。在嵌入式工程中，这通常意味着你需要确保底层文件访问方式与该加载器匹配。
7.4
播放控制与帧率
lv_anim_t * a = lv_lottie_get_anim(lottie)
Lottie Widget可返回一个用于驱动播放的LVGL动画对象。默认通常以约60 FPS循环播放，但你可以根据设备性能调整动画时长/播放速度/循环策略，从而在“流畅度”和“CPU占用”之间做权衡（例如适当降低帧率以提升整体稳定性）。
示例：从内置数组加载Lottie动画
代码示例可按功能块理解如下：
// ==================== 1. 头文件与功能开关检查 ====================// 仅在编译 LVGL 示例工程时启用本示例// 仅在 lv_conf.h 中启用 LV_USE_LOTTIE 后才编译 Lottie 示例/*** 示例功能：从内置数组加载一个 Lottie 动画并显示在屏幕中央。*/voidlv_example_lottie_1(void){// ==================== 2. 声明 Lottie JSON 数据资源 ====================// lv_example_lottie_approve[] 通常由 .json 文件转换成 C 数组后生成externconstuint8_t lv_example_lottie_approve[];// 记录 Lottie 数据数组的大小，供 lv_lottie_set_src_data 使用externconstsize_t lv_example_lottie_approve_size;// ==================== 3. 创建 Lottie 对象并绑定动画数据 ====================// 在当前活动屏幕上创建一个 Lottie Widgetlv_obj_t * lottie = lv_lottie_create(lv_screen_active());// 将内置数组形式的 Lottie 数据设置为动画源lv_lottie_set_src_data(lottie, lv_example_lottie_approve, lv_example_lottie_approve_size);// ==================== 4. 配置 Lottie 渲染缓冲区 ====================// Lottie 每一帧会先渲染到 ARGB8888_PREMULTIPLIED 格式的缓冲区中// 如果工程没有特殊的 GPU/stride 对齐要求，可以直接使用普通静态 buffer// 64 * 64 * 4 表示：宽 64 × 高 64 × 每像素 4 字节（ARGB8888）staticuint8_t buf[64 * 64 * 4];// 将 buffer 绑定给 Lottie Widget，作为实际渲染目标lv_lottie_set_buffer(lottie, 64, 64, buf);// 如果平台或 GPU 对 draw buffer 对齐/stride 有特殊要求，建议使用 LVGL draw_bufLV_DRAW_BUF_DEFINE_STATIC(draw_buf, 64, 64, LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED);// 将 draw_buf 绑定给 Lottie Widgetlv_lottie_set_draw_buf(lottie, &draw_buf);// ==================== 5. 设置显示位置 ====================// 将 Lottie 动画对象居中显示lv_obj_center(lottie);}voidlv_example_lottie_1(void){// 在线示例或未启用 Lottie 的工程中，显示一行提示文字lv_obj_t * label = lv_label_create(lv_screen_active());lv_label_set_text(label, "Lottie cannot be previewed online");// 将提示文字居中显示lv_obj_center(label);}
（上下滑动观看）
通过这样的划分，可以更清楚地看到示例代码的执行顺序：先检查功能开关，再创建对象并加载动画数据，随后配置渲染缓冲区，最后将动画显示到屏幕上。如果工程未启用Lottie，则使用简单文本作为降级显示。
落地建议：先控制资源，再看显示效果
先给动画分级：小尺寸的加载图标、状态提示、按钮反馈，可以优先尝试Lottie；如果是大面积、路径很多或持续播放的复杂动画，建议先评估资源开销，必要时改成简化动效或位图序列帧。
画布不要开太大：Lottie每一帧都需要一块渲染缓冲区，大小约为w×h×4字节。实际工程中应按最终显示尺寸来规划，不建议先渲染到很大的buffer再缩小显示。
帧率可以适当降低：加载提示、状态变化这类动画不一定需要60 FPS。如果系统还有触摸、通信、控制逻辑等任务，适当降低动画刷新频率通常更稳。
注意内存峰值：除了固定的帧缓冲区，ThorVG在解析和渲染过程中还可能使用动态内存。建议避免频繁创建或销毁动画对象，并在压力测试时观察heap峰值和碎片情况。
准备降级显示方案：如果动画资源加载失败、解析失败，或运行时性能不满足要求，应能够切换为静态图标、简单spinner或位图动画，保证主界面和关键业务流程不受影响。
（文中相关信息您可复制链接至浏览器中打开查阅）
lv_lottie_set_buffer
lv_lottie_set_draw_buf
LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED
lv_lottie_set_src_data
如您在使用瑞萨MCU/MPU产品中有任何问题，可识别下方二维码或复制网址到浏览器中打开，进入瑞萨MCU/MPU官方技术论坛寻找答案或获取在线技术支持。
https://bbs.21ic.com/renesas
1
END
1
