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

2024-06-23 19:12
文章标签 图像 动画 太空 lvgl8.3

本文主要是介绍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 时才能做到较好得显示效果:
请添加图片描述
实例动画,蝴蝶呼吸般得扇翅效果,很丝滑:
请添加图片描述

这篇关于LVGL8.3动画图像(太空人)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1088026

相关文章

基于人工智能的图像分类系统

目录 引言项目背景环境准备 硬件要求软件安装与配置系统设计 系统架构关键技术代码示例 数据预处理模型训练模型预测应用场景结论 1. 引言 图像分类是计算机视觉中的一个重要任务,目标是自动识别图像中的对象类别。通过卷积神经网络(CNN)等深度学习技术,我们可以构建高效的图像分类系统,广泛应用于自动驾驶、医疗影像诊断、监控分析等领域。本文将介绍如何构建一个基于人工智能的图像分类系统,包括环境

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

Flutter 进阶:绘制加载动画

绘制加载动画:由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类:LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态,而 LoadingPainter 则负责绘制动画。

用Unity2D制作一个人物,实现移动、跳起、人物静止和动起来时的动画:中(人物移动、跳起、静止动作)

上回我们学到创建一个地形和一个人物,今天我们实现一下人物实现移动和跳起,依次点击,我们准备创建一个C#文件 创建好我们点击进去,就会跳转到我们的Vision Studio,然后输入这些代码 using UnityEngine;public class Move : MonoBehaviour // 定义一个名为Move的类,继承自MonoBehaviour{private Rigidbo

lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

在使用 LVGL 8.3.6 创建一个垂直布局,其中 label 控件位于 image 控件下方,你可以使用 lv_obj_set_flex_flow 来设置布局为垂直,并确保 label 控件在 image 控件后添加。这里是如何步骤性地实现它的一个基本示例: 创建父容器:首先创建一个容器对象,该对象将作为布局的基础。设置容器为垂直布局:使用 lv_obj_set_flex_flow 设置容器

Verybot之OpenCV应用一:安装与图像采集测试

在Verybot上安装OpenCV是很简单的,只需要执行:         sudo apt-get update         sudo apt-get install libopencv-dev         sudo apt-get install python-opencv         下面就对安装好的OpenCV进行一下测试,编写一个通过USB摄像头采

动画AnimationDrawable、转动

现实开发中:很多地方都用到 点击动画的特效; 本案例本人做了三个关于“动” 画 的效果; 先上图: 总体图: A: B: 1:点击图片按钮,效果是:图片闪动; 通过在xml中定义:标签:animation-list来实现点击动画的效果;  是否循环标签:oneshot ;   时间间隔标签:duration ; 要显示的图片标签:drawable ;

13 transition数组的动画使用

划重点 动画:transitiontransition-group :数组动画数组的 添加 / 删除 豆腐粉丝汤 清淡又健康 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><me

12 动画transition的使用2

划重点 Vue 动画:transition / transform在动画周期中执行动动画(上一篇是通过动画样式控制动画) 清蒸扇贝 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><

【python计算机视觉编程——7.图像搜索】

python计算机视觉编程——7.图像搜索 7.图像搜索7.1 基于内容的图像检索(CBIR)从文本挖掘中获取灵感——矢量空间模型(BOW表示模型)7.2 视觉单词**思想****特征提取**: 创建词汇7.3 图像索引7.3.1 建立数据库7.3.2 添加图像 7.4 在数据库中搜索图像7.4.1 利用索引获取获选图像7.4.2 用一幅图像进行查询7.4.3 确定对比基准并绘制结果 7.