「App:Library:LVGL:docs:Overview:Animations」の版間の差分
13行目: | 13行目: | ||
void func(void * var, lv_anim_var_t value); | void func(void * var, lv_anim_var_t value); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | This prototype is compatible with the majority of the property ''set'' functions in LVGL. For example <code>lv_obj_set_x(obj, value)</code> or <code>lv_obj_set_width(obj, value)</code> | + | This prototype is compatible with the majority of the property ''set'' functions in LVGL. For example <code style="color: #bb0000;">lv_obj_set_x(obj, value)</code> or <code style="color: #bb0000;">lv_obj_set_width(obj, value)</code> |
| | | | ||
|} | |} | ||
25行目: | 25行目: | ||
|- | |- | ||
| | | | ||
− | To create an animation an <code>lv_anim_t</code> variable has to be initialized and configured with <code>lv_anim_set_...()</code> functions. | + | To create an animation an <code style="color: #bb0000;">lv_anim_t</code> variable has to be initialized and configured with <code style="color: #bb0000;">lv_anim_set_...()</code> functions. |
<syntaxhighlight lang="C++" style="border:1px dashed gray;"> | <syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
/* INITIALIZE AN ANIMATION | /* INITIALIZE AN ANIMATION | ||
82行目: | 82行目: | ||
lv_anim_start(&a); /*Start the animation*/ | lv_anim_start(&a); /*Start the animation*/ | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | You can apply multiple different animations on the same variable at the same time. For example, animate the x and y coordinates with <code>lv_obj_set_x</code> and <code>lv_obj_set_y</code>. However, only one animation can exist with a given variable and function pair and <code>lv_anim_start()</code> will remove any existing animations for such a pair. | + | You can apply multiple different animations on the same variable at the same time. For example, animate the x and y coordinates with <code style="color: #bb0000;">lv_obj_set_x</code> and <code style="color: #bb0000;">lv_obj_set_y</code>. However, only one animation can exist with a given variable and function pair and <code style="color: #bb0000;">lv_anim_start()</code> will remove any existing animations for such a pair. |
| | | | ||
|} | |} | ||
96行目: | 96行目: | ||
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: | 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: | ||
− | * <code>lv_anim_path_linear</code> linear animation | + | * <code style="color: #bb0000;">lv_anim_path_linear</code> linear animation |
− | * <code>lv_anim_path_step</code> change in one step at the end | + | * <code style="color: #bb0000;">lv_anim_path_step</code> change in one step at the end |
− | * <code>lv_anim_path_ease_in</code> slow at the beginning | + | * <code style="color: #bb0000;">lv_anim_path_ease_in</code> slow at the beginning |
− | * <code>lv_anim_path_ease_out</code> slow at the end | + | * <code style="color: #bb0000;">lv_anim_path_ease_out</code> slow at the end |
− | * <code>lv_anim_path_ease_in_out</code> slow at the beginning and end | + | * <code style="color: #bb0000;">lv_anim_path_ease_in_out</code> slow at the beginning and end |
− | * <code>lv_anim_path_overshoot</code> overshoot the end value | + | * <code style="color: #bb0000;">lv_anim_path_overshoot</code> overshoot the end value |
− | * <code>lv_anim_path_bounce</code> bounce back a little from the end value (like hitting a wall) | + | * <code style="color: #bb0000;">lv_anim_path_bounce</code> bounce back a little from the end value (like hitting a wall) |
| | | | ||
|} | |} | ||
116行目: | 116行目: | ||
By default, you set the animation time directly. But in some cases, setting the animation speed is more practical. | By default, you set the animation time directly. But in some cases, setting the animation speed is more practical. | ||
− | The <code>lv_anim_speed_to_time(speed, start, end)</code> 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, <code>lv_anim_speed_to_time(20,0,100)</code> will yield 5000 milliseconds. For example, in the case of <code>lv_obj_set_x</code> ''unit'' is pixels so ''20'' means ''20 px/sec'' speed. | + | The <code style="color: #bb0000;">lv_anim_speed_to_time(speed, start, end)</code> 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, <code style="color: #bb0000;">lv_anim_speed_to_time(20,0,100)</code> will yield 5000 milliseconds. For example, in the case of <code style="color: #bb0000;">lv_obj_set_x</code> ''unit'' is pixels so ''20'' means ''20 px/sec'' speed. |
| | | | ||
|} | |} | ||
128行目: | 128行目: | ||
|- | |- | ||
| | | | ||
− | You can delete an animation with <code>lv_anim_del(var, func)</code> if you provide the animated variable and its animator function. | + | You can delete an animation with <code style="color: #bb0000;">lv_anim_del(var, func)</code> if you provide the animated variable and its animator function. |
| | | | ||
|} | |} | ||
142行目: | 142行目: | ||
A timeline is a collection of multiple animations which makes it easy to create complex composite animations. | 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 <code>lv_anim_start()</code>. | + | Firstly, create an animation element but don’t call <code style="color: #bb0000;">lv_anim_start()</code>. |
− | Secondly, create an animation timeline object by calling <code>lv_anim_timeline_create()</code>. | + | Secondly, create an animation timeline object by calling <code style="color: #bb0000;">lv_anim_timeline_create()</code>. |
− | Thirdly, add animation elements to the animation timeline by calling <code>lv_anim_timeline_add(at, start_time, &a)</code>. <code>start_time</code> is the start time of the animation on the timeline. Note that <code>start_time</code> will override the value of <code>delay</code>. | + | Thirdly, add animation elements to the animation timeline by calling <code style="color: #bb0000;">lv_anim_timeline_add(at, start_time, &a)</code>. <code style="color: #bb0000;">start_time</code> is the start time of the animation on the timeline. Note that <code style="color: #bb0000;">start_time</code> will override the value of <code style="color: #bb0000;">delay</code>. |
− | Finally, call <code>lv_anim_timeline_start(at)</code> to start the animation timeline. | + | Finally, call <code style="color: #bb0000;">lv_anim_timeline_start(at)</code> to start the animation timeline. |
− | It supports forward and backward playback of the entire animation group, using <code>lv_anim_timeline_set_reverse(at, reverse)</code>. | + | It supports forward and backward playback of the entire animation group, using <code style="color: #bb0000;">lv_anim_timeline_set_reverse(at, reverse)</code>. |
− | Call <code>lv_anim_timeline_stop(at)</code> to stop the animation timeline. | + | Call <code style="color: #bb0000;">lv_anim_timeline_stop(at)</code> to stop the animation timeline. |
− | Call <code>lv_anim_timeline_set_progress(at, progress)</code> function to set the state of the object corresponding to the progress of the timeline. | + | Call <code style="color: #bb0000;">lv_anim_timeline_set_progress(at, progress)</code> function to set the state of the object corresponding to the progress of the timeline. |
− | Call <code>lv_anim_timeline_get_playtime(at)</code> function to get the total duration of the entire animation timeline. | + | Call <code style="color: #bb0000;">lv_anim_timeline_get_playtime(at)</code> function to get the total duration of the entire animation timeline. |
− | Call <code>lv_anim_timeline_get_reverse(at)</code> function to get whether to reverse the animation timeline. | + | Call <code style="color: #bb0000;">lv_anim_timeline_get_reverse(at)</code> function to get whether to reverse the animation timeline. |
− | Call <code>lv_anim_timeline_del(at)</code> function to delete the animation timeline. | + | Call <code style="color: #bb0000;">lv_anim_timeline_del(at)</code> function to delete the animation timeline. |
[[file:LVGL docs overview animation 01.png|400px|link=https://docs.lvgl.io/8.2/overview/animation.html#timeline]] | [[file:LVGL docs overview animation 01.png|400px|link=https://docs.lvgl.io/8.2/overview/animation.html#timeline]] | ||
| | | | ||
201行目: | 201行目: | ||
<span style="background-color:#e7f2fa;color:#2980b9;">typedef void (*lv_anim_exec_xcb_t)(void*, int32_t) </span> | <span style="background-color:#e7f2fa;color:#2980b9;">typedef void (*lv_anim_exec_xcb_t)(void*, int32_t) </span> | ||
− | : Generic prototype of "animator" functions. First parameter is the variable to animate. Second parameter is the value to set. Compatible with <code>lv_xxx_set_yyy(obj, value)</code> functions The <code>x</code> in <code>_xcb_t</code> means it's not a fully generic prototype because it doesn't receive <code>lv_anim_t *</code> as its first argument | + | : Generic prototype of "animator" functions. First parameter is the variable to animate. Second parameter is the value to set. Compatible with <code style="color: #bb0000;">lv_xxx_set_yyy(obj, value)</code> functions The <code style="color: #bb0000;">x</code> in <code style="color: #bb0000;">_xcb_t</code> means it's not a fully generic prototype because it doesn't receive <code style="color: #bb0000;">lv_anim_t *</code> as its first argument |
<span style="background-color:#e7f2fa;color:#2980b9;">typedef void (*lv_anim_custom_exec_cb_t)(struct _lv_anim_t*, int32_t) </span> | <span style="background-color:#e7f2fa;color:#2980b9;">typedef void (*lv_anim_custom_exec_cb_t)(struct _lv_anim_t*, int32_t) </span> | ||
− | : Same as <code>lv_anim_exec_xcb_t</code> but receives <code>lv_anim_t *</code> as the first parameter. It's more consistent but less convenient. Might be used by binding generator functions. | + | : Same as <code style="color: #bb0000;">lv_anim_exec_xcb_t</code> but receives <code style="color: #bb0000;">lv_anim_t *</code> as the first parameter. It's more consistent but less convenient. Might be used by binding generator functions. |
<span style="background-color:#e7f2fa;color:#2980b9;">typedef void (*lv_anim_ready_cb_t)(struct _lv_anim_t*) </span> | <span style="background-color:#e7f2fa;color:#2980b9;">typedef void (*lv_anim_ready_cb_t)(struct _lv_anim_t*) </span> | ||
210行目: | 210行目: | ||
<span style="background-color:#e7f2fa;color:#2980b9;">typedef void (*lv_anim_start_cb_t)(struct _lv_anim_t*) </span> | <span style="background-color:#e7f2fa;color:#2980b9;">typedef void (*lv_anim_start_cb_t)(struct _lv_anim_t*) </span> | ||
− | : Callback to call when the animation really stars (considering <code>delay</code>) | + | : Callback to call when the animation really stars (considering <code style="color: #bb0000;">delay</code>) |
<span style="background-color:#e7f2fa;color:#2980b9;">typedef int32_t (*lv_anim_get_value_cb_t)(struct _lv_anim_t*) </span> | <span style="background-color:#e7f2fa;color:#2980b9;">typedef int32_t (*lv_anim_get_value_cb_t)(struct _lv_anim_t*) </span> | ||
244行目: | 244行目: | ||
: Initialize an animation variable. E.g.: lv_anim_t a; lv_anim_init(&a); lv_anim_set_...(&a); lv_anim_start(&a); | : Initialize an animation variable. E.g.: lv_anim_t a; lv_anim_init(&a); lv_anim_set_...(&a); lv_anim_start(&a); | ||
: Parameters | : Parameters | ||
− | :: a -- pointer to an <code>lv_anim_t</code> variable to initialize | + | :: a -- pointer to an <code style="color: #bb0000;">lv_anim_t</code> variable to initialize |
<span style="background-color:#e7f2fa;color:#2980b9;">static inline void lv_anim_set_var(lv_anim_t *a, void *var) </span> | <span style="background-color:#e7f2fa;color:#2980b9;">static inline void lv_anim_set_var(lv_anim_t *a, void *var) </span> | ||
: Set a variable to animate | : Set a variable to animate | ||
: Parameters | : Parameters | ||
− | ::* a -- pointer to an initialized <code>lv_anim_t</code> variable | + | ::* a -- pointer to an initialized <code style="color: #bb0000;">lv_anim_t</code> variable |
::* var -- pointer to a variable to animate | ::* var -- pointer to a variable to animate | ||
<span style="background-color:#e7f2fa;color:#2980b9;">static inline void lv_anim_set_exec_cb(lv_anim_t *a, lv_anim_exec_xcb_t exec_cb) </span> | <span style="background-color:#e7f2fa;color:#2980b9;">static inline void lv_anim_set_exec_cb(lv_anim_t *a, lv_anim_exec_xcb_t exec_cb) </span> | ||
− | : Set a function to animate <code>var</code> | + | : Set a function to animate <code style="color: #bb0000;">var</code> |
: Parameters | : Parameters | ||
− | ::* a -- pointer to an initialized <code>lv_anim_t</code> variable | + | ::* a -- pointer to an initialized <code style="color: #bb0000;">lv_anim_t</code> variable |
::* exec_cb -- a function to execute during animation LVGL's built-in functions can be used. E.g. lv_obj_set_x | ::* exec_cb -- a function to execute during animation LVGL's built-in functions can be used. E.g. lv_obj_set_x | ||
261行目: | 261行目: | ||
: Set the duration of an animation | : Set the duration of an animation | ||
: Parameters | : Parameters | ||
− | ::* a -- pointer to an initialized <code>lv_anim_t</code> variable | + | ::* a -- pointer to an initialized <code style="color: #bb0000;">lv_anim_t</code> variable |
::* duration -- duration of the animation in milliseconds | ::* duration -- duration of the animation in milliseconds | ||
267行目: | 267行目: | ||
: Set a delay before starting the animation | : Set a delay before starting the animation | ||
: Parameters | : Parameters | ||
− | ::* a -- pointer to an initialized <code>lv_anim_t</code> variable | + | ::* a -- pointer to an initialized <code style="color: #bb0000;">lv_anim_t</code> variable |
::* delay -- delay before the animation in milliseconds | ::* delay -- delay before the animation in milliseconds | ||
273行目: | 273行目: | ||
: Set the start and end values of an animation | : Set the start and end values of an animation | ||
: Parameters | : Parameters | ||
− | ::* a -- pointer to an initialized <code>lv_anim_t</code> variable | + | ::* a -- pointer to an initialized <code style="color: #bb0000;">lv_anim_t</code> variable |
::* start -- the start value | ::* start -- the start value | ||
::* end -- the end value | ::* end -- the end value | ||
<span style="background-color:#e7f2fa;color:#2980b9;">static inline void lv_anim_set_custom_exec_cb(lv_anim_t *a, lv_anim_custom_exec_cb_t exec_cb) </span> | <span style="background-color:#e7f2fa;color:#2980b9;">static inline void lv_anim_set_custom_exec_cb(lv_anim_t *a, lv_anim_custom_exec_cb_t exec_cb) </span> | ||
− | : Similar to <code>lv_anim_set_exec_cb</code> but <code>lv_anim_custom_exec_cb_t</code> receives <code>lv_anim_t *</code> as its first parameter instead of <code>void *</code>. This function might be used when LVGL is bound to other languages because it's more consistent to have <code>lv_anim_t *</code> as first parameter. The variable to animate can be stored in the animation's <code>user_data</code> | + | : Similar to <code style="color: #bb0000;">lv_anim_set_exec_cb</code> but <code style="color: #bb0000;">lv_anim_custom_exec_cb_t</code> receives <code style="color: #bb0000;">lv_anim_t *</code> as its first parameter instead of <code style="color: #bb0000;">void *</code>. This function might be used when LVGL is bound to other languages because it's more consistent to have <code style="color: #bb0000;">lv_anim_t *</code> as first parameter. The variable to animate can be stored in the animation's <code style="color: #bb0000;">user_data</code> |
: Parameters | : Parameters | ||
− | ::* a -- pointer to an initialized <code>lv_anim_t</code> variable | + | ::* a -- pointer to an initialized <code style="color: #bb0000;">lv_anim_t</code> variable |
::* exec_cb -- a function to execute. | ::* exec_cb -- a function to execute. | ||
286行目: | 286行目: | ||
: Set the path (curve) of the animation. | : Set the path (curve) of the animation. | ||
: Parameters | : Parameters | ||
− | ::* a -- pointer to an initialized <code>lv_anim_t</code> variable | + | ::* a -- pointer to an initialized <code style="color: #bb0000;">lv_anim_t</code> variable |
::* path_cb -- a function to set the current value of the animation. | ::* path_cb -- a function to set the current value of the animation. | ||
<span style="background-color:#e7f2fa;color:#2980b9;">static inline void lv_anim_set_start_cb(lv_anim_t *a, lv_anim_start_cb_t start_cb) </span> | <span style="background-color:#e7f2fa;color:#2980b9;">static inline void lv_anim_set_start_cb(lv_anim_t *a, lv_anim_start_cb_t start_cb) </span> | ||
− | : Set a function call when the animation really starts (considering <code>delay</code>) | + | : Set a function call when the animation really starts (considering <code style="color: #bb0000;">delay</code>) |
: Parameters | : Parameters | ||
− | ::* a -- pointer to an initialized <code>lv_anim_t</code> variable | + | ::* a -- pointer to an initialized <code style="color: #bb0000;">lv_anim_t</code> variable |
::* start_cb -- a function call when the animation starts | ::* start_cb -- a function call when the animation starts | ||
298行目: | 298行目: | ||
: Set a function to use the current value of the variable and make start and end value relative to the returned current value. | : Set a function to use the current value of the variable and make start and end value relative to the returned current value. | ||
: Parameters | : Parameters | ||
− | ::* a -- pointer to an initialized <code>lv_anim_t</code> variable | + | ::* a -- pointer to an initialized <code style="color: #bb0000;">lv_anim_t</code> variable |
::* get_value_cb -- a function call when the animation starts | ::* get_value_cb -- a function call when the animation starts | ||
304行目: | 304行目: | ||
: Set a function call when the animation is ready | : Set a function call when the animation is ready | ||
: Parameters | : Parameters | ||
− | ::* a -- pointer to an initialized <code>lv_anim_t</code> variable | + | ::* a -- pointer to an initialized <code style="color: #bb0000;">lv_anim_t</code> variable |
::* ready_cb -- a function call when the animation is ready | ::* ready_cb -- a function call when the animation is ready | ||
310行目: | 310行目: | ||
: Make the animation to play back to when the forward direction is ready | : Make the animation to play back to when the forward direction is ready | ||
: Parameters | : Parameters | ||
− | ::* a -- pointer to an initialized <code>lv_anim_t</code> variable | + | ::* a -- pointer to an initialized <code style="color: #bb0000;">lv_anim_t</code> variable |
::* time -- the duration of the playback animation in milliseconds. 0: disable playback | ::* time -- the duration of the playback animation in milliseconds. 0: disable playback | ||
316行目: | 316行目: | ||
: Make the animation to play back to when the forward direction is ready | : Make the animation to play back to when the forward direction is ready | ||
: Parameters | : Parameters | ||
− | ::* a -- pointer to an initialized <code>lv_anim_t</code> variable | + | ::* a -- pointer to an initialized <code style="color: #bb0000;">lv_anim_t</code> variable |
::* delay -- delay in milliseconds before starting the playback animation. | ::* delay -- delay in milliseconds before starting the playback animation. | ||
322行目: | 322行目: | ||
: Make the animation repeat itself. | : Make the animation repeat itself. | ||
: Parameters | : Parameters | ||
− | ::* a -- pointer to an initialized <code>lv_anim_t</code> variable | + | ::* a -- pointer to an initialized <code style="color: #bb0000;">lv_anim_t</code> variable |
− | ::* cnt -- repeat count or <code>LV_ANIM_REPEAT_INFINITE</code> for infinite repetition. 0: to disable repetition. | + | ::* cnt -- repeat count or <code style="color: #bb0000;">LV_ANIM_REPEAT_INFINITE</code> for infinite repetition. 0: to disable repetition. |
<span style="background-color:#e7f2fa;color:#2980b9;">static inline void lv_anim_set_repeat_delay(lv_anim_t *a, uint32_t delay) </span> | <span style="background-color:#e7f2fa;color:#2980b9;">static inline void lv_anim_set_repeat_delay(lv_anim_t *a, uint32_t delay) </span> | ||
: Set a delay before repeating the animation. | : Set a delay before repeating the animation. | ||
: Parameters | : Parameters | ||
− | ::* a -- pointer to an initialized <code>lv_anim_t</code> variable | + | ::* a -- pointer to an initialized <code style="color: #bb0000;">lv_anim_t</code> variable |
::* delay -- delay in milliseconds before repeating the animation. | ::* delay -- delay in milliseconds before repeating the animation. | ||
334行目: | 334行目: | ||
: Set a whether the animation's should be applied immediately or only when the delay expired. | : Set a whether the animation's should be applied immediately or only when the delay expired. | ||
: Parameters | : Parameters | ||
− | ::* a -- pointer to an initialized <code>lv_anim_t</code> variable | + | ::* a -- pointer to an initialized <code style="color: #bb0000;">lv_anim_t</code> variable |
− | ::* en -- true: apply the start value immediately in <code>lv_anim_start</code>; false: apply the start value only when <code>delay</code> ms is elapsed and the animations really starts | + | ::* en -- true: apply the start value immediately in <code style="color: #bb0000;">lv_anim_start</code>; false: apply the start value only when <code style="color: #bb0000;">delay</code> ms is elapsed and the animations really starts |
<span style="background-color:#e7f2fa;color:#2980b9;">static inline void lv_anim_set_user_data(lv_anim_t *a, void *user_data) </span> | <span style="background-color:#e7f2fa;color:#2980b9;">static inline void lv_anim_set_user_data(lv_anim_t *a, void *user_data) </span> | ||
: Set the custom user data field of the animation. | : Set the custom user data field of the animation. | ||
: Parameters | : Parameters | ||
− | ::* a -- pointer to an initialized <code>lv_anim_t</code> variable | + | ::* a -- pointer to an initialized <code style="color: #bb0000;">lv_anim_t</code> variable |
::* user_data -- pointer to the new user_data. | ::* user_data -- pointer to the new user_data. | ||
348行目: | 348行目: | ||
:: a -- an initialized 'anim_t' variable. Not required after call. | :: a -- an initialized 'anim_t' variable. Not required after call. | ||
: Returns | : Returns | ||
− | :: pointer to the created animation (different from the <code>a</code> parameter) | + | :: pointer to the created animation (different from the <code style="color: #bb0000;">a</code> parameter) |
<span style="background-color:#e7f2fa;color:#2980b9;">static inline uint32_t lv_anim_get_delay(lv_anim_t *a) </span> | <span style="background-color:#e7f2fa;color:#2980b9;">static inline uint32_t lv_anim_get_delay(lv_anim_t *a) </span> | ||
: Get a delay before starting the animation | : Get a delay before starting the animation | ||
: Parameters | : Parameters | ||
− | :: a -- pointer to an initialized <code>lv_anim_t</code> variable | + | :: a -- pointer to an initialized <code style="color: #bb0000;">lv_anim_t</code> variable |
: Returns | : Returns | ||
:: delay before the animation in milliseconds | :: delay before the animation in milliseconds | ||
367行目: | 367行目: | ||
: Get the user_data field of the animation | : Get the user_data field of the animation | ||
: Parameters | : Parameters | ||
− | :: a -- pointer to an initialized <code>lv_anim_t</code> variable | + | :: a -- pointer to an initialized <code style="color: #bb0000;">lv_anim_t</code> variable |
: Returns | : Returns | ||
:: the pointer to the custom user_data of the animation | :: the pointer to the custom user_data of the animation | ||
383行目: | 383行目: | ||
<span style="background-color:#e7f2fa;color:#2980b9;">lv_anim_t *lv_anim_get(void *var, lv_anim_exec_xcb_t exec_cb) </span> | <span style="background-color:#e7f2fa;color:#2980b9;">lv_anim_t *lv_anim_get(void *var, lv_anim_exec_xcb_t exec_cb) </span> | ||
− | : Get the animation of a variable and its <code>exec_cb</code>. | + | : Get the animation of a variable and its <code style="color: #bb0000;">exec_cb</code>. |
: Parameters | : Parameters | ||
::* var -- pointer to variable | ::* var -- pointer to variable | ||
391行目: | 391行目: | ||
<span style="background-color:#e7f2fa;color:#2980b9;">static inline bool lv_anim_custom_del(lv_anim_t *a, lv_anim_custom_exec_cb_t exec_cb) </span> | <span style="background-color:#e7f2fa;color:#2980b9;">static inline bool lv_anim_custom_del(lv_anim_t *a, lv_anim_custom_exec_cb_t exec_cb) </span> | ||
− | : Delete an animation by getting the animated variable from <code>a</code>. Only animations with <code>exec_cb</code> will be deleted. This function exists because it's logical that all anim. functions receives an <code>lv_anim_t</code> as their first parameter. It's not practical in C but might make the API more consequent and makes easier to generate bindings. | + | : Delete an animation by getting the animated variable from <code style="color: #bb0000;">a</code>. Only animations with <code style="color: #bb0000;">exec_cb</code> will be deleted. This function exists because it's logical that all anim. functions receives an <code style="color: #bb0000;">lv_anim_t</code> as their first parameter. It's not practical in C but might make the API more consequent and makes easier to generate bindings. |
: Parameters | : Parameters | ||
::* a -- pointer to an animation. | ::* a -- pointer to an animation. | ||
399行目: | 399行目: | ||
<span style="background-color:#e7f2fa;color:#2980b9;">static inline lv_anim_t *lv_anim_custom_get(lv_anim_t *a, lv_anim_custom_exec_cb_t exec_cb) </span> | <span style="background-color:#e7f2fa;color:#2980b9;">static inline lv_anim_t *lv_anim_custom_get(lv_anim_t *a, lv_anim_custom_exec_cb_t exec_cb) </span> | ||
− | : Get the animation of a variable and its <code>exec_cb</code>. This function exists because it's logical that all anim. functions receives an <code>lv_anim_t</code> as their first parameter. It's not practical in C but might make the API more consequent and makes easier to generate bindings. | + | : Get the animation of a variable and its <code style="color: #bb0000;">exec_cb</code>. This function exists because it's logical that all anim. functions receives an <code style="color: #bb0000;">lv_anim_t</code> as their first parameter. It's not practical in C but might make the API more consequent and makes easier to generate bindings. |
: Parameters | : Parameters | ||
::* a -- pointer to an animation. | ::* a -- pointer to an animation. | ||
421行目: | 421行目: | ||
<span style="background-color:#e7f2fa;color:#2980b9;">void lv_anim_refr_now(void) </span> | <span style="background-color:#e7f2fa;color:#2980b9;">void lv_anim_refr_now(void) </span> | ||
− | : Manually refresh the state of the animations. Useful to make the animations running in a blocking process where <code>lv_timer_handler</code> can't run for a while. Shouldn't be used directly because it is called in <code>lv_refr_now()</code>. | + | : Manually refresh the state of the animations. Useful to make the animations running in a blocking process where <code style="color: #bb0000;">lv_timer_handler</code> can't run for a while. Shouldn't be used directly because it is called in <code style="color: #bb0000;">lv_refr_now()</code>. |
<span style="background-color:#e7f2fa;color:#2980b9;">int32_t lv_anim_path_linear(const lv_anim_t *a) </span> | <span style="background-color:#e7f2fa;color:#2980b9;">int32_t lv_anim_path_linear(const lv_anim_t *a) </span> | ||
479行目: | 479行目: | ||
:: Function to execute to animate | :: Function to execute to animate | ||
: <span style="background-color: #eeeeee;">lv_anim_start_cb_t start_cb </span> | : <span style="background-color: #eeeeee;">lv_anim_start_cb_t start_cb </span> | ||
− | :: Call it when the animation is starts (considering <code>delay</code>) | + | :: Call it when the animation is starts (considering <code style="color: #bb0000;">delay</code>) |
: <span style="background-color: #eeeeee;">lv_anim_ready_cb_t ready_cb </span> | : <span style="background-color: #eeeeee;">lv_anim_ready_cb_t ready_cb </span> | ||
:: Call it when the animation is ready | :: Call it when the animation is ready | ||
510行目: | 510行目: | ||
:: Repeat count for the animation | :: Repeat count for the animation | ||
: <span style="background-color: #eeeeee;">uint8_t early_apply </span> | : <span style="background-color: #eeeeee;">uint8_t early_apply </span> | ||
− | :: 1: Apply start value immediately even is there is <code>delay</code> | + | :: 1: Apply start value immediately even is there is <code style="color: #bb0000;">delay</code> |
: <span style="background-color: #eeeeee;">uint8_t playback_now </span> | : <span style="background-color: #eeeeee;">uint8_t playback_now </span> | ||
:: Play back is in progress | :: Play back is in progress | ||
516行目: | 516行目: | ||
:: Indicates the animation has run in this round | :: Indicates the animation has run in this round | ||
: <span style="background-color: #eeeeee;">uint8_t start_cb_called </span> | : <span style="background-color: #eeeeee;">uint8_t start_cb_called </span> | ||
− | :: Indicates that the <code>start_cb</code> was already called | + | :: Indicates that the <code style="color: #bb0000;">start_cb</code> was already called |
| | | | ||
|} | |} |
2022年7月2日 (土) 11:03時点における版
https://docs.lvgl.io/8.2/overview/animation.html
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: 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 |
Create an animation
英文 | 自動翻訳 |
---|---|
To create an animation an /* 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_time(&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(&a, lv_anim_path_ease_in);
/*Set a callback to indicate when the animation is ready (idle).*/
lv_anim_set_ready_cb(&a, ready_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_time(&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 |
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:
|
Speed vs time
英文 | 自動翻訳 |
---|---|
By default, you set the animation time directly. But in some cases, setting the animation speed is more practical. The |
Delete animations
英文 | 自動翻訳 |
---|---|
You can delete an animation with |
Timeline
Examples
英文 | 自動翻訳 |
---|---|
Start animation on an event |
|
Playback animation |
|
Animation timeline |
API
英文 | 自動翻訳 |
---|---|
Typedefs typedef int32_t (*lv_anim_path_cb_t)(const struct _lv_anim_t*)
typedef void (*lv_anim_exec_xcb_t)(void*, int32_t)
typedef void (*lv_anim_custom_exec_cb_t)(struct _lv_anim_t*, int32_t)
typedef void (*lv_anim_ready_cb_t)(struct _lv_anim_t*)
typedef void (*lv_anim_start_cb_t)(struct _lv_anim_t*)
typedef int32_t (*lv_anim_get_value_cb_t)(struct _lv_anim_t*)
typedef struct _lv_anim_t lv_anim_t
Enums enum lv_anim_enable_t
|
|
Functions
LV_EXPORT_CONST_INT(LV_ANIM_PLAYTIME_INFINITE) void _lv_anim_core_init(void)
void lv_anim_init(lv_anim_t *a)
static inline void lv_anim_set_var(lv_anim_t *a, void *var)
static inline void lv_anim_set_exec_cb(lv_anim_t *a, lv_anim_exec_xcb_t exec_cb)
static inline void lv_anim_set_time(lv_anim_t *a, uint32_t duration)
static inline void lv_anim_set_delay(lv_anim_t *a, uint32_t delay)
static inline void lv_anim_set_values(lv_anim_t *a, int32_t start, int32_t end)
static inline void lv_anim_set_custom_exec_cb(lv_anim_t *a, lv_anim_custom_exec_cb_t exec_cb)
static inline void lv_anim_set_path_cb(lv_anim_t *a, lv_anim_path_cb_t path_cb)
static inline void lv_anim_set_start_cb(lv_anim_t *a, lv_anim_start_cb_t start_cb)
static inline void lv_anim_set_get_value_cb(lv_anim_t *a, lv_anim_get_value_cb_t get_value_cb)
static inline void lv_anim_set_ready_cb(lv_anim_t *a, lv_anim_ready_cb_t ready_cb)
static inline void lv_anim_set_playback_time(lv_anim_t *a, uint32_t time)
static inline void lv_anim_set_playback_delay(lv_anim_t *a, uint32_t delay)
static inline void lv_anim_set_repeat_count(lv_anim_t *a, uint16_t cnt)
static inline void lv_anim_set_repeat_delay(lv_anim_t *a, uint32_t delay)
static inline void lv_anim_set_early_apply(lv_anim_t *a, bool en)
static inline void lv_anim_set_user_data(lv_anim_t *a, void *user_data)
lv_anim_t *lv_anim_start(const lv_anim_t *a)
static inline uint32_t lv_anim_get_delay(lv_anim_t *a)
uint32_t lv_anim_get_playtime(lv_anim_t *a)
static inline void *lv_anim_get_user_data(lv_anim_t *a)
bool lv_anim_del(void *var, lv_anim_exec_xcb_t exec_cb)
void lv_anim_del_all(void)
lv_anim_t *lv_anim_get(void *var, lv_anim_exec_xcb_t exec_cb)
static inline bool lv_anim_custom_del(lv_anim_t *a, lv_anim_custom_exec_cb_t exec_cb)
static inline lv_anim_t *lv_anim_custom_get(lv_anim_t *a, lv_anim_custom_exec_cb_t exec_cb)
uint16_t lv_anim_count_running(void)
uint32_t lv_anim_speed_to_time(uint32_t speed, int32_t start, int32_t end)
void lv_anim_refr_now(void)
int32_t lv_anim_path_linear(const lv_anim_t *a)
int32_t lv_anim_path_ease_in(const lv_anim_t *a)
int32_t lv_anim_path_ease_out(const lv_anim_t *a)
int32_t lv_anim_path_ease_in_out(const lv_anim_t *a)
int32_t lv_anim_path_overshoot(const lv_anim_t *a)
int32_t lv_anim_path_bounce(const lv_anim_t *a)
int32_t lv_anim_path_step(const lv_anim_t *a)
struct _lv_anim_t
|