RT-Thread-LVGL例程学习——animRT-Thread问答社区

LVGL例程学习——anim

发布于 2022-06-26 15:34:37 浏览：1062 订阅该版

续接前文，开始测试LVGL的官方anim例程。动画不太好截图演示效果。这里只附测试代码和说明。

`lv_example_anim_1()`测试例程如下，创建了一个switch控件，通过switch控件的事件回调函数，控制一个label的滑出和擦入动画效果。在之前的style的学习中，学习过对style的各属性可以添加一个动画效果。这次的例程是直接定义一个`lv_anim_t`结构变量，对此结构变量进行操作。

```C
static void anim_x_cb(void * var, int32_t v)
{
    lv_obj_set_x(var, v);
}

static void sw_event_cb(lv_event_t * e)
{
    lv_obj_t * sw = lv_event_get_target(e);
    lv_obj_t * label = lv_event_get_user_data(e);

if(lv_obj_has_state(sw, LV_STATE_CHECKED)) {
        lv_anim_t a;
        lv_anim_init(&a);
        lv_anim_set_var(&a, label);
        lv_anim_set_values(&a, lv_obj_get_x(label), 100);
        lv_anim_set_time(&a, 500);
        lv_anim_set_exec_cb(&a, anim_x_cb);
        lv_anim_set_path_cb(&a, lv_anim_path_overshoot);
        lv_anim_start(&a);
    } else {
        lv_anim_t a;
        lv_anim_init(&a);
        lv_anim_set_var(&a, label);
        lv_anim_set_values(&a, lv_obj_get_x(label), -lv_obj_get_width(label));
        lv_anim_set_time(&a, 500);
        lv_anim_set_exec_cb(&a, anim_x_cb);
        lv_anim_set_path_cb(&a, lv_anim_path_ease_in);
        lv_anim_start(&a);
    }
}
/**
 * Start animation on an event
 */
void lv_example_anim_1(void)
{
    lv_obj_t * label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "Hello animations!");
    lv_obj_set_pos(label, 100, 10);
    lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);

lv_obj_t * sw = lv_switch_create(lv_scr_act());
    lv_obj_center(sw);
    lv_obj_add_state(sw, LV_STATE_CHECKED);
    lv_obj_add_event_cb(sw, sw_event_cb, LV_EVENT_VALUE_CHANGED, label);
    lv_obj_set_style_size(sw, lv_pct(30), 0);
}
```

学习点：
- 1， LVGL中动画效果的使用方法。
- 2，`lv_anim_set_exec_cb()`设定了另外的一个回调函数，可以设置动画的参数。
- 3，`lv_anim_set_var()`函数设定`exec_cb()`回调函数中的'var'参数。
- 4，`lv_anim_set_values()`函数设定变换值。

`lv_example_anim_2()`例程，创建了一个圆形控件，加入了一个LVGL的擦入擦出动画。加入了一个水平移动的动画。加入了一个改变大小的动画。我自己又加入了一个改变颜色的动画。最终效果就是一个圆形控件，从屏幕左侧滑到屏幕右侧，在此过程中，控件由小变大，有红色变成蓝色。然后再反向回去。整体效果的话，擦入擦出的动画不是很明显。换成弹跳动画的话，就明显多了。

