LVGL库入门 03 - 动画

1、transition:过渡动画

当一个控件的状态发生改变时,可以让样式也发生变化以提醒用户。通过过渡动画(transition)可以让样式的改变更自然。例如,按钮在点击时,以及开关在切换时,都具有一小段的过渡动画。

过渡动画使用 lv_style_transition_dsc_t 结构描述。为了要设置过渡动画,需要提供以下信息:

  • 哪些属性需要过渡
  • 过渡前的延时
  • 过渡持续的时间
  • 过渡动画(以回调函数的形式提供)

这些信息和结构成员是一一对应的。除了直接给结构成员赋值外,也可以使用以下初始化函数一次性设置:

void lv_style_transition_dsc_init(
                lv_style_transition_dsc_t* tr, 
                const lv_style_prop_t props[],
                lv_anim_path_cb_t path_cb, 
                uint32_t time, 
                uint32_t delay, 
                void* user_data);

第一个参数需要提供被初始化的过渡动画结构,第二个参数数组和字符串一样需要以 0 结尾。例如,假设需要实现这样一个过渡效果:点击时背景颜色发生改变并拉长,那么相应的初始化过程为:

static lv_style_transition_dsc_t trans;
static const lv_style_prop_t trans_props[] = {
    LV_STYLE_WIDTH, LV_STYLE_HEIGHT, LV_STYLE_BG_COLOR, 0,
};
lv_style_transition_dsc_init(&trans, trans_props, 
            lv_anim_path_ease_in_out, 500, 0, NULL);

这里使用的动画效果函数为 lv_anim_path_ease_in_out() ,这是一个内置的过渡效果,与之类似的过渡函数可以参考下表:

动画函数 过渡效果
lv_anim_path_linear 等速过渡
lv_anim_path_ease_in 先慢后快的过渡
lv_anim_path_ease_out 先快后慢的过渡
lv_anim_path_ease_in_out 先慢、后快、结尾再变慢的过渡
lv_anim_path_overshoot 幅度会稍微过头一些再弹回的过渡
lv_anim_path_bounce 和上一个类似,不过会比较快地多弹几次
lv_anim_path_step 一步到位,和没动画的区别在于多了个延时

过渡动画是控件样式的一部分,可以将初始化得到的过渡动画描述应用到样式上:

static lv_style_t style_trans;
lv_style_init(&style_trans);
lv_style_set_transition(&style_trans, &trans);

过渡动画只有在两种样式切换时才会发生。例如,如果让以上样式应用在按下状态下:

lv_style_set_bg_color(&style_trans, lv_palette_main(LV_PALETTE_RED));
lv_style_set_width(&style_trans, 150);
lv_style_set_height(&style_trans, 60);
lv_obj_add_style(obj, &style_trans, LV_STATE_PRESSED);

那么只有在从其它状态变为按下时才会发生过渡:

</

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值