mirror of
https://github.com/lvgl/lvgl.git
synced 2025-01-14 06:42:58 +08:00
feat(examples) add aniamtion examples
This commit is contained in:
parent
0a70280177
commit
71189b46e9
@ -47,7 +47,7 @@ lv_anim_set_values(&a, start, end);
|
||||
lv_anim_set_delay(&a, delay);
|
||||
|
||||
/*Set path (curve). Default is linear*/
|
||||
lv_anim_set_path(&a, &path);
|
||||
lv_anim_set_path(&a, lv_anim_path_ease_in);
|
||||
|
||||
/*Set a callback to call when animation is ready.*/
|
||||
lv_anim_set_ready_cb(&a, ready_cb);
|
||||
@ -76,48 +76,44 @@ lv_anim_start(&a); /*Start the animation*/
|
||||
```
|
||||
|
||||
|
||||
You can apply **multiple different animations** on the same variable at the same time.
|
||||
You can apply multiple different animations on the same variable at the same time.
|
||||
For example, animate the x and y coordinates with `lv_obj_set_x` and `lv_obj_set_y`. However, only one animation can exist with a given variable and function pair.
|
||||
Therefore `lv_anim_start()` will delete the already existing variable-function animations.
|
||||
|
||||
## Animation path
|
||||
|
||||
You can determinate the **path of animation**. In the most simple case, it is linear, which means the current value between *start* and *end* is changed linearly.
|
||||
A *path* is mainly a function which calculates the next value to set based on the current state of the animation. Currently, there are the following built-in paths functions:
|
||||
You can determinate the path of animation. In the most simple case, it is linear, which means the current value between *start* and *end* is changed linearly.
|
||||
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 paths functions:
|
||||
|
||||
- **lv_anim_path_linear** linear animation
|
||||
- **lv_anim_path_step** change in one step at the end
|
||||
- **lv_anim_path_ease_in** slow at the beginning
|
||||
- **lv_anim_path_ease_out** slow at the end
|
||||
- **lv_anim_path_ease_in_out** slow at the beginning and end too
|
||||
- **lv_anim_path_overshoot** overshoot the end value
|
||||
- **lv_anim_path_bounce** bounce back a little from the end value (like hitting a wall)
|
||||
- `lv_anim_path_linear` linear animation
|
||||
- `lv_anim_path_step` change in one step at the end
|
||||
- `lv_anim_path_ease_in` slow at the beginning
|
||||
- `lv_anim_path_ease_out` slow at the end
|
||||
- `lv_anim_path_ease_in_out` slow at the beginning and end too
|
||||
- `lv_anim_path_overshoot` overshoot the end value
|
||||
- `lv_anim_path_bounce` bounce back a little from the end value (like hitting a wall)
|
||||
|
||||
A path can be initialized like this:
|
||||
```c
|
||||
lv_anim_path_t path;
|
||||
lv_anim_path_init(&path);
|
||||
lv_anim_path_set_cb(&path, lv_anim_path_overshoot);
|
||||
lv_anim_path_set_user_data(&path, &foo); /*Optional for custom functions*/
|
||||
|
||||
/*Set the path in an animation*/
|
||||
lv_anim_set_path(&a, &path);
|
||||
```
|
||||
|
||||
## Speed vs time
|
||||
By default, you can set the animation time. But, in some cases, the **animation speed** is more practical.
|
||||
By default, you can set the animation time. But, in some cases, the animation speed is more practical.
|
||||
|
||||
The `lv_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, `lv_anim_speed_to_time(20,0,100)` will give 5000 milliseconds. For example, in case of `lv_obj_set_x` *unit* is pixels so *20* means *20 px/sec* speed.
|
||||
|
||||
## Delete animations
|
||||
|
||||
You can **delete an animation** by `lv_anim_del(var, func)` by providing the animated variable and its animator function.
|
||||
You can delete an animation by `lv_anim_del(var, func)` by providing the animated variable and its animator function.
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. include:: ../../examples/anim/index.rst
|
||||
|
||||
```
|
||||
## API
|
||||
|
||||
### Input device
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_anim.h
|
||||
|
19
examples/anim/index.rst
Normal file
19
examples/anim/index.rst
Normal file
@ -0,0 +1,19 @@
|
||||
C
|
||||
^
|
||||
|
||||
Start animation on an event
|
||||
""""""""""""""""""""""""""""
|
||||
|
||||
.. lv_example:: anim/lv_example_anim_1
|
||||
:language: c
|
||||
|
||||
Playback animation
|
||||
"""""""""""""""""""
|
||||
.. lv_example:: anim/lv_example_anim_2
|
||||
:language: c
|
||||
|
||||
|
||||
MicroPython
|
||||
^^^^^^^^^^^
|
||||
|
||||
No examples yet.
|
39
examples/anim/lv_example_anim.h
Normal file
39
examples/anim/lv_example_anim.h
Normal file
@ -0,0 +1,39 @@
|
||||
/**
|
||||
* @file lv_example_anim.h
|
||||
*
|
||||
*/
|
||||
|
||||
#ifndef LV_EXAMPLE_ANIM_H
|
||||
#define LV_EXAMPLE_ANIM_H
|
||||
|
||||
#ifdef __cplusplus
|
||||
extern "C" {
|
||||
#endif
|
||||
|
||||
/*********************
|
||||
* INCLUDES
|
||||
*********************/
|
||||
|
||||
/*********************
|
||||
* DEFINES
|
||||
*********************/
|
||||
|
||||
/**********************
|
||||
* TYPEDEFS
|
||||
**********************/
|
||||
|
||||
/**********************
|
||||
* GLOBAL PROTOTYPES
|
||||
**********************/
|
||||
void lv_example_anim_1(void);
|
||||
void lv_example_anim_2(void);
|
||||
|
||||
/**********************
|
||||
* MACROS
|
||||
**********************/
|
||||
|
||||
#ifdef __cplusplus
|
||||
} /*extern "C"*/
|
||||
#endif
|
||||
|
||||
#endif /*LV_EXAMPLE_ANIM_H*/
|
52
examples/anim/lv_example_anim_1.c
Normal file
52
examples/anim/lv_example_anim_1.c
Normal file
@ -0,0 +1,52 @@
|
||||
#include "../lv_examples.h"
|
||||
#if LV_BUILD_EXAMPLES && LV_USE_SWITCH
|
||||
|
||||
static void anim_x_cb(void * var, int32_t v)
|
||||
{
|
||||
lv_obj_set_x(var, v);
|
||||
}
|
||||
|
||||
static void sw_event_cb(lv_event_t * e)
|
||||
{
|
||||
lv_obj_t * sw = lv_event_get_target(e);
|
||||
lv_obj_t * label = lv_event_get_user_data(e);
|
||||
|
||||
if(lv_obj_has_state(sw, LV_STATE_CHECKED)) {
|
||||
lv_anim_t a;
|
||||
lv_anim_init(&a);
|
||||
lv_anim_set_var(&a, label);
|
||||
lv_anim_set_values(&a, lv_obj_get_x(label), 100);
|
||||
lv_anim_set_time(&a, 500);
|
||||
lv_anim_set_exec_cb(&a, anim_x_cb);
|
||||
lv_anim_set_path_cb(&a, lv_anim_path_overshoot);
|
||||
lv_anim_start(&a);
|
||||
} else {
|
||||
lv_anim_t a;
|
||||
lv_anim_init(&a);
|
||||
lv_anim_set_var(&a, label);
|
||||
lv_anim_set_values(&a, lv_obj_get_x(label), -lv_obj_get_width(label));
|
||||
lv_anim_set_time(&a, 500);
|
||||
lv_anim_set_exec_cb(&a, anim_x_cb);
|
||||
lv_anim_set_path_cb(&a, lv_anim_path_ease_in);
|
||||
lv_anim_start(&a);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Start animation on an event
|
||||
*/
|
||||
void lv_example_anim_1(void)
|
||||
{
|
||||
lv_obj_t * label = lv_label_create(lv_scr_act());
|
||||
lv_label_set_text(label, "Hello animations!");
|
||||
lv_obj_set_pos(label, 100, 10);
|
||||
|
||||
|
||||
lv_obj_t * sw = lv_switch_create(lv_scr_act());
|
||||
lv_obj_center(sw);
|
||||
lv_obj_add_state(sw, LV_STATE_CHECKED);
|
||||
lv_obj_add_event_cb(sw, sw_event_cb, LV_EVENT_VALUE_CHANGED, label);
|
||||
}
|
||||
|
||||
#endif
|
45
examples/anim/lv_example_anim_2.c
Normal file
45
examples/anim/lv_example_anim_2.c
Normal file
@ -0,0 +1,45 @@
|
||||
#include "../lv_examples.h"
|
||||
#if LV_BUILD_EXAMPLES && LV_USE_SWITCH
|
||||
|
||||
|
||||
static void anim_x_cb(void * var, int32_t v)
|
||||
{
|
||||
lv_obj_set_x(var, v);
|
||||
}
|
||||
|
||||
static void anim_size_cb(void * var, int32_t v)
|
||||
{
|
||||
lv_obj_set_size(var, v, v);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a playback animation
|
||||
*/
|
||||
void lv_example_anim_2(void)
|
||||
{
|
||||
|
||||
lv_obj_t * obj = lv_obj_create(lv_scr_act());
|
||||
lv_obj_set_style_bg_color(obj, lv_palette_main(LV_PALETTE_RED), 0);
|
||||
lv_obj_set_style_radius(obj, LV_RADIUS_CIRCLE, 0);
|
||||
|
||||
lv_obj_align(obj, LV_ALIGN_LEFT_MID, 10, 0);
|
||||
|
||||
lv_anim_t a;
|
||||
lv_anim_init(&a);
|
||||
lv_anim_set_var(&a, obj);
|
||||
lv_anim_set_values(&a, 10, 50);
|
||||
lv_anim_set_time(&a, 1000);
|
||||
lv_anim_set_playback_delay(&a, 100);
|
||||
lv_anim_set_playback_time(&a, 300);
|
||||
lv_anim_set_repeat_delay(&a, 500);
|
||||
lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
|
||||
lv_anim_set_path_cb(&a, lv_anim_path_ease_in_out);
|
||||
|
||||
lv_anim_set_exec_cb(&a, anim_size_cb);
|
||||
lv_anim_start(&a);
|
||||
lv_anim_set_exec_cb(&a, anim_x_cb);
|
||||
lv_anim_set_values(&a, 10, 240);
|
||||
lv_anim_start(&a);
|
||||
}
|
||||
|
||||
#endif
|
@ -20,6 +20,7 @@ extern "C" {
|
||||
#include "widgets/lv_example_widgets.h"
|
||||
#include "layouts/lv_example_layout.h"
|
||||
#include "scroll/lv_example_scroll.h"
|
||||
#include "anim/lv_example_anim.h"
|
||||
|
||||
/*********************
|
||||
* DEFINES
|
||||
|
Loading…
x
Reference in New Issue
Block a user