LVGL 动画 Animations

A-code

于 2024-05-22 14:21:11 发布

阅读量390

点赞数 4

文章标签： ui

本文链接：https://blog.csdn.net/m0_50993351/article/details/139114144

版权

您可以使用动画在开始值和结束值之间自动更改变量的值。动画将通过使用相应的 value 参数定期调用 “animator” 函数来发生。

animator 函数具有以下原型：

void func(void * var, lv_anim_var_t value);

简而言之，animator 函数就是自定义动画执行动作的函数。

Create an Animation（创建动画）

要创建动画，必须使用 lv_anim_set_...() 函数初始化和配置 lv_anim_t 变量。


/* 初始化动画
 *-----------------------*/

lv_anim_t a；
lv_anim_init(&a)；

/* 强制设置
 *------------------*/

/*设置 "animator "函数*/
lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t) lv_obj_set_x)； 

/*设置 "动画 "函数*/
lv_anim_set_var(&a, obj)； 

/*动画长度[ms]*/
lv_anim_set_time(&a, duration)；

/* 设置开始和结束值。例如 0, 150*/
lv_anim_set_values(&a, start, end)；

/* 可选设置
 *------------------*/

/*启动动画前的等待时间 [ms]*/
lv_anim_set_delay(&a, delay)；

/* 设置路径（曲线）。默认为线性*/
lv_anim_set_path(&a, lv_anim_path_ease_in)；

/*设置动画就绪时调用的回调*/
lv_anim_set_ready_cb(&a, ready_cb)；

/* 设置动画开始时（延迟后）的回调。
lv_anim_set_start_cb(&a, start_cb)；

/*在此持续时间内也向后播放动画。默认值为 0（禁用）[ms]*/
lv_anim_set_playback_time(&a, wait_time)； 

/*播放前的延迟。默认为 0（禁用）[ms]*/
lv_anim_set_playback_delay(&a, wait_time)；

/*重复播放次数。LV_ANIM_REPEAT_INFINIT 用于无限重复*/ LV_ANIM_REPEAT_INFINIT 用于无限重复*/ LV_ANIM_REPEAT_INFINIT 用于无限重复。
lv_anim_set_repeat_count(&a, wait_time)；

/* 重复前的延迟。默认为 0（禁用）[ms]*/
lv_anim_set_repeat_delay(&a, wait_time)；

/*true（默认）：立即应用起始值，false：延迟后应用起始值，此时动画才真正开始。*/
lv_anim_set_early_apply(&a, true/false)；

/* 启动动画
 *------------------*/
lv_anim_start(&a); /*启动动画*/

Animation path（动画轨迹）

您可以确定动画的路径。最简单的情况是线性的，这意味着 start 和 end 之间的当前值以固定步长变化。 path 是一个函数，它根据动画的当前状态计算要设置的下一个值。目前，有以下内置路径函数：

lv_anim_path_linear 线性动画
lv_anim_path_step最后一步改变
lv_anim_path_ease_in 开始时很慢
lv_anim_path_ease_out 最后慢
lv_anim_path_ease_in_out 开始和结束都很慢
lv_anim_path_overshoot 超过结束值
lv_anim_path_bounce 从最终值反弹一点（比如撞墙）

Speed vs time（速度与时间）

lv_anim_speed_to_time(speed, start, end) 函数计算从给定速度的起始值到达结束值所需的时间（以毫秒为单位）。速度以 unit/sec 维度解释。例如，lv_anim_speed_to_time(20,0,100) 将产生 5000 毫秒。例如，在 lv_obj_set_x 的情况下 unit 是像素，所以 20 意味着 20 px/sec 速度。

Delete animations（删除动画）

如果您提供动画变量及其动画器函数，您可以使用 lv_anim_del(var, func) 删除动画。

Timeline（时间线）

时间线是多个动画的集合，可以轻松创建复杂的复合动画。

首先，创建动画元素，但不要调用lv_anim_start()。

其次，通过调用lv_anim_timeline_create()创建一个动画时间线对象。

第三，通过调用lv_anim_timeline_add(at, start_time, &a)将动画元素添加到动画时间线。 start_time 是时间线上动画的开始时间。请注意，start_time 将覆盖 delay 的值。

最后，调用lv_anim_timeline_start(at)启动动画时间线。

