切换动画

一、支持动画类型的相关介绍

enum
{
    LV_SWITCHANIM_NONE = 0,			//无动画
    LV_SWITCHANIM_PUSH,				//右滑动画
    LV_SWITCHANIM_ZOOM,				//缩放动画
    LV_SWITCHANIM_MASK,				//mask动画
    LV_SWITCHANIM_SPLIT,			//分块动画
    LV_SWITCHANIM_TURN_AXIS,		//转轴动画
    LV_SWITCHANIM_TURN_3D,			//3D翻转动画
    LV_SWITCHANIM_TURN_HALF,		//翻页动画
    LV_SWITCHANIM_TURN_SWITCH,		//切换动画
    LV_SWITCHANIM_DEFAULT = 0xff
};

//上述动画类型为已内置动画，主要有: 右滑动画、缩放动画、mask动画、分块动画、转轴动画、3D翻转动画、翻页动画画。

右滑退出

fishy

缩放动画

fishy

渐隐动画

fishy

转轴动画

fishy

3D翻转动画

fishy

翻页动画画

fishy

APP在使用这些内置动画作为切换动画时，只需调用一下接口：

void gui_app_set_enter_anim_type(uint16_t major, uint16_t minor, int16_t minor_aux);

  • major：动画主ID,大的分类。

  • minor：动画次ID,二级分类，比如3D翻转分为水平或垂直方向，mask动画分为：两侧渐隐和中间开合

  • minor_aux：与次动画id向匹配的id，当进出动画的两个APP优先级相比较时，优先级高的minor_aux会覆盖优先级低的APPminor动画，以保证进出动画向匹配

void gui_app_set_exit_anim_type(uint16_t major, uint16_t minor, int16_t minor_aux);

  • 同上

二、如何添加自定义动画

​ 添加切换动画接口BUILTIN_ANIMATION，主要功能为注册动画类型以及相应的回调函数。以默认动画为例说明添加流程。

//动画回调函数
void lv_baseanim_progress_default(lv_baseanim_t *baseanim, lv_obj_t *anim_obj, int32_t progress)
{
    if (LV_BASEANIM_EXIT_TYPE == lv_baseanim_get_type(baseanim))
    {
        lv_coord_t pos = ((LV_HOR_RES_MAX * progress) >> 10);
        lv_coord_t opa = LV_OPA_COVER - ((progress * LV_OPA_COVER) >> 10);
        //rt_kprintf("pos:%d

", pos);
        lv_obj_align_to(anim_obj, NULL, LV_ALIGN_CENTER, pos, 0);
        lv_obj_set_style_img_opa(anim_obj, opa, 0);
    }
}
//注册动画
BUILTIN_ANIMATION(pushanim, LV_SWITCHANIM_PUSH, lv_baseanim_progress_default);

  • ​ 回调函数中接口包含进出场动画数据句柄、拍照图片以及动画进度。动画数据句柄包含相关动画参数，根据进度值处理图片的滑动以及变形等操作。

  • ​ 注册接口主要包含动画名称，以及动画的主序列号，所有动画的序列号不能相同，动画配置时主要看序列号匹配动画类型。

三、如何配置页面进出动画

​ 在onstart配置动画相关类型与优先级 ​ 配置进出场动画类型(不配置为默认动画) ​ 配置优先级(不配置为默认动画优先级，默认动画的优先级最低)

void on_start()
{
   	gui_app_set_enter_anim_type(LV_SWITCHANIM_TURN_3D, LV_TURN3D_HOR, LV_TURN3D_HOR);
	gui_app_set_exit_anim_type(LV_SWITCHANIM_TURN_3D, LV_TURN3D_HOR, LV_TURN3D_HOR);
	gui_app_set_anim_prior(LV_SWITCHANIM_PRIOR_LOW, LV_SWITCHANIM_PRIOR_LOW); 
    //...
}

四、如何配置平铺页面切换动画

平铺配置主要配置有两方面：平铺模式以及平铺动画 平铺模式主要配置平铺滑动的两端后的差异，模式有4种：

  • 循环模式：两端连接在以起，循环切换

  • 回弹模式：滑动到两端后会回弹回去，不会切换到下一个应用

  • 侧边栏模式：滑动的两端后可以打开侧边栏的配置

  • 菜单模式：滑动到两端后进入主菜单

平铺动画主要配置平铺应用之间的切换动画，目前支持的动画有缩放、渐隐、3D翻转、翻书效果、六扇门等动画类型

缩放动画

fishy

渐隐动画

fishy

Y轴压缩

fishy

3D翻转

fishy

六扇门

fishy 
enum
{
	TLV_ANIM_TRANS_NONE = 0,
	TLV_ANIM_TRANS_ZOOM,
	TLV_ANIM_TRANS_FADE
	TLV_ANIM_TRANS_TURN_3D_HOR,
	TLV_ANIM_TRANS_TURN_Y,
	TLV_ANIM_TRANS_DRAG,
	TLV_ANIM_TRANS_RING
}

五、如何配置MASK效果

进出动画框架中已集成mask架构,用户只需打开配置以及添加对应的mask图片即可
1.config中使能’Enbel app trans animation mask function’

2.在资源的mask目录中放入对应的mask图片,需要注意mask图片的分辨率需要与动画buf一致

3.在初始化时,使用接口’app_trans_anim_mask_set_src’将需要的图片资源设置进去即完成进出动画的所有配置, 切换应用以及页面时即可看见所设置的mask效果