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);
那么只有在从其它状态变为按下时才会发生过渡:
</