它支持整个动画组的向前和向后播放，使用lv_anim_timeline_set_reverse(at, reverse)。

调用lv_anim_timeline_set_progress(at,progress)函数设置时间线进度对应的对象状态。

调用lv_anim_timeline_get_playtime(at)函数获取整个动画时间线的总时长。

调用lv_anim_timeline_get_reverse(at)函数获取是否反转动画时间线。

调用lv_anim_timeline_del(at)函数删除动画时间线。

示例代码1： Grid布局 + Animation动画

/*
 * LVGL Grid 布局 + 动画
 *
 * 
 * */
static void row_gap_anim(void * obj, int32_t v)
{
    lv_obj_set_style_pad_row(obj, v, 0);
}

static void column_gap_anim(void * obj, int32_t v)
{
    lv_obj_set_style_pad_column(obj, v, 0);
}

/**
 * Demonstrate column and row gap
 */
void lv_example_grid_5(lv_obj_t *parent)
{

    /*60x60 cells*/
    static lv_coord_t col_dsc[] = {60, 60, 60, LV_GRID_TEMPLATE_LAST};
    static lv_coord_t row_dsc[] = {45, 45, 45, LV_GRID_TEMPLATE_LAST};

    /*Create a container with grid*/
	//创建一个对象
    lv_obj_t * cont = lv_obj_create(parent);
	//设置大小
    lv_obj_set_size(cont, 300, 220);
    //放置在中央位置
	lv_obj_center(cont);
	//设置为Grid布局
    lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);

    lv_obj_t * label;
    lv_obj_t * obj;
    uint32_t i;
    for(i = 0; i < 9; i++) {
        uint8_t col = i % 3;
        uint8_t row = i / 3;
		//创建一个对象
        obj = lv_obj_create(cont);
		//设置对象的单元格。对象的父对象必须具有网格布局，否则不会发生任何情况
        lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,
                             LV_GRID_ALIGN_STRETCH, row, 1);
		//创建一个label
        label = lv_label_create(obj);
		//格式化设置文本内容
        lv_label_set_text_fmt(label, "%d,%d", col, row);
		//放置在父类位置的中心
        lv_obj_center(label);
    }
	//定义一个anim变量
    lv_anim_t a;
	//初始化动画 a
    lv_anim_init(&a);
	//给动画 a 设置具体变量
    lv_anim_set_var(&a, cont);
	//设置动画的值从0——10
    lv_anim_set_values(&a, 0, 10);
    //设置动画循环次数 （一直循环）
	lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
	//为 var 设置额外的动画函数
    lv_anim_set_exec_cb(&a, row_gap_anim);
	//设置动画持续时间
    lv_anim_set_durtion(&a, 500);
    //当前进方向准备就绪时，制作回放动画
	lv_anim_set_playback_durtion(&a, 500);
    //开始动画
	lv_anim_start(&a);
	//为 var 设置额外的动画函数
    lv_anim_set_exec_cb(&a, column_gap_anim);
	//设置动画的值从0——10	
	lv_anim_set_values(&a, 0, 10);
	//设置动画持续时间
    lv_anim_set_duration(&a, 3000);
    //当前进方向准备就绪时，制作回放动画
	lv_anim_set_playback_duration(&a, 3000);
	//开始动画
    lv_anim_start(&a);
}

实现效果：矩阵按钮的间距不断变化（0~10）像素

时间线动画实例代码：


static lv_anim_timeline_t * anim_timeline = NULL;

static lv_obj_t * obj1 = NULL;
static lv_obj_t * obj2 = NULL;
static lv_obj_t * obj3 = NULL;

static const lv_coord_t obj_width = 90;
static const lv_coord_t obj_height = 70;

static void set_width(void * var, int32_t v)
{
    lv_obj_set_width((lv_obj_t *)var, v);
}

static void set_height(void * var, int32_t v)
{
    lv_obj_set_height((lv_obj_t *)var, v);
}

