LVGL（Light and Versatile Graphics Library）提供了强大的动画系统，使得开发者能够轻松地为界面元素添加动态效果。这一期讲解的控件是动画。
1.动画轨迹
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()：从结束值稍微反弹（像撞到墙一样）
2.速度与时间
默认情况下，你直接设置动画时间。但在某些情况下，设置动画速度更为实际。
lv_anim_speed_to_time(speed, start, end) 函数计算在给定速度下，从起始值到结束值所需的时间（以毫秒为单位）。 速度的单位是 单位/秒。例如，lv_anim_speed_to_time(20, 0, 100) 将返回 5000 毫秒。 例如，在 lv_obj_set_x() 的情况下，单位 是像素，所以 20 意味着 20 像素/秒 的速度。
3.删除动画
如果提供了被动画的变量及其动画器函数，可以使用 lv_anim_delete(var, func) 删除动画。
4.时间轴
时间轴是多个动画的集合，使得创建复杂的复合动画变得更加容易。
首先，创建一个动画元素，但不要调用 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, LV_ANIM_TIMELINE_PROGRESS_MAX)。
调用 lv_anim_timeline_stop(at) 停止动画时间轴。
调用 lv_anim_timeline_set_progress(at, progress) 函数来设置与时间轴进度对应的 Widget 状态。
调用 lv_anim_timeline_get_playtime(at) 函数来获取整个动画时间轴的总时长。
调用 lv_anim_timeline_get_reverse(at) 函数来获取是否反向播放动画时间轴。
调用 lv_anim_timeline_delete(at) 函数来删除动画时间轴。 注意：如果你需要在动画过程中删除 Widget，务必在删除 Widget 之前删除动画时间轴。否则，程序可能会崩溃或出现异常行为。
5.代码
/* 初始化动画
-----------------------/
lv_anim_t a;
lv_anim_init(&a);
/* 必要设置
------------------/
/* 设置"动画器"函数 */
lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t) lv_obj_set_x);
/* 设置动画的目标 */
lv_anim_set_var(&a, widget);
/* 动画的持续时间 [ms] */
lv_anim_set_duration(&a, duration);
/* 设置起始值和结束值。例如 0, 150 */
lv_anim_set_values(&a, start, end);
/* 可选设置
------------------/
/* 动画开始前的等待时间 [ms] */
lv_anim_set_delay(&a, delay);
/* 设置路径（曲线）。默认是线性 */
lv_anim_set_path_cb(&a, lv_anim_path_ease_in);
/* 设置回调函数，指示动画何时完成。 */
lv_anim_set_completed_cb(&a, completed_cb);
/* 设置回调函数，指示动画何时被删除（空闲）。 */
lv_anim_set_deleted_cb(&a, deleted_cb);
/* 设置回调函数，指示动画何时开始（延迟后）。 */
lv_anim_set_start_cb(&a, start_cb);
/* 动画准备好后，以此时长反向播放动画。默认值为 0（禁用）[ms] */
lv_anim_set_playback_duration(&a, time);
/* 播放前的延迟。默认值为 0（禁用）[ms] */
lv_anim_set_playback_delay(&a, delay);
/* 重复次数。默认值为 1。LV_ANIM_REPEAT_INFINITE 表示无限重复 */
lv_anim_set_repeat_count(&a, cnt);
/* 重复前的延迟。默认值为 0（禁用）[ms] */
lv_anim_set_repeat_delay(&a, delay);
/* true（默认）：立即应用起始值，false：在延迟后应用起始值，动画真正开始时。 */
lv_anim_set_early_apply(&a, true/false);
/* 启动动画
------------------ /
lv_anim_start(&a); /* 启动动画 */
你可以在同一个变量上同时应用多个不同的动画。例如，使用 lv_obj_set_x() 和 lv_obj_set_y() 来分别动画化 x 和 y 坐标。然而，给定的变量和函数对只能存在一个动画，且 lv_anim_start() 会删除该对已有的任何动画。
本文章由威三学社出品
对课程感兴趣可以私信联系