Skip to content

Latest commit

 

History

History
executable file
·
358 lines (223 loc) · 11 KB

animations.rst

File metadata and controls

executable file
·
358 lines (223 loc) · 11 KB

Animations(动画)

显示原文

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)

Create an animation(创建动画)

显示原文

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 会移除任何给定变量和函数对的现有动画。

Animation path(动画轨迹)

显示原文

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:

  • :cpplv_anim_path_linear: linear animation
  • :cpplv_anim_path_step: change in one step at the end
  • :cpplv_anim_path_ease_in: slow at the beginning
  • :cpplv_anim_path_ease_out: slow at the end
  • :cpplv_anim_path_ease_in_out: slow at the beginning and end
  • :cpplv_anim_path_overshoot: overshoot the end value
  • :cpplv_anim_path_bounce: bounce back a little from the end value (like hitting a wall)

你可以控制动画的路径。最简单的情况是线性的,意味着在 startend 之间的当前值会以固定步长改变。 path 是一个函数,根据动画的当前状态 计算下一个要设置的值。当前内置的路径函数有以下几种:

  • :cpplv_anim_path_linear: 线性动画
  • :cpplv_anim_path_step: 在最后一步时进行变化
  • :cpplv_anim_path_ease_in: 开始时较慢
  • :cpplv_anim_path_ease_out: 结束时较慢
  • :cpplv_anim_path_ease_in_out: 开始和结束时较慢
  • :cpplv_anim_path_overshoot: 超过结束值
  • :cpplv_anim_path_bounce: 从结束值弹回一点(比如撞到墙壁)

Speed vs time(速度与时间)

显示原文

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 像素/秒 的速度。

Delete animations(删除动画)

显示原文

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) 删除动画。

Timeline(时间线)

显示原文

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) 函数来删除动画时间轴。 注意: 如果在动画过程中需要删除对象,请确保在删除对象之前删除动画时间轴。否则,程序可能崩溃或表现异常。

image

Examples

API