显示原文
You can automatically change the value of a variable between a start and an end value using animations. Animation will happen by periodically calling an "animator" function with the corresponding value parameter.
The animator functions have the following prototype:
您可以使用动画自动更改变量的值,该值在开始值和结束值之间变化。动画将通过定期调用具有相应值参数的“animator”函数来完成。
animator 函数具有以下原型:
void func(void * var, lv_anim_var_t value);
显示原文
This prototype is compatible with the majority of the property set functions in LVGL. For example :cpplv_obj_set_x(obj, value)
or :cpplv_obj_set_width(obj, value)
该原型与LVGL中的大多数属性 set 函数兼容。例如 :cpplv_obj_set_x(obj, value)
or :cpplv_obj_set_width(obj, value)
显示原文
To create an animation an :cpplv_anim_t
variable has to be initialized and configured with lv_anim_set_...()
functions.
要创建动画,必须初始化一个 :cpplv_anim_t
变量,并使用 lv_anim_set_()
函数进行配置。
/* INITIALIZE AN ANIMATION
*-----------------------*/
lv_anim_t a;
lv_anim_init(&a);
/* MANDATORY SETTINGS
*------------------*/
/*Set the "animator" function*/
lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t) lv_obj_set_x);
/*Set target of the animation*/
lv_anim_set_var(&a, obj);
/*Length of the animation [ms]*/
lv_anim_set_duration(&a, duration);
/*Set start and end values. E.g. 0, 150*/
lv_anim_set_values(&a, start, end);
/* OPTIONAL SETTINGS
*------------------*/
/*Time to wait before starting the animation [ms]*/
lv_anim_set_delay(&a, delay);
/*Set path (curve). Default is linear*/
lv_anim_set_path_cb(&a, lv_anim_path_ease_in);
/*Set a callback to indicate when the animation is completed.*/
lv_anim_set_completed_cb(&a, completed_cb);
/*Set a callback to indicate when the animation is deleted (idle).*/
lv_anim_set_deleted_cb(&a, deleted_cb);
/*Set a callback to indicate when the animation is started (after delay).*/
lv_anim_set_start_cb(&a, start_cb);
/*When ready, play the animation backward with this duration. Default is 0 (disabled) [ms]*/
lv_anim_set_playback_duration(&a, time);
/*Delay before playback. Default is 0 (disabled) [ms]*/
lv_anim_set_playback_delay(&a, delay);
/*Number of repetitions. Default is 1. LV_ANIM_REPEAT_INFINITE for infinite repetition*/
lv_anim_set_repeat_count(&a, cnt);
/*Delay before repeat. Default is 0 (disabled) [ms]*/
lv_anim_set_repeat_delay(&a, delay);
/*true (default): apply the start value immediately, false: apply start value after delay when the anim. really starts. */
lv_anim_set_early_apply(&a, true/false);
/* START THE ANIMATION
*------------------*/
lv_anim_start(&a); /*Start the animation*/
显示原文
You can apply multiple different animations on the same variable at the same time. For example, animate the x and y coordinates with :cpplv_obj_set_x
and :cpplv_obj_set_y
. However, only one animation can exist with a given variable and function pair and :cpplv_anim_start
will remove any existing animations for such a pair.
你可以同时对同一个变量应用多种不同的动画。例如,使用 :cpplv_obj_set_x
和 :cpplv_obj_set_y
来同时设置 x 和 y 坐标的动画。然而,同一个变量和函数对只能存在一个动画,:cpplv_anim_start
会移除任何给定变量和函数对的现有动画。
显示原文
You can control the path of an animation. The most simple case is linear, meaning the current value between start and end is changed with fixed steps. A path is a function which calculates the next value to set based on the current state of the animation. Currently, there are the following built-in path functions:
- :cpp
lv_anim_path_linear
: linear animation - :cpp
lv_anim_path_step
: change in one step at the end - :cpp
lv_anim_path_ease_in
: slow at the beginning - :cpp
lv_anim_path_ease_out
: slow at the end - :cpp
lv_anim_path_ease_in_out
: slow at the beginning and end - :cpp
lv_anim_path_overshoot
: overshoot the end value - :cpp
lv_anim_path_bounce
: bounce back a little from the end value (like hitting a wall)
你可以控制动画的路径。最简单的情况是线性的,意味着在 start 和 end 之间的当前值会以固定步长改变。 path 是一个函数,根据动画的当前状态 计算下一个要设置的值。当前内置的路径函数有以下几种:
- :cpp
lv_anim_path_linear
: 线性动画 - :cpp
lv_anim_path_step
: 在最后一步时进行变化 - :cpp
lv_anim_path_ease_in
: 开始时较慢 - :cpp
lv_anim_path_ease_out
: 结束时较慢 - :cpp
lv_anim_path_ease_in_out
: 开始和结束时较慢 - :cpp
lv_anim_path_overshoot
: 超过结束值 - :cpp
lv_anim_path_bounce
: 从结束值弹回一点(比如撞到墙壁)
显示原文
By default, you set the animation time directly. But in some cases, setting the animation speed is more practical.
The :cpplv_anim_speed_to_time(speed, start, end)
function calculates the required time in milliseconds to reach the end value from a start value with the given speed. The speed is interpreted in unit/sec dimension. For example, :cpplv_anim_speed_to_time(20, 0, 100)
will yield 5000 milliseconds. For example, in the case of :cpplv_obj_set_x
unit is pixels so 20 means 20 px/sec speed.
默认情况下,您直接设置了动画时间。但在某些情况下,设置动画速度更实用。
:cpplv_anim_speed_to_time(speed, start, end)
函数计算以给定 速度从起始值达到终止值所需的时间(以毫秒为单位)。速度的单位是 单位/秒 。 例如,:cpplv_anim_speed_to_time(20, 0, 100)
将得到5000毫秒。 例如,在 :cpplv_obj_set_x
的情况下, 单位 是像素,所以 20 表示 20 像素/秒 的速度。
显示原文
You can delete an animation with :cpplv_anim_delete(var, func)
if you provide the animated variable and its animator function.
如果您提供动画变量及其动画器函数,您可以使用 :cpplv_anim_delete(var, func)
删除动画。
显示原文
A timeline is a collection of multiple animations which makes it easy to create complex composite animations.
Firstly, create an animation element but don't call :cpplv_anim_start
.
Secondly, create an animation timeline object by calling :cpplv_anim_timeline_create
.
Thirdly, add animation elements to the animation timeline by calling :cpplv_anim_timeline_add(at, start_time, &a)
. start_time
is the start time of the animation on the timeline. Note that start_time
will override the value of delay
.
Finally, call :cpplv_anim_timeline_start(at)
to start the animation timeline.
时间线是多个动画的集合,使得创建复杂的复合动画变得容易。
首先,创建一个动画元素,但不要调用 :cpplv_anim_start
。
其次,通过调用 :cpplv_anim_timeline_create
创建一个动画时间线对象。
第三,通过调用 :cpplv_anim_timeline_add(at, start_time, &a)
.将动画元素添加到动画时间线中。 start_time
是动画在时间线上的开始时间。请注意, start_time
将覆盖 delay
的值。
最后,调用 :cpplv_anim_timeline_start(at)
来启动动画时间线。
显示原文
It supports forward and backward playback of the entire animation group, using :cpplv_anim_timeline_set_reverse(at, reverse)
. Note that if you want to play in reverse from the end of the timeline, you need to call :cpplv_anim_timeline_set_progress(at, LV_ANIM_TIMELINE_PROGRESS_MAX)
after adding all animations and before starting to play.
Call :cpplv_anim_timeline_stop(at)
to stop the animation timeline.
Call :cpplv_anim_timeline_set_progress(at, progress)
function to set the state of the object corresponding to the progress of the timeline.
Call :cpplv_anim_timeline_get_playtime(at)
function to get the total duration of the entire animation timeline.
Call :cpplv_anim_timeline_get_reverse(at)
function to get whether to reverse the animation timeline.
Call :cpplv_anim_timeline_delete(at)
function to delete the animation timeline. Note: If you need to delete an object during animation, be sure to delete the anim timeline before deleting the object. Otherwise, the program may crash or behave abnormally.
它支持整个动画组的正向和反向播放,使用 :cpplv_anim_timeline_set_reverse(at, reverse)
。 请注意,如果要从时间轴的末尾开始倒播,需要在添加所有动画之后、开始播放之前调用 :cpplv_anim_timeline_set_progress(at, LV_ANIM_TIMELINE_PROGRESS_MAX)
。
调用 :cpplv_anim_timeline_stop(at)
来停止动画时间轴播放。
调用 :cpplv_anim_timeline_set_progress(at, progress)
函数来设置与时间轴进度对应的对象的状态。
调用 :cpplv_anim_timeline_get_playtime(at)
函数来获取整个动画时间轴的总持续时间。
调用 :cpplv_anim_timeline_get_reverse(at)
函数来获取是否倒播动画时间轴。
调用 :cpplv_anim_timeline_delete(at)
函数来删除动画时间轴。 注意: 如果在动画过程中需要删除对象,请确保在删除对象之前删除动画时间轴。否则,程序可能崩溃或表现异常。