本文主要是介绍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酷炫动画的使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!