[经验]

【EASY EAI Orin Nano（RK3576）开发板试用体验】使用和LVGL的anim（简易动画）和animimg（图像动画）控件组合实现复杂的...

donatello1996

2025-8-9 21:37:08

1340 rk3576

VID_20250809_211926

在LVGL中，实现复杂的动画功能往往需要anim和animimg两个控件组合实现的，对于anim控件来说，可以实现对obj多边形的平移，缩放，旋转三大操作，甚至用于anim控件的obj变量也可以初始化为img类型（即静态图片），但是在目前的使用中，对anim和animimg的触摸事件监听还是无法实现，要在动画中加入人机交互功能，就只能再额外加入一个带有触摸事件监听的按钮或者imgbtn，这个不知道在后续的版本更新中会不会实现呢，有点期待。对于同一个obj，LVGL支持多个anim，这多个anim可以同时播放也可以控制先后播放，实现这个功能，需要依靠anim的执行过程回调函数、播放结束回调函数和开始函数，并设置执行过程回调函数唯一变量v的起始值和结束值：

lv_anim_set_exec_cb(&anim_posx , my_anim_x_cb);
lv_anim_set_values(&anim_posx , 20 , 100);
void my_anim_x_cb(void * var , int32_t v)
{
lv_obj_set_x(var , v);
}
lv_anim_set_completed_cb(&anim_posx , my_anim_posx_completed_cb);
void my_anim_posx_completed_cb(lv_anim_t * a)
{
printf("my_anim_posx_completed_cb.\n");
x_end_flag = true;
}
lv_anim_start(&anim_posx);

复制代码

注意，受限于LVGL的机制，一个anim变量只能注册一个执行过程回调函数，并且这个回调函数也是单参数的，需要设置这个唯一参数的起始值和结束值，在anim运行过程中，这个唯一参数会从起始值单调变化至结束值，这样就实现了平移的长度单调变化，缩放大小单调变化，旋转角度单调变化，就实现了anim的基本功能！而官方的代码中也是建议使用者一个anim变量只执行一个动作（平移/缩放/旋转），想要实现多个动画并行播放（比如斜向平移，即同时改变X轴和Y轴坐标，或者在平移过程中旋转obj）的话，官方是建议使用者定义多个anim变量来实现，当然，想要用一个anim变量实现斜向平移也是可以的，只不过由于一个anim变量的执行过程回调函数只能传入唯一一个参数，因此需要使用X轴和Y轴的映射来实现，并且假如要对obj实行多次平移的话，还需要重新计算X轴和Y轴的起始位置，算法非常复杂，容易出错，因此如果想要用一个anim变量实现多个变化，需要等待官方后续代码更新。

引入坐标表，就可以让obj沿着设定路径进行anim动画播放：

struct poss
{
int32_t xpos;
int32_t ypos;
};
struct poss poss1[] =
{
{50 , 50},
{900 , 50},
{900 , 500},
{50 , 500},
{50 , 50},
{900 , 500},
{50 , 50},
{900 , 50},
{900 , 500},
{50 , 50},
{50 , 500},
{900 , 50},
{50 , 50}
};
lv_anim_set_exec_cb(&anim_posx , my_anim_x_cb);
lv_anim_set_values(&anim_posx , lv_obj_get_x(img_anim) , poss1[i].xpos);
lv_anim_set_exec_cb(&anim_posy , my_anim_y_cb);
lv_anim_set_values(&anim_posy , lv_obj_get_y(img_anim) , poss1[i].ypos);

复制代码

在每个坐标平移动画结束之后插入一段旋转动画，就可以调整obj的运动方向，实现更连贯的动画。

再结合上一帖中已经实现的animimg播放功能，设置animimg的播放位置坐标，并新增额外的animimg素材在不同场合播放，新增按钮用于控制多段animimg的播放时机，就可以实现一个非常简单的小游戏：

水滴！攻击物是水滴！
但是我们是在星际争霸世界观中！人类的战列巡洋舰可以进行折跃机动躲避任何敌人，因此，只要指挥官的反应和操作够快，是可以让战列巡洋舰通过折跃躲避水滴攻击的。
《三体》小说中的水滴沿着固定路线前进，追击人类的战列巡洋舰，通过按下屏幕中间的按钮在水滴抵达战列巡洋舰之前让战列巡洋舰折跃离场，使水滴扑个空，演示动画在置顶视频中。

本主题由 ElecFans小喇叭于 2025-8-10 11:29 添加图标推荐