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

相关文章

基于WinForm+Halcon实现图像缩放与交互功能

《基于WinForm+Halcon实现图像缩放与交互功能》本文主要讲述在WinForm中结合Halcon实现图像缩放、平移及实时显示灰度值等交互功能,包括初始化窗口的不同方式,以及通过特定事件添加相应... 目录前言初始化窗口添加图像缩放功能添加图像平移功能添加实时显示灰度值功能示例代码总结最后前言本文将

最好用的WPF加载动画功能

《最好用的WPF加载动画功能》当开发应用程序时,提供良好的用户体验(UX)是至关重要的,加载动画作为一种有效的沟通工具,它不仅能告知用户系统正在工作,还能够通过视觉上的吸引力来增强整体用户体验,本文给... 目录前言需求分析高级用法综合案例总结最后前言当开发应用程序时,提供良好的用户体验(UX)是至关重要

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主

Qt QWidget实现图片旋转动画

《QtQWidget实现图片旋转动画》这篇文章主要为大家详细介绍了如何使用了Qt和QWidget实现图片旋转动画效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、效果展示二、源码分享本例程通过QGraphicsView实现svg格式图片旋转。.hpjavascript

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

目录 引言项目背景环境准备 硬件要求软件安装与配置系统设计 系统架构关键技术代码示例 数据预处理模型训练模型预测应用场景结论 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摄像头采