TUI酷炫动画的使用

2023-11-02 18:59
文章标签 使用 动画 酷炫 tui

本文主要是介绍TUI酷炫动画的使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

描述 参考代码仓库例子

TUI支持各种酷炫动画的使用,所有动画一个函数代码就可以完成。
动画有这几类,普通控件动画屏幕切换动画图片动画

普通控件动画

下面接口函数,每一个接口使能一种动画,每种动画,有不同的路径效果(path_type变量),重点说下如下的参数:

  • obj需要动画的控件
  • need_time_ms控件完成动画的时间毫秒单位
  • start_XXX控件动画前的值
  • end_XXX控件动画结束后的值
  • path_type值变化的算法路径
  • end_cb动画结束的回调函数
typedef void(*tui_object_anim_cb_t)(tui_obj_t * obj);				//动画结束回调函数,用于动画结束后处理其他的事
typedef void(*tui_object_anim_value_cb_t)(tui_obj_t * obj, int32_t value);	//自定义值回调函数
void tui_obj_anim_stop(tui_obj_t * obj);					//强制停止动画void tui_obj_anim_fade_in(tui_obj_t * obj, uint32_t need_time_ms, tui_object_anim_cb_t end_cb);
void tui_obj_anim_fade_out(tui_obj_t * obj, uint32_t need_time_ms, tui_object_anim_cb_t end_cb);
void tui_obj_anim_mov_x(tui_obj_t * obj, uint32_t need_time_ms, tui_coord_t start_x, tui_coord_t end_x, tui_anim_path_e path_type, tui_object_anim_cb_t end_cb);
void tui_obj_anim_mov_y(tui_obj_t * obj, uint32_t need_time_ms, tui_coord_t start_y, tui_coord_t end_y, tui_anim_path_e path_type, tui_object_anim_cb_t end_cb);
void tui_obj_anim_set_width(tui_obj_t * obj, uint32_t need_time_ms, tui_coord_t start_width, tui_coord_t end_width, tui_anim_path_e path_type, tui_object_anim_cb_t end_cb);
void tui_obj_anim_set_height(tui_obj_t * obj, uint32_t need_time_ms, tui_coord_t start_height, tui_coord_t end_height, tui_anim_path_e path_type, tui_object_anim_cb_t end_cb);
void tui_obj_anim_set_vaule(tui_obj_t * obj, uint32_t need_time_ms, int32_t start_value, int32_t end_value, tui_anim_path_e path_type, tui_object_anim_value_cb_t value_cb, tui_object_anim_cb_t end_cb);

举例说明其中一种动画的7种路径效果,如图是不同路径的动画:
在这里插入图片描述

typedef enum tag_tui_anim_path {TUI_ANIM_PATH_LINEAR = 0,               /* 线性效果 */TUI_ANIM_PATH_EASE_IN,                  /* 加速效果 */TUI_ANIM_PATH_EASE_OUT,                 /* 减速效果 */TUI_ANIM_PATH_EASE_IN_OUT,              /* 加速减速效果 */TUI_ANIM_PATH_OVERSHOOT,                /* 越界回来效果 */TUI_ANIM_PATH_BOUNCE,                   /* 反弹来回效果 */TUI_ANIM_PATH_STEP,                     /* 时间到了直接显示 */
} tui_anim_path_e;

测试代码如下:

static void tui_object_anim0_end_cb(tui_obj_t * obj);
static void tui_object_anim1_end_cb(tui_obj_t * obj);
static void tui_object_anim2_end_cb(tui_obj_t * obj);
static void tui_object_anim3_end_cb(tui_obj_t * obj);
static void tui_object_anim4_end_cb(tui_obj_t * obj);
static void tui_object_anim5_end_cb(tui_obj_t * obj);
static void tui_object_anim6_end_cb(tui_obj_t * obj);static void tui_object_anim0_end_cb(tui_obj_t * obj)
{tui_obj_anim_mov_x(TUI_OBJ(HOME_MAIN_VIEW_CONTAINER_3), 1000, 58, 720, TUI_ANIM_PATH_EASE_IN, tui_object_anim1_end_cb);}
static void tui_object_anim1_end_cb(tui_obj_t * obj)
{tui_obj_anim_mov_x(TUI_OBJ(HOME_MAIN_VIEW_CONTAINER_4), 1000, 58, 720, TUI_ANIM_PATH_EASE_OUT, tui_object_anim2_end_cb);}
static void tui_object_anim2_end_cb(tui_obj_t * obj)
{tui_obj_anim_mov_x(TUI_OBJ(HOME_MAIN_VIEW_CONTAINER_5), 1000, 58, 720, TUI_ANIM_PATH_EASE_IN_OUT, tui_object_anim3_end_cb);}
static void tui_object_anim3_end_cb(tui_obj_t * obj)
{tui_obj_anim_mov_x(TUI_OBJ(HOME_MAIN_VIEW_CONTAINER_6), 1000, 58, 720, TUI_ANIM_PATH_OVERSHOOT, tui_object_anim4_end_cb);}
static void tui_object_anim4_end_cb(tui_obj_t * obj)
{tui_obj_anim_mov_x(TUI_OBJ(HOME_MAIN_VIEW_CONTAINER_7), 1000, 58, 720, TUI_ANIM_PATH_BOUNCE, tui_object_anim5_end_cb);}
static void tui_object_anim5_end_cb(tui_obj_t * obj)
{tui_obj_anim_mov_x(TUI_OBJ(HOME_MAIN_VIEW_CONTAINER_8), 1000, 58, 720, TUI_ANIM_PATH_STEP, tui_object_anim6_end_cb);}
static void tui_object_anim6_end_cb(tui_obj_t * obj)
{tui_obj_anim_mov_x(TUI_OBJ(HOME_MAIN_VIEW_CONTAINER_2), 1000, 58, 720, TUI_ANIM_PATH_LINEAR, tui_object_anim0_end_cb);
}

屏幕切换动画

下面接口函数是屏幕的一般切换, 其中有10种切换效果,重点说下如下的参数::

  • new_scr需要显示的视图
  • old_scr旧视图需要删除
  • anim_type屏幕的切换效果类型
  • need_time_ms完成动画的时间毫秒单位
  • auto_del_old_scr是否tui_obj_del删除旧视图
  • end_cb动画结束的回调函数
typedef enum tag_tui_scr_load_anim {TUI_SCR_LOAD_ANIM_NONE = 0,             /* 无动画 */TUI_SCR_LOAD_ANIM_OVER_LEFT,            /* 单向左移动 */TUI_SCR_LOAD_ANIM_OVER_RIGHT,           /* 单向右移动 */TUI_SCR_LOAD_ANIM_OVER_TOP,             /* 单向上移动 */TUI_SCR_LOAD_ANIM_OVER_BOTTOM,          /* 单向下移动 */TUI_SCR_LOAD_ANIM_MOVE_LEFT,            /* 双向左移动 */TUI_SCR_LOAD_ANIM_MOVE_RIGHT,           /* 双向右移动 */TUI_SCR_LOAD_ANIM_MOVE_TOP,             /* 双向上移动 */TUI_SCR_LOAD_ANIM_MOVE_BOTTOM,          /* 双向下移动 */TUI_SCR_LOAD_ANIM_FADE_ON,              /* 双淡入淡出 */
} tui_scr_load_anim_e;void tui_screen_load_anim(tui_obj_t * new_scr, tui_obj_t * old_scr, tui_scr_load_anim_e anim_type, uint32_t need_time_ms, bool auto_del_old_scr, tui_object_anim_cb_t end_cb);

各种效果,可以参考 home.c

图片动画

  • image图片控件,也可以设置不同图片切换的动画,每张图片的切换时间一样,如:
    在这里插入图片描述

  • gif控件动画

  • animation动画控件,如图
    在这里插入图片描述

各种效果,可以参考 animation

注意

各种动画相互独立,在普通控件动画里面,各种动画可以一起使用,控制一个控件对象。

这篇关于TUI酷炫动画的使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

SpringBoot中使用Flux实现流式返回的方法小结

《SpringBoot中使用Flux实现流式返回的方法小结》文章介绍流式返回(StreamingResponse)在SpringBoot中通过Flux实现,优势包括提升用户体验、降低内存消耗、支持长连... 目录背景流式返回的核心概念与优势1. 提升用户体验2. 降低内存消耗3. 支持长连接与实时通信在Sp

python使用库爬取m3u8文件的示例

《python使用库爬取m3u8文件的示例》本文主要介绍了python使用库爬取m3u8文件的示例,可以使用requests、m3u8、ffmpeg等库,实现获取、解析、下载视频片段并合并等步骤,具有... 目录一、准备工作二、获取m3u8文件内容三、解析m3u8文件四、下载视频片段五、合并视频片段六、错误

gitlab安装及邮箱配置和常用使用方式

《gitlab安装及邮箱配置和常用使用方式》:本文主要介绍gitlab安装及邮箱配置和常用使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装GitLab2.配置GitLab邮件服务3.GitLab的账号注册邮箱验证及其分组4.gitlab分支和标签的

SpringBoot3应用中集成和使用Spring Retry的实践记录

《SpringBoot3应用中集成和使用SpringRetry的实践记录》SpringRetry为SpringBoot3提供重试机制,支持注解和编程式两种方式,可配置重试策略与监听器,适用于临时性故... 目录1. 简介2. 环境准备3. 使用方式3.1 注解方式 基础使用自定义重试策略失败恢复机制注意事项

nginx启动命令和默认配置文件的使用

《nginx启动命令和默认配置文件的使用》:本文主要介绍nginx启动命令和默认配置文件的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录常见命令nginx.conf配置文件location匹配规则图片服务器总结常见命令# 默认配置文件启动./nginx

在Windows上使用qemu安装ubuntu24.04服务器的详细指南

《在Windows上使用qemu安装ubuntu24.04服务器的详细指南》本文介绍了在Windows上使用QEMU安装Ubuntu24.04的全流程:安装QEMU、准备ISO镜像、创建虚拟磁盘、配置... 目录1. 安装QEMU环境2. 准备Ubuntu 24.04镜像3. 启动QEMU安装Ubuntu4

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》:本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色(红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解

Windows下C++使用SQLitede的操作过程

《Windows下C++使用SQLitede的操作过程》本文介绍了Windows下C++使用SQLite的安装配置、CppSQLite库封装优势、核心功能(如数据库连接、事务管理)、跨平台支持及性能优... 目录Windows下C++使用SQLite1、安装2、代码示例CppSQLite:C++轻松操作SQ

Python常用命令提示符使用方法详解

《Python常用命令提示符使用方法详解》在学习python的过程中,我们需要用到命令提示符(CMD)进行环境的配置,:本文主要介绍Python常用命令提示符使用方法的相关资料,文中通过代码介绍的... 目录一、python环境基础命令【Windows】1、检查Python是否安装2、 查看Python的安

Python并行处理实战之如何使用ProcessPoolExecutor加速计算

《Python并行处理实战之如何使用ProcessPoolExecutor加速计算》Python提供了多种并行处理的方式,其中concurrent.futures模块的ProcessPoolExecu... 目录简介完整代码示例代码解释1. 导入必要的模块2. 定义处理函数3. 主函数4. 生成数字列表5.