【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					//过渡动画用户变量
									)
1
2
3
4
5
6
7
8

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

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);
1
2
3
4

这里使用的动画效果函数为 lv_anim_path_ease_in_out()，这是一个内置的过渡效果，与之类似的过渡函数可以参考下表：

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

static lv_style_t style_trans;
lv_style_init(&style_trans);
lv_style_set_transition(&style_trans, &trans);
1
2
3

过渡动画只有在两种样式切换时才会发生。例如，如果让以上样式应用在按下状态下：

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
2
3
4

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

注意事项：

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);
    lv_style_set_height(&style_cont_main, 120);
1
2
3

否则不会生效

2. 实际使用中设置两种风格变量，一个是主要风格，一个是过渡风格，这个在使用时不会出现错乱

使用示例：

#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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141