```eval_rst .. include:: /header.rst :github_url: |github_link_base|/overview/animation.md ``` # Animations You can automatically change the value of a variable between a start and an end value using animations. The animation will happen by the periodical call of an "animator" function with the corresponding value parameter. The *animator* functions has the following prototype: ```c void func(void * var, lv_anim_var_t value); ``` This prototype is compatible with the majority of the *set* function of LVGL. For example `lv_obj_set_x(obj, value)` or `lv_obj_set_width(obj, value)` ## Create an animation To create an animation an `lv_anim_t` variable has to be initialized and configured with `lv_anim_set_...()` functions. ```c /* 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 the "animator" function*/ 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 call when animation is ready.*/ lv_anim_set_ready_cb(&a, ready_cb); /*Set a callback to call when animation is started (after delay).*/ lv_anim_set_start_cb(&a, start_cb); /*Play the animation backward too with this duration. Default is 0 (disabled) [ms]*/ lv_anim_set_playback_time(&a, wait_time); /*Delay before playback. Default is 0 (disabled) [ms]*/ lv_anim_set_playback_delay(&a, wait_time); /*Number of repetitions. Default is 1. LV_ANIM_REPEAT_INFINIT for infinite repetition*/ lv_anim_set_repeat_count(&a, wait_time); /*Delay before repeat. Default is 0 (disabled) [ms]*/ lv_anim_set_repeat_delay(&a, wait_time); /*true (default): apply the start vale immediately, false: apply start vale after delay when then 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 `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 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) ## Speed vs time 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. ## Examples ```eval_rst .. include:: ../../examples/anim/index.rst ``` ## API ```eval_rst .. doxygenfile:: lv_anim.h :project: lvgl ```