```C
static lv_color_t colors[256];

static void anim_x_cb(void * var, int32_t v)
{
    lv_obj_set_x(var, v);
}

static void anim_size_cb(void * var, int32_t v)
{
    lv_obj_set_size(var, v, v);
}

static void anim_color_cb(void * var, int32_t v)
{
    lv_obj_set_style_bg_color(var, colors[v], 0);
}

/**
 * Create a playback animation
 */
void lv_example_anim_2(void)
{
    colors[0].full = 0xffff0000;
    for(int16_t i=1; i<256; i++)
    {
        colors[i].ch.red = colors[i-1].ch.red-1;
        colors[i].ch.blue = colors[i-1].ch.blue+1;
    }

lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_set_style_bg_color(obj, lv_palette_main(LV_PALETTE_RED), 0);
    lv_obj_set_style_radius(obj, LV_RADIUS_CIRCLE, 0);

lv_obj_align(obj, LV_ALIGN_LEFT_MID, 10, 0);

lv_anim_t a;
    lv_anim_init(&a);
    lv_anim_set_var(&a, obj);
    lv_anim_set_values(&a, 10, 100);
    lv_anim_set_time(&a, 1000);
    lv_anim_set_playback_delay(&a, 100);
    lv_anim_set_playback_time(&a, 300);
    lv_anim_set_repeat_delay(&a, 500);
    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
    lv_anim_set_path_cb(&a, lv_anim_path_ease_in_out);

lv_anim_set_exec_cb(&a, anim_size_cb);
    lv_anim_start(&a);
    lv_anim_set_exec_cb(&a, anim_x_cb);
    lv_anim_set_values(&a, 10, LV_HOR_RES -110);
    lv_anim_start(&a);
    lv_anim_set_exec_cb(&a, anim_color_cb);
    lv_anim_set_values(&a, 0, 255);
    lv_anim_start(&a);
}
```

- 1，可以为anim，添加多个不同的exec回调函数。实现动画叠加的效果。
- 2，playback和repeat的使用。

`lv_example_anim_3()`例程，就稍微有点复杂了。而且原例程代码有bug。滑动条一滑动就崩溃，其实就是出现了段错误，内存访问越界了。
此例程动画方面，对顶部的动画控件，实现了一个x方向的移动动画，还把path_cb也定义到了自己实现的动画效果，不再使用LVGL定义的7中动画效果了。
具体功能为，通过两个滑动条控件，可以设置生成贝塞尔曲线的参数，生成的贝塞尔曲线用一个chart控件显示。然后根据生成的赛贝尔曲线控制动画效果。
我修复原例程的bug的方法比较简单，把`lv_chart_set_point_count()`设置点数量的函数，移到了`lv_chart_add_series()`函数前面，其实属于绕开了bug。
原代码先调用`lv_chart_add_series()`的话，在此函数中，还没有设置有效的点个数，所以里面没有开辟足够大的空间。需要等调用`lv_chart_set_point_count()`的时候从新开辟。但问题在于`lv_chart_add_series()`函数中，series的y_ext_buf_assigned变量被设置为false了。而x_ext_buf_assigned变量没有操作，值为true。在`lv_chart_set_point_count()`函数中，判断对应的assigned变量为false才再次分配内存。导致结果是x_points数组并没有开辟有效的空间。后面给chart赋值的时候，就会内存越界。有时间了再详细研究一下LVGL的底层代码，看看能不能向官方反馈一下BUG。
具体代码如下：