static void anim_timeline_create(void)
{
    /* obj1 */
    lv_anim_t a1;
	//动画初始化
    lv_anim_init(&a1);										
	//给动画设置变量
    lv_anim_set_var(&a1, obj1);									
	//设置动画的开始和结束值
    lv_anim_set_values(&a1, 0, obj_width);
/*	设置动画是否应立即应用，或仅在延迟结束时应用。
	参数：
	a - 初始化 lv_anim_t 变量的指针
	en - true：立即应用 lv_anim_start 中的起始值；false：仅在延迟毫秒后才应用起始值，动画才真正开始*/
    lv_anim_set_early_apply(&a1, false);
	//为 var 设置动画函数
    lv_anim_set_exec_cb(&a1, (lv_anim_exec_xcb_t)set_width);
	//为 var 设置轨迹动画函数
    lv_anim_set_path_cb(&a1, lv_anim_path_overshoot);
	//设置动画时间
    lv_anim_set_time(&a1, 300);

    lv_anim_t a2;
    lv_anim_init(&a2);
    lv_anim_set_var(&a2, obj1);
    lv_anim_set_values(&a2, 0, obj_height);
    lv_anim_set_early_apply(&a2, false);
    lv_anim_set_exec_cb(&a2, (lv_anim_exec_xcb_t)set_height);
    lv_anim_set_path_cb(&a2, lv_anim_path_ease_out);
    lv_anim_set_time(&a2, 300);

    /* obj2 */
    lv_anim_t a3;
    lv_anim_init(&a3);
    lv_anim_set_var(&a3, obj2);
    lv_anim_set_values(&a3, 0, obj_width);
    lv_anim_set_early_apply(&a3, false);
    lv_anim_set_exec_cb(&a3, (lv_anim_exec_xcb_t)set_width);
    lv_anim_set_path_cb(&a3, lv_anim_path_overshoot);
    lv_anim_set_time(&a3, 300);

    lv_anim_t a4;
    lv_anim_init(&a4);
    lv_anim_set_var(&a4, obj2);
    lv_anim_set_values(&a4, 0, obj_height);
    lv_anim_set_early_apply(&a4, false);
    lv_anim_set_exec_cb(&a4, (lv_anim_exec_xcb_t)set_height);
    lv_anim_set_path_cb(&a4, lv_anim_path_ease_out);
    lv_anim_set_time(&a4, 300);

    /* obj3 */
    lv_anim_t a5;
    lv_anim_init(&a5);
    lv_anim_set_var(&a5, obj3);
    lv_anim_set_values(&a5, 0, obj_width);
    lv_anim_set_early_apply(&a5, false);
    lv_anim_set_exec_cb(&a5, (lv_anim_exec_xcb_t)set_width);
    lv_anim_set_path_cb(&a5, lv_anim_path_overshoot);
    lv_anim_set_time(&a5, 300);

    lv_anim_t a6;
    lv_anim_init(&a6);
    lv_anim_set_var(&a6, obj3);
    lv_anim_set_values(&a6, 0, obj_height);
    lv_anim_set_early_apply(&a6, false);
    lv_anim_set_exec_cb(&a6, (lv_anim_exec_xcb_t)set_height);
    lv_anim_set_path_cb(&a6, lv_anim_path_ease_out);
    lv_anim_set_time(&a6, 300);

    /* Create anim timeline 创建时间线动画 */
    anim_timeline = lv_anim_timeline_create();
    lv_anim_timeline_add(anim_timeline, 0, &a1);
    lv_anim_timeline_add(anim_timeline, 0, &a2);
    lv_anim_timeline_add(anim_timeline, 200, &a3);
    lv_anim_timeline_add(anim_timeline, 200, &a4);
    lv_anim_timeline_add(anim_timeline, 400, &a5);
    lv_anim_timeline_add(anim_timeline, 400, &a6);
}

static void btn_start_event_handler(lv_event_t * e)
{
    lv_obj_t * btn = lv_event_get_target(e);

    if (!anim_timeline) {
        anim_timeline_create();
    }

    bool reverse = lv_obj_has_state(btn, LV_STATE_CHECKED);
	/*设置动画时间线的播放方向。
	参数：
	at - 动画时间线指针。
	reverse - 是否反向播放。*/
    lv_anim_timeline_set_reverse(anim_timeline, reverse);
    lv_anim_timeline_start(anim_timeline);
}

static void btn_del_event_handler(lv_event_t * e)
{
    LV_UNUSED(e);
    if (anim_timeline) {
        lv_anim_timeline_del(anim_timeline);
        anim_timeline = NULL;
    }
}

static void btn_stop_event_handler(lv_event_t * e)
{
    LV_UNUSED(e);
    if (anim_timeline) {
        lv_anim_timeline_stop(anim_timeline);
    }
}

