LVGL 在国际劳动节或春节这种日子总有人想在嵌入式屏幕上放点节日特效。但大部分人的第一反应是LVGL 不是做控件界面的吗按钮、列表、仪表盘都行烟花这种粒子类动画真的能写吗能写而且不需要引入第三方图形引擎。LVGL 自带 Canvas 画布控件和 Timer 定时器机制配合一个几十行代码的粒子模型就可以渲染出彩色烟花粒子效果。这篇文章把原理、编码、排错和优化思路完整拆开代码可以复制到你的 LVGL 工程里直接跑。读完你可以得到三个确定结论第一LVGL 实现粒子特效的正确姿势是“Canvas Timer”而不是 lv_anim第二粒子系统核心只有三件事——发射、运动、衰减第三Canvas 修改后如果不调用lv_obj_invalidate()画面不会刷新这是最容易踩的坑。1. LVGL 烟火效果的核心思路先给出一个明确判断在 LVGL 里做烟花特效关键不在于 LVGL 的动画接口而在于你有没有一套能在每帧重新绘制的粒子模型。很多初学者第一反应是用lv_anim来做烟花给每个粒子创建一个动画对象让它的位置和透明度随时间变化。这种方案在小数量元素下可行比如控制一个小球移动。但烟花有它的特殊性一次爆炸会产生几十到上百个粒子每个粒子都需要独立的速度、方向、寿命和颜色粒子运动会叠加重力速度需要逐帧改变粒子从亮到暗是连续的颜色渐变过程。如果用lv_anim管理这么多动画对象不仅创建成本高而且lv_anim本身是针对“控件属性变化”设计的拿它去做粒子物理模拟就像用螺丝刀拧膨胀螺栓能用但不顺手。更合理的架构是“Canvas Timer”把烟花粒子数据放在一个结构体数组里用一个 LVGL 定时器按固定周期刷新画布。每帧做三件事清空画布更新所有粒子的位置、速度和寿命把存活粒子画到画布上。这个思路对应的是典型的游戏粒子系统模型。LVGL 在这里只承担两个职责提供一块可写像素的画布提供周期性触发回调的定时器。剩下的事情全部由 C 语言数组和简单物理公式完成。实现方式优点缺点适用场景lv_anim 动画对象代码量少LVGL 自动管理粒子多时开销大难做重力衰减少量元素的路径动画Canvas Timer资源可控效果逼真需要手动管理渲染与刷新粒子类特效、像素级自绘如果你理解了上面的对比后面的代码其实就顺理成章了。2. 基础概念Canvas、定时器与颜色混合在贴完整代码之前先把三个基础概念讲清楚。这样你看到代码时不会一头雾水也知道每个调用背后到底发生了什么。2.1 Canvas 画布一块能写像素的缓冲区LVGL 的 Canvas 是一个可以在运行时直接修改像素的控件。它背后本质上是一块lv_color_t类型的内存 buffer创建时通过lv_canvas_set_buffer()把这块 buffer 和控件绑定起来。之后你可以用lv_canvas_set_px(canvas, x, y, color)把画布上某个坐标的像素设置成指定颜色。这块 buffer 的大小由画布宽高和颜色深度共同决定buffer 字节数 宽 × 高 × sizeof(lv_color_t)在LV_COLOR_DEPTH为 16 的平台上240×240 画布约需要 115KB 内存。这个数字会在后面反复提到因为它是嵌入式平台最现实的约束。Canvas 的定位是“像素级自绘控件”适合画这种自由粒子图形。2.2 LVGL Timer周期性任务调度器lv_timer是 LVGL 内置的软件定时器。它不依赖硬件定时器而是由主循环中的lv_timer_handler()统一调度。创建一个 20ms 周期定时器的写法是lv_timer_create(my_callback, 20, NULL);20ms 的周期对应理论帧率 50fps。但需要注意的是LVGL 定时器的实际触发频率会受到lv_timer_handler()调用频率的影响。如果主循环要等很久才调用一次定时器回调也会跟着变慢。这点在嵌入式移植时尤其重要。2.3 lv_color_mix颜色渐隐的基础粒子消失时不应该突然不见而是像真实烟花一样慢慢熄灭。LVGL 提供了一个很方便的函数lv_color_t lv_color_mix(lv_color_t c1, lv_color_t c2, uint8_t mix);它按mix比例混合两种颜色。mix 255时完全返回c1mix 0时完全返回c2。烟花粒子的渐隐逻辑就是粒子越接近寿命终点mix值越小颜色就越接近背景黑色。理解了这三个概念现在可以看完整代码了。3. 环境准备与工程接入烟花特效的代码不依赖任何第三方库只要你已经有一个能跑起来的 LVGL 工程就行。推荐先使用 PC 模拟器调试因为粒子参数需要反复调整在模拟器上观察效率最高。当前社区里比较常见的做法是 VSCode PlatformIO LVGL 模拟器仓库也有直接使用 LVGL官方 提供的 PC 模拟器工程。两种方式都可以核心是让 LVGL 在 Windows/Linux 上跑起来。如果你已经有一个目标板工程比如 STM32 或 ESP32把后面两个源文件直接加入编译工程即可。LVGL 版本建议演示代码以 LVGL 8.3 为基准如果使用 LVGL 9.x需要把画布的颜色格式参数从LV_IMG_CF_TRUE_COLOR改成LV_COLOR_FORMAT_NATIVE其余逻辑基本不变。内存方面优先确认 MCU 剩余 RAM。240×240 的 16bit 画布需要约 115KB这对很多 MCU 来说不算小。如果内存紧张把画布缩到 160×160buffer 就降到约 50KB。粒子数组本身只占很小的内存120 个粒子大约 2KB 出头真正的大头是画布。接入方式很简单在 LVGL 初始化完成后调用一个初始化函数即可下面是主函数示意#include lvgl.h #include fw_firework.h int main(void) { lv_init(); /* 初始化屏幕、触摸或按键驱动 */ // display_init(); // touchpad_init(); /* 创建烟火特效 */ fw_firework_init(lv_scr_act()); while (1) { lv_timer_handler(); my_delay(5); } }4. 烟火效果完整代码实现下面进入正题。整个特效封装在fw_firework.c和fw_firework.h两个文件里不依赖具体业务界面可以单独拷贝到任何 LVGL 工程使用。4.1 头文件定义/* 文件路径fw_firework.h */ #ifndef FW_FIREWORK_H #define FW_FIREWORK_H #include lvgl.h #ifdef __cplusplus extern C { #endif void fw_f
LVGL 在国际劳动节或春节这种日子总有人想在嵌入式屏幕上放点节日特效。但大部分人的第一反应是LVGL 不是做控件界面的吗按钮、列表、仪表盘都行烟花这种粒子类动画真的能写吗能写而且不需要引入第三方图形引擎。LVGL 自带 Canvas 画布控件和 Timer 定时器机制配合一个几十行代码的粒子模型就可以渲染出彩色烟花粒子效果。这篇文章把原理、编码、排错和优化思路完整拆开代码可以复制到你的 LVGL 工程里直接跑。读完你可以得到三个确定结论第一LVGL 实现粒子特效的正确姿势是“Canvas Timer”而不是 lv_anim第二粒子系统核心只有三件事——发射、运动、衰减第三Canvas 修改后如果不调用lv_obj_invalidate()画面不会刷新这是最容易踩的坑。1. LVGL 烟火效果的核心思路先给出一个明确判断在 LVGL 里做烟花特效关键不在于 LVGL 的动画接口而在于你有没有一套能在每帧重新绘制的粒子模型。很多初学者第一反应是用lv_anim来做烟花给每个粒子创建一个动画对象让它的位置和透明度随时间变化。这种方案在小数量元素下可行比如控制一个小球移动。但烟花有它的特殊性一次爆炸会产生几十到上百个粒子每个粒子都需要独立的速度、方向、寿命和颜色粒子运动会叠加重力速度需要逐帧改变粒子从亮到暗是连续的颜色渐变过程。如果用lv_anim管理这么多动画对象不仅创建成本高而且lv_anim本身是针对“控件属性变化”设计的拿它去做粒子物理模拟就像用螺丝刀拧膨胀螺栓能用但不顺手。更合理的架构是“Canvas Timer”把烟花粒子数据放在一个结构体数组里用一个 LVGL 定时器按固定周期刷新画布。每帧做三件事清空画布更新所有粒子的位置、速度和寿命把存活粒子画到画布上。这个思路对应的是典型的游戏粒子系统模型。LVGL 在这里只承担两个职责提供一块可写像素的画布提供周期性触发回调的定时器。剩下的事情全部由 C 语言数组和简单物理公式完成。实现方式优点缺点适用场景lv_anim 动画对象代码量少LVGL 自动管理粒子多时开销大难做重力衰减少量元素的路径动画Canvas Timer资源可控效果逼真需要手动管理渲染与刷新粒子类特效、像素级自绘如果你理解了上面的对比后面的代码其实就顺理成章了。2. 基础概念Canvas、定时器与颜色混合在贴完整代码之前先把三个基础概念讲清楚。这样你看到代码时不会一头雾水也知道每个调用背后到底发生了什么。2.1 Canvas 画布一块能写像素的缓冲区LVGL 的 Canvas 是一个可以在运行时直接修改像素的控件。它背后本质上是一块lv_color_t类型的内存 buffer创建时通过lv_canvas_set_buffer()把这块 buffer 和控件绑定起来。之后你可以用lv_canvas_set_px(canvas, x, y, color)把画布上某个坐标的像素设置成指定颜色。这块 buffer 的大小由画布宽高和颜色深度共同决定buffer 字节数 宽 × 高 × sizeof(lv_color_t)在LV_COLOR_DEPTH为 16 的平台上240×240 画布约需要 115KB 内存。这个数字会在后面反复提到因为它是嵌入式平台最现实的约束。Canvas 的定位是“像素级自绘控件”适合画这种自由粒子图形。2.2 LVGL Timer周期性任务调度器lv_timer是 LVGL 内置的软件定时器。它不依赖硬件定时器而是由主循环中的lv_timer_handler()统一调度。创建一个 20ms 周期定时器的写法是lv_timer_create(my_callback, 20, NULL);20ms 的周期对应理论帧率 50fps。但需要注意的是LVGL 定时器的实际触发频率会受到lv_timer_handler()调用频率的影响。如果主循环要等很久才调用一次定时器回调也会跟着变慢。这点在嵌入式移植时尤其重要。2.3 lv_color_mix颜色渐隐的基础粒子消失时不应该突然不见而是像真实烟花一样慢慢熄灭。LVGL 提供了一个很方便的函数lv_color_t lv_color_mix(lv_color_t c1, lv_color_t c2, uint8_t mix);它按mix比例混合两种颜色。mix 255时完全返回c1mix 0时完全返回c2。烟花粒子的渐隐逻辑就是粒子越接近寿命终点mix值越小颜色就越接近背景黑色。理解了这三个概念现在可以看完整代码了。3. 环境准备与工程接入烟花特效的代码不依赖任何第三方库只要你已经有一个能跑起来的 LVGL 工程就行。推荐先使用 PC 模拟器调试因为粒子参数需要反复调整在模拟器上观察效率最高。当前社区里比较常见的做法是 VSCode PlatformIO LVGL 模拟器仓库也有直接使用 LVGL官方 提供的 PC 模拟器工程。两种方式都可以核心是让 LVGL 在 Windows/Linux 上跑起来。如果你已经有一个目标板工程比如 STM32 或 ESP32把后面两个源文件直接加入编译工程即可。LVGL 版本建议演示代码以 LVGL 8.3 为基准如果使用 LVGL 9.x需要把画布的颜色格式参数从LV_IMG_CF_TRUE_COLOR改成LV_COLOR_FORMAT_NATIVE其余逻辑基本不变。内存方面优先确认 MCU 剩余 RAM。240×240 的 16bit 画布需要约 115KB这对很多 MCU 来说不算小。如果内存紧张把画布缩到 160×160buffer 就降到约 50KB。粒子数组本身只占很小的内存120 个粒子大约 2KB 出头真正的大头是画布。接入方式很简单在 LVGL 初始化完成后调用一个初始化函数即可下面是主函数示意#include lvgl.h #include fw_firework.h int main(void) { lv_init(); /* 初始化屏幕、触摸或按键驱动 */ // display_init(); // touchpad_init(); /* 创建烟火特效 */ fw_firework_init(lv_scr_act()); while (1) { lv_timer_handler(); my_delay(5); } }4. 烟火效果完整代码实现下面进入正题。整个特效封装在fw_firework.c和fw_firework.h两个文件里不依赖具体业务界面可以单独拷贝到任何 LVGL 工程使用。4.1 头文件定义/* 文件路径fw_firework.h */ #ifndef FW_FIREWORK_H #define FW_FIREWORK_H #include lvgl.h #ifdef __cplusplus extern C { #endif void fw_f
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
