当一个控件的状态发生改变时，可以让样式也发生变化以提醒用户。通过过渡动画(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);
那么只有在从其它状态变为按下时才会发生过渡：
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);
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)
{
//进度条只有两个样式选择，一个是主要样式（不变化背景色），一个是指示器（变化的前景色）
//http://t.csdn.cn/D1kgJ
static 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_t style_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);
}
