【LVGL 学习】样式（style）过渡动画学习

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[],		//初始化过渡动画需要的过渡变化形式，数组形式表现，数组最后一位必须为 0
									lv_anim_path_cb_t path_cb, 			//初始化过渡动画动画路径，也就是动画样式
									uint32_t time, 						//过渡前的延时
									uint32_t delay, 					//过渡持续的时间
									void * user_data					//过渡动画用户变量
									)

例如，假设需要实现这样一个过渡效果：点击时背景颜色发生改变并拉长，那么相应的初始化过程为：

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()，这是一个内置的过渡效果，与之类似的过渡函数可以参考下表：

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

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

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

注意事项：

1. static const lv_style_prop_t trans_props[] = {LV_STYLE_WIDTH, LV_STYLE_HEIGHT, LV_STYLE_BG_COLOR, 0,};这个数据中有3个元素（0除外），分别是 LV_STYLE_WIDTH LV_STYLE_HEIGHT LV_STYLE_BG_COLOR ,这三个元素，这三个元素分别要写上对应风格的函数，例如：

    lv_style_set_bg_color(&style_cont_main, lv_palette_main(LV_PALETTE_RED));
    lv_style_set_width(&style_cont_main, 240);