LVGL8.3动画图像(太空人)

LVGL8.3 动画图像

1. 动画图像本质

我们知道电影属于视频，而电影的本质是将一系列动作的静态图像进行快速切换而呈现出动画的形式，也就是说动画本质是一系列照片。所以 lvgl 依照这样的思想而定义了动画图像，所以在 lvgl 中动画图像类似于普通的静态图像对象。 唯一的区别是，动画图像设置了一个由多个源图像组成的数组，而不仅仅指定一个源图像。

2. 设置动画图像图片来源

不过在此之前需要将 GIF 文件逐帧拆解为每一张图片，再将得到得图片使用 LVGL 提供得图片转换工具转换为数组（所以你需要知道 LVGL 图片控件是如何使用的，如果不知道可以看看之前的文章：https://blog.csdn.net/jf_52001760/article/details/123981424），这里再提供一个在线的 GIF 图片帧拆分工具。

在线 GIF 图片帧拆分工具：https://uutool.cn/gif2img/

前面说到动画图像和普通静态图像唯一的区别是动画图像需要指定多个源图像，所以现在需要定义一个图像组用于放置多个图像源，注意在使用图像之前需要先声明图像，数组定义如下所示。

LV_IMG_DECLARE(animimg001)
LV_IMG_DECLARE(animimg002)
LV_IMG_DECLARE(animimg003)

static const lv_img_dsc_t * anim_imgs[3] = {
    &animimg001,
    &animimg002,
    &animimg003,
};

3. 创建动画图像

在使用动画图像对象之前首先需要创建对象，创建动画图像对象使用 lv_animimg_create(lv_obj_t * parent) 函数接口。

lv_obj_t * animimg0 = lv_animimg_create(lv_scr_act());

4. 设置动画对象图像源

动画需要一系列的图像，所以需要给动画对象指定一个图像数组，数组即为前面定义的图像源数组，将数组指向动画对象使用 lv_animimg_set_src(lv_obj_t * obj, lv_img_dsc_t * dsc[], uint8_t num) 函数接口，其中 参数 num 为数组中图像的数量。

lv_animimg_set_src(animimg0, (lv_img_dsc_t**)anim_imgs, 3);

5. 设置动画图像持续时间

动画持续时间就是将数组中所有的图像加载显示完成需要的时间，时间单位是毫秒设置持续时间使用 lv_animimg_set_duration(lv_obj_t * obj, uint32_t duration) 函数接口。这里持续时间设置为 1 秒同时组成动画的共 3 张图像，那么动画对象将每隔 0.33 秒的时间加载一张图像显示到屏幕，即 0.33 秒刷新一次图像。

lv_animimg_set_duration(animimg0, 1000);

6. 设置动画图像动画重复次数

lv_animimg_set_repeat_count(lv_obj_t * obj, uint16_t count) 函数接口用于设置动画的重复次数，动画重复次数可以设置为无线（LV_ANIM_REPEAT_INFINITE），例如下方这样。

lv_animimg_set_repeat_count(animimg0, LV_ANIM_REPEAT_INFINITE);

7. 启动动画图像

lv_animimg_start(animimg0);

8. 实例

LV_IMG_DECLARE(image0)
LV_IMG_DECLARE(image1)
LV_IMG_DECLARE(image2)
LV_IMG_DECLARE(image3)
LV_IMG_DECLARE(image4)
LV_IMG_DECLARE(image5)
LV_IMG_DECLARE(image6)
LV_IMG_DECLARE(image7)

static const lv_img_dsc_t * anim_imgs[8] = {
    &image0,
    &image1,
    &image2,
    &image3,
    &image4,
    &image5,
    &image6,
    &image7,
};

lv_obj_t * animimg = lv_animimg_create(par);
lv_obj_center(animimg);
lv_animimg_set_src(animimg, (lv_img_dsc_t**)anim_imgs, 8);
lv_animimg_set_duration(animimg, 1000);
lv_animimg_set_repeat_count(animimg, LV_ANIM_REPEAT_INFINITE);
lv_animimg_start(animimg);

实例动画，太空人效果，整体播放是丝滑的，不过注意这要保证屏幕刷新率 > 15Hz 时才能做到较好得显示效果：

实例动画，蝴蝶呼吸般得扇翅效果，很丝滑：