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

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

</