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[],//初始化过渡动画需要的过渡变化形式，数组形式表现，数组最后一位必须为 0lv_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);
那么只有在从其它状态变为按下时才会发生过渡：
注意事项：
static const lv_style_prop_t trans_props[] = {LV_STYLE_WIDTH, LV_STYLE_HEIGHT, LV_STYLE_BG_COLOR, 0,};这个数据中有3个元素（0除外），分别是LV_STYLE_WIDTHLV_STYLE_HEIGHTLV_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);lv_style_set_height(&style_cont_main, 120);
否则不会生效
实际使用中设置两种风格变量，一个是主要风格，一个是过渡风格，这个在使用时不会出现错乱
使用示例：
#include "lvgl/lvgl.h"#include "lvgl/examples/lv_examples.h"#include "lvgl/demos/lv_demos.h"#include "lv_drivers/win32drv/win32drv.h"#include "test.h"static lv_style_t style_label;static lv_obj_t* cont;static lv_obj_t* cont_main;LV_FONT_DECLARE(myFontOrbitron_18);static void anim_x_cb(void* var, int32_t v){lv_obj_set_y(var, v);}static void label_ready_cb(lv_anim_t* var){lv_obj_fade_out(cont, 500, 100);lv_obj_fade_in(cont_main, 500, 100);}static void anim_ready_cb(lv_anim_t *var){lv_obj_t* label = lv_label_create(cont);lv_obj_remove_style_all(label);lv_obj_align(label, LV_ALIGN_CENTER, 0, -24);lv_obj_set_style_text_font(label, &myFontOrbitron_18, LV_PART_MAIN);lv_obj_add_style(label, &style_label, LV_PART_MAIN);lv_label_set_text(label, "Start Up");//lv_obj_fade_in(label, 1000, 100);lv_anim_t label_anim;lv_anim_init(&label_anim);lv_anim_set_var(&label_anim, label);lv_anim_set_values(&label_anim, lv_obj_get_y(label), -24);lv_anim_set_time(&label_anim, 500);lv_anim_set_exec_cb(&label_anim, anim_x_cb);lv_anim_set_path_cb(&label_anim, lv_anim_path_ease_in_out);lv_anim_set_repeat_count(&label_anim, 0);lv_anim_set_ready_cb(&label_anim, label_ready_cb);lv_anim_start(&label_anim);}static void set_value(void* bar, int32_t v){lv_bar_set_start_value(bar, 50 - (v - 50), LV_ANIM_OFF);lv_bar_set_value(bar, v, LV_ANIM_OFF);if (v == 100){printf("v==100");}}void bar_demo(void){//进度条只有两个样式选择，一个是主要样式（不变化背景色），一个是指示器（变化的前景色）///D1kgJstatic lv_style_t style_main; // static lv_style_t style_indicator;//cont = lv_obj_create(lv_scr_act());lv_obj_set_style_bg_color(cont, lv_color_black(), LV_PART_MAIN | LV_STATE_DEFAULT);lv_obj_set_style_border_color(cont, lv_color_black(), LV_PART_MAIN | LV_STATE_DEFAULT);lv_obj_set_size(cont, 240, 240);lv_obj_center(cont);lv_style_init(&style_main);lv_style_set_border_width(&style_main, 2);lv_style_set_border_color(&style_main, lv_palette_main(LV_PALETTE_BLUE));lv_style_set_border_opa(&style_main, LV_OPA_TRANSP);//lv_style_set_bg_color(&style_main, lv_palette_main(LV_PALETTE_RED));//lv_style_set_bg_opa(&style_main, LV_OPA_COVER);lv_style_set_pad_all(&style_main, 6); /*To make the indicator smaller*/lv_style_set_radius(&style_main, 6);lv_style_init(&style_indicator);lv_style_set_bg_opa(&style_indicator, LV_OPA_COVER);lv_style_set_bg_color(&style_indicator, lv_palette_main(LV_PALETTE_ORANGE));lv_style_set_radius(&style_indicator, 3);lv_obj_t* bar = lv_bar_create(cont);//样式到这先添加，否则可能出现别的问题lv_obj_remove_style_all(bar);lv_obj_add_style(bar, &style_main,LV_PART_MAIN);lv_obj_add_style(bar, &style_indicator, LV_PART_INDICATOR);lv_obj_set_size(bar, 160, 16);lv_obj_center(bar);lv_bar_set_range(bar, 0, 100);lv_bar_set_mode(bar, LV_BAR_MODE_RANGE);lv_bar_set_value(bar, 50, LV_ANIM_OFF);lv_bar_set_start_value(bar, 50, LV_ANIM_OFF);lv_style_init(&style_label);lv_style_set_text_font(&style_label, &lv_font_montserrat_16);lv_style_set_text_color(&style_label, lv_color_hex(0xff931e));static lv_style_transition_dsc_t trans_main;static lv_style_tstyle_cont_main;static const lv_style_prop_t trans_props[] = {LV_STYLE_WIDTH, LV_STYLE_HEIGHT, LV_STYLE_BG_COLOR, 0,};cont_main = lv_obj_create(lv_scr_act());lv_obj_set_size(cont_main, 240, 60);lv_obj_set_style_bg_color(cont_main, lv_color_black(), LV_PART_MAIN | LV_STATE_DEFAULT);lv_obj_set_style_border_color(cont_main, lv_color_black(), LV_PART_MAIN | LV_STATE_DEFAULT);lv_obj_set_align(cont_main, LV_ALIGN_TOP_MID);lv_style_init(&style_cont_main);lv_style_set_bg_color(&style_cont_main, lv_palette_main(LV_PALETTE_RED));lv_style_set_width(&style_cont_main, 240);lv_style_set_height(&style_cont_main, 120);lv_style_transition_dsc_init(&trans_main, trans_props, lv_anim_path_ease_in_out, 100, 0, NULL);lv_style_set_transition(&style_cont_main, &trans_main);lv_obj_add_style(cont_main, &style_cont_main, LV_STATE_PRESSED);lv_anim_t a;lv_anim_init(&a);lv_anim_set_var(&a, bar);lv_anim_set_values(&a, 50, 100);lv_anim_set_exec_cb(&a, set_value);lv_anim_set_time(&a, 500);//lv_anim_set_playback_time(&a, 2000);lv_anim_set_repeat_count(&a, 0);lv_anim_set_ready_cb(&a, anim_ready_cb);lv_anim_start(&a);}
