diff --git a/docs/overview/animation.md b/docs/overview/animation.md index 44fe9eee6..f25df6e97 100644 --- a/docs/overview/animation.md +++ b/docs/overview/animation.md @@ -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 diff --git a/examples/anim/index.rst b/examples/anim/index.rst new file mode 100644 index 000000000..11ece8e28 --- /dev/null +++ b/examples/anim/index.rst @@ -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. diff --git a/examples/anim/lv_example_anim.h b/examples/anim/lv_example_anim.h new file mode 100644 index 000000000..32e898517 --- /dev/null +++ b/examples/anim/lv_example_anim.h @@ -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*/ diff --git a/examples/anim/lv_example_anim_1.c b/examples/anim/lv_example_anim_1.c new file mode 100644 index 000000000..8e18c1ec2 --- /dev/null +++ b/examples/anim/lv_example_anim_1.c @@ -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 diff --git a/examples/anim/lv_example_anim_2.c b/examples/anim/lv_example_anim_2.c new file mode 100644 index 000000000..d030ed603 --- /dev/null +++ b/examples/anim/lv_example_anim_2.c @@ -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 diff --git a/examples/lv_examples.h b/examples/lv_examples.h index 7486b37f2..74eb2e6fd 100644 --- a/examples/lv_examples.h +++ b/examples/lv_examples.h @@ -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