TUI酷炫动画的使用

最新推荐文章于 2024-07-27 17:29:44 发布

TUISYS

最新推荐文章于 2024-07-27 17:29:44 发布

阅读量138

点赞数

文章标签：动画 ui 开发语言

本文链接：https://blog.csdn.net/TUISYS/article/details/125542252

版权

描述参考代码仓库例子

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);