static void slider_prg_event_handler(lv_event_t * e)
{
	//获取事件最初的目标对象。即使事件是冒泡的，也是一样。
    lv_obj_t * slider = lv_event_get_target(e);

    if (!anim_timeline) {
        anim_timeline_create(); //时间线的创建
    }
	//获取滑动条的值
    int32_t progress = lv_slider_get_value(slider);
	//设置动画时间线的进度
    lv_anim_timeline_set_progress(anim_timeline, progress);
}

/**
 * Create an animation timeline
 */
void lv_example_anim_timeline_1(lv_obj_t *parent)
{
	lv_obj_set_size(parent, 480, 480); // 设置对象宽度和高度
    lv_obj_center(parent); // 设置对象居屏幕中间显示
    lv_obj_t * par = parent;
    lv_obj_set_flex_flow(par, LV_FLEX_FLOW_ROW);	//弹性布局
    lv_obj_set_flex_align(par, LV_FLEX_ALIGN_SPACE_AROUND, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
	
    /* create btn_start */
    lv_obj_t * btn_start = lv_btn_create(par);
	//为start按钮添加事件回调函数，当值发生改变时
    lv_obj_add_event_cb(btn_start, btn_start_event_handler, LV_EVENT_VALUE_CHANGED, NULL);
    lv_obj_add_flag(btn_start, LV_OBJ_FLAG_IGNORE_LAYOUT);//使对象可通过布局定位
    lv_obj_add_flag(btn_start, LV_OBJ_FLAG_CHECKABLE);//对象被点击时切换选中状态
    lv_obj_align(btn_start, LV_ALIGN_TOP_MID, -100, 20);//按钮对象对齐 上端中间 往x轴上偏移100像素方向相反，往y轴偏移20个像素

    lv_obj_t * label_start = lv_label_create(btn_start);
    lv_label_set_text(label_start, "Start");
    lv_obj_center(label_start);

    /* create btn_del */
    lv_obj_t * btn_del = lv_btn_create(par);
	//添加事件回调函数
    lv_obj_add_event_cb(btn_del, btn_del_event_handler, LV_EVENT_CLICKED, NULL);
    lv_obj_add_flag(btn_del, LV_OBJ_FLAG_IGNORE_LAYOUT);//使对象可通过布局定位
    lv_obj_align(btn_del, LV_ALIGN_TOP_MID, 0, 20);		//按钮对象对齐 上端中间 往y轴偏移20个像素

    lv_obj_t * label_del = lv_label_create(btn_del);
    lv_label_set_text(label_del, "Delete");
    lv_obj_center(label_del);

    /* create btn_stop */
    lv_obj_t * btn_stop = lv_btn_create(par);
    lv_obj_add_event_cb(btn_stop, btn_stop_event_handler, LV_EVENT_CLICKED, NULL);
    lv_obj_add_flag(btn_stop, LV_OBJ_FLAG_IGNORE_LAYOUT);//使对象可通过布局定位
    lv_obj_align(btn_stop, LV_ALIGN_TOP_MID, 100, 20);

    lv_obj_t * label_stop = lv_label_create(btn_stop);
    lv_label_set_text(label_stop, "Stop");
    lv_obj_center(label_stop);

    /* create slider_prg */
    lv_obj_t * slider_prg = lv_slider_create(par);
	//为滑动条添加回调函数，当它的值被改变时触发
    lv_obj_add_event_cb(slider_prg, slider_prg_event_handler, LV_EVENT_VALUE_CHANGED, NULL);
    lv_obj_add_flag(slider_prg, LV_OBJ_FLAG_IGNORE_LAYOUT);//使对象可通过布局定位
    lv_obj_align(slider_prg, LV_ALIGN_BOTTOM_MID, 0, -20);	//对齐位置
    lv_slider_set_range(slider_prg, 0, 65535);				//设置滑动条的最大最小值

    /* create 3 objects  创建三个空对象*/
    obj1 = lv_obj_create(par);
    lv_obj_set_size(obj1, obj_width, obj_height);

    obj2 = lv_obj_create(par);
    lv_obj_set_size(obj2, obj_width, obj_height);

    obj3 = lv_obj_create(par);
    lv_obj_set_size(obj3, obj_width, obj_height);
}