当前位置：首页 > news >正文

LVGL Animation Image（Animimg）控件详解

news 2025/4/16 5:30:34

一、Animation Image（Animimg）控件详解

1. 概述

功能：Animimg 是 LVGL 中用于显示动画图像的控件。
特点：支持从多个静态图像创建动画效果。

2. 创建和初始化

创建方法：

lv_obj_t * lv_animimg_create(lv_obj_t * parent);

示例：

lv_obj_t * animimg = lv_animimg_create(parent);

3. 设置属性

设置源图像数组：
```
void lv_animimg_set_src(lv_obj_t * obj, const lv_img_dsc_t ** src);
```
- 参数：
  - obj：Animimg 对象。
  - src：包含图像描述符的数组。
设置帧间隔时间：
```
void lv_animimg_set_duration(lv_obj_t * obj, uint32_t duration);
```
- 参数：
  - obj：Animimg 对象。
  - duration：每帧之间的间隔时间（毫秒）。
设置播放次数：
```
void lv_animimg_set_repeat_count(lv_obj_t * obj, uint32_t count);
```
- 参数：
  - obj：Animimg 对象。
  - count：动画重复播放的次数，0 表示无限循环。

开始/停止动画：

void lv_animimg_start(lv_obj_t * obj);
void lv_animimg_stop(lv_obj_t * obj);

参数：
- obj：Animimg 对象。

4. 示例代码

// 定义图像描述符数组
static const lv_img_dsc_t * img_array[] = {&img_frame_1,&img_frame_2,&img_frame_3,NULL  // 数组末尾必须为 NULL
};// 创建 Animimg 控件
lv_obj_t * animimg = lv_animimg_create(lv_scr_act());// 设置图像源
lv_animimg_set_src(animimg, img_array);// 设置帧间隔时间
lv_animimg_set_duration(animimg, 100);  // 每帧间隔 100 毫秒// 设置播放次数
lv_animimg_set_repeat_count(animimg, 0);  // 无限循环// 开始动画
lv_animimg_start(animimg);

5. 注意事项

图像格式：确保所有图像描述符都已正确定义并加载到内存中。
性能考虑：大量高分辨率图像可能会影响系统性能，建议优化图像资源。

二、效果展示

在这里插入图片描述

三、源码分享

ui.h


typedef struct
{lv_obj_t *screen;bool screen_del;lv_obj_t *screen_animimg;lv_obj_t *screen_image3D;lv_obj_t *screen_btnStart;lv_obj_t *screen_btnStart_label;lv_obj_t *screen_btnRotation;lv_obj_t *screen_btnRotation_label;
}lv_ui;

ui.c

#include "lvgl.h"
#include <stdio.h>
#include "gui_guider.h"
#include "events_init.h"
#include "widgets_init.h"
#include "custom.h"void setup_scr_screen(lv_ui *ui)
{//Write codes screenui->screen = lv_obj_create(NULL);lv_obj_set_size(ui->screen, 800, 480);lv_obj_set_scrollbar_mode(ui->screen, LV_SCROLLBAR_MODE_OFF);//Write style for screen, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_bg_opa(ui->screen, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen, lv_color_hex(0x13e6d2), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);//Write codes screen_animimgui->screen_animimg = lv_animimg_create(ui->screen);lv_animimg_set_src(ui->screen_animimg, (const void **) screen_animimg_imgs, 20, false);lv_animimg_set_duration(ui->screen_animimg, 30*20);lv_animimg_set_repeat_count(ui->screen_animimg, LV_ANIM_REPEAT_INFINITE);lv_img_set_src(ui->screen_animimg, screen_animimg_imgs[0]);lv_obj_set_pos(ui->screen_animimg, 27, 14);lv_obj_set_size(ui->screen_animimg, 354, 325);//Write codes screen_image3Dui->screen_image3D = lv_animimg_create(ui->screen);lv_animimg_set_src(ui->screen_image3D, (const void **) screen_image3D_imgs, 22, false);lv_animimg_set_duration(ui->screen_image3D, 200*22);lv_animimg_set_repeat_count(ui->screen_image3D, LV_ANIM_REPEAT_INFINITE);lv_img_set_src(ui->screen_image3D, screen_image3D_imgs[0]);lv_obj_set_pos(ui->screen_image3D, 416, 14);lv_obj_set_size(ui->screen_image3D, 322, 317);//Write codes screen_btnStartui->screen_btnStart = lv_btn_create(ui->screen);ui->screen_btnStart_label = lv_label_create(ui->screen_btnStart);lv_label_set_text(ui->screen_btnStart_label, "Start");lv_label_set_long_mode(ui->screen_btnStart_label, LV_LABEL_LONG_WRAP);lv_obj_align(ui->screen_btnStart_label, LV_ALIGN_CENTER, 0, 0);lv_obj_set_style_pad_all(ui->screen_btnStart, 0, LV_STATE_DEFAULT);lv_obj_set_width(ui->screen_btnStart_label, LV_PCT(100));lv_obj_set_pos(ui->screen_btnStart, 123, 392);lv_obj_set_size(ui->screen_btnStart, 100, 50);//Write style for screen_btnStart, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_bg_opa(ui->screen_btnStart, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen_btnStart, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen_btnStart, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_width(ui->screen_btnStart, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_radius(ui->screen_btnStart, 5, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_shadow_width(ui->screen_btnStart, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_color(ui->screen_btnStart, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_font(ui->screen_btnStart, &lv_font_montserratMedium_16, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_opa(ui->screen_btnStart, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_align(ui->screen_btnStart, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);//Write codes screen_btnRotationui->screen_btnRotation = lv_btn_create(ui->screen);ui->screen_btnRotation_label = lv_label_create(ui->screen_btnRotation);lv_label_set_text(ui->screen_btnRotation_label, "Rotation\n");lv_label_set_long_mode(ui->screen_btnRotation_label, LV_LABEL_LONG_WRAP);lv_obj_align(ui->screen_btnRotation_label, LV_ALIGN_CENTER, 0, 0);lv_obj_set_style_pad_all(ui->screen_btnRotation, 0, LV_STATE_DEFAULT);lv_obj_set_width(ui->screen_btnRotation_label, LV_PCT(100));lv_obj_set_pos(ui->screen_btnRotation, 550, 392);lv_obj_set_size(ui->screen_btnRotation, 100, 50);//Write style for screen_btnRotation, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_bg_opa(ui->screen_btnRotation, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen_btnRotation, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen_btnRotation, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_width(ui->screen_btnRotation, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_radius(ui->screen_btnRotation, 5, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_shadow_width(ui->screen_btnRotation, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_color(ui->screen_btnRotation, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_font(ui->screen_btnRotation, &lv_font_montserratMedium_16, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_opa(ui->screen_btnRotation, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_align(ui->screen_btnRotation, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);//The custom code of screen.//Update current screen layout.lv_obj_update_layout(ui->screen);//Init events for screen.events_init_screen(ui);
}