```C
#define CHART_POINTS_NUM 256

struct {
    lv_obj_t * anim_obj;
    lv_obj_t * chart;
    lv_chart_series_t * ser1;
    lv_obj_t * p1_slider;
    lv_obj_t * p1_label;
    lv_obj_t * p2_slider;
    lv_obj_t * p2_label;
    lv_obj_t * run_btn;
    uint16_t p1;
    uint16_t p2;
    lv_anim_t a;
} ginfo;

static int32_t anim_path_bezier3_cb(const lv_anim_t * a);
static void refer_chart_cubic_bezier(void);
static void run_btn_event_handler(lv_event_t * e);
static void slider_event_cb(lv_event_t * e);
static void page_obj_init(lv_obj_t * par);
static void anim_x_cb(void * var, int32_t v);

/**
 * create an animation
 */
void lv_example_anim_3(void)
{
    static lv_coord_t col_dsc[] = {LV_GRID_FR(1), 400, LV_GRID_FR(1),LV_GRID_TEMPLATE_LAST};
    static lv_coord_t row_dsc[] = {50, 20, 20, LV_GRID_FR(1),LV_GRID_TEMPLATE_LAST};

/*Create a container with grid*/
    lv_obj_t * cont = lv_obj_create(lv_scr_act());
    lv_obj_set_style_pad_all(cont, 2, LV_PART_MAIN);
    lv_obj_set_style_pad_column(cont, 10, LV_PART_MAIN);
    lv_obj_set_style_pad_row(cont, 10, LV_PART_MAIN);
    lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);
    lv_obj_set_size(cont, LV_HOR_RES - 100, LV_VER_RES - 100);        //用百分比，后面调用get width会不对。读出的是设定的8192或百分比值
    lv_obj_center(cont);

page_obj_init(cont);

lv_anim_init(&ginfo.a);
    lv_anim_set_var(&ginfo.a, ginfo.anim_obj);
    int32_t end = lv_obj_get_style_width(cont, LV_PART_MAIN) -
        lv_obj_get_style_width(ginfo.anim_obj, LV_PART_MAIN) - 10;
    rt_kprintf("%d,%d,%d,%d\r\n",lv_obj_get_style_width(cont, LV_PART_MAIN),lv_obj_get_style_width(ginfo.anim_obj, LV_PART_MAIN)\
            , lv_obj_get_style_x(cont, LV_PART_MAIN), lv_obj_get_style_x(ginfo.anim_obj, LV_PART_MAIN));
    lv_anim_set_values(&ginfo.a, 5, end);
    lv_anim_set_time(&ginfo.a, 2000);
    lv_anim_set_exec_cb(&ginfo.a, anim_x_cb);
    lv_anim_set_path_cb(&ginfo.a, anim_path_bezier3_cb);

refer_chart_cubic_bezier();
}

static int32_t anim_path_bezier3_cb(const lv_anim_t * a)
{
    uint32_t t = lv_map(a->act_time, 0, a->time, 0, 1024);
    int32_t step = lv_bezier3(t, 0, ginfo.p1, ginfo.p2, 1024);
    int32_t new_value;
    new_value = step * (a->end_value - a->start_value);
    new_value = new_value >> 10;
    new_value += a->start_value;
    return new_value;
}

static void refer_chart_cubic_bezier(void)
{
    for(uint16_t i = 0; i <= CHART_POINTS_NUM; i ++) {
        uint32_t t = i * (1024 / CHART_POINTS_NUM);
        int32_t step = lv_bezier3(t, 0, ginfo.p1, ginfo.p2, 1024);
        lv_chart_set_value_by_id2(ginfo.chart, ginfo.ser1, i, t, step);
        rt_kprintf("x:%d, y:%d\t", t, step);
    }
    lv_chart_refresh(ginfo.chart);
}

static void anim_x_cb(void * var, int32_t v)
{
    lv_obj_set_style_translate_x(var, v, LV_PART_MAIN);
}

static void run_btn_event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_CLICKED) {
        lv_anim_start(&ginfo.a);
    }
}

static void slider_event_cb(lv_event_t * e)
{
    char buf[16];
    lv_obj_t * label;
    lv_obj_t * slider = lv_event_get_target(e);

if(slider == ginfo.p1_slider) {
        label = ginfo.p1_label;
        ginfo.p1 = lv_slider_get_value(slider);
        rt_sprintf(buf, "p1:%d", ginfo.p1);
    }
    else {
        label = ginfo.p2_label;
        ginfo.p2 = lv_slider_get_value(slider);
        rt_sprintf(buf, "p2:%d", ginfo.p2);
    }

lv_label_set_text(label, buf);
    refer_chart_cubic_bezier();
}

static void page_obj_init(lv_obj_t * par)
{
    ginfo.anim_obj = lv_obj_create(par);
    lv_obj_set_size(ginfo.anim_obj, 50, 50);
    lv_obj_set_align(ginfo.anim_obj, LV_ALIGN_TOP_LEFT);
    lv_obj_clear_flag(ginfo.anim_obj, LV_OBJ_FLAG_SCROLLABLE);
    lv_obj_set_style_bg_color(ginfo.anim_obj, lv_palette_main(LV_PALETTE_RED), LV_PART_MAIN);
    lv_obj_set_grid_cell(ginfo.anim_obj, LV_GRID_ALIGN_START, 0, 1,LV_GRID_ALIGN_START, 0, 1);

ginfo.p1_label = lv_label_create(par);
    ginfo.p2_label = lv_label_create(par);
    lv_label_set_text(ginfo.p1_label, "p1:0");
    lv_label_set_text(ginfo.p2_label, "p2:0");
    lv_obj_set_grid_cell(ginfo.p1_label, LV_GRID_ALIGN_START, 0, 1,LV_GRID_ALIGN_START, 1, 1);
    lv_obj_set_grid_cell(ginfo.p2_label, LV_GRID_ALIGN_START, 0, 1,LV_GRID_ALIGN_START, 2, 1);

ginfo.p1_slider = lv_slider_create(par);
    ginfo.p2_slider = lv_slider_create(par);
    lv_slider_set_range(ginfo.p1_slider, 0, 1024);
    lv_slider_set_range(ginfo.p2_slider, 0, 1024);
    lv_obj_set_style_pad_all(ginfo.p1_slider, 2, LV_PART_KNOB);
    lv_obj_set_style_pad_all(ginfo.p2_slider, 2, LV_PART_KNOB);
    lv_obj_add_event_cb(ginfo.p1_slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
    lv_obj_add_event_cb(ginfo.p2_slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
    lv_obj_set_grid_cell(ginfo.p1_slider, LV_GRID_ALIGN_STRETCH, 1, 1,LV_GRID_ALIGN_START, 1, 1);
    lv_obj_set_grid_cell(ginfo.p2_slider, LV_GRID_ALIGN_STRETCH, 1, 1,LV_GRID_ALIGN_START, 2, 1);

ginfo.run_btn = lv_btn_create(par);
    lv_obj_add_event_cb(ginfo.run_btn, run_btn_event_handler, LV_EVENT_CLICKED, NULL);
    lv_obj_t * btn_label = lv_label_create(ginfo.run_btn);
    lv_label_set_text(btn_label, LV_SYMBOL_PLAY);
    lv_obj_center(btn_label);
    lv_obj_set_grid_cell(ginfo.run_btn, LV_GRID_ALIGN_STRETCH, 2, 1,LV_GRID_ALIGN_STRETCH, 1, 2);      //Y方向占两格

ginfo.chart = lv_chart_create(par);
    lv_obj_set_style_pad_all(ginfo.chart, 0, LV_PART_MAIN);
    lv_obj_set_style_size(ginfo.chart, 0, LV_PART_INDICATOR);
    lv_chart_set_type(ginfo.chart, LV_CHART_TYPE_SCATTER);
    lv_chart_set_point_count(ginfo.chart, CHART_POINTS_NUM);
    ginfo.ser1 = lv_chart_add_series(ginfo.chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
    lv_chart_set_range(ginfo.chart, LV_CHART_AXIS_PRIMARY_Y, 0, 1024);
    lv_chart_set_range(ginfo.chart, LV_CHART_AXIS_PRIMARY_X, 0, 1024);
    lv_obj_set_grid_cell(ginfo.chart, LV_GRID_ALIGN_STRETCH, 0, 3,LV_GRID_ALIGN_STRETCH, 3, 1);     //x方向占3格
}
```

演示效果如下：
![anim3.png](https://oss-club.rt-thread.org/uploads/20220626/db4e4730c7bada0b1975f2e32811284c.png.webp "anim3.png")
至此，官方动画方面的三个例程也学习完了。本身倒是没多复杂，只是第三个例程找bug花了一些时间。任重道远，加油！

学习点：
- 1，anim的exec_cb和path_cb都可以定义成自己的动画效果。
- 2，grid布局器的使用。
- 3，chart绘图控件的使用。