acid-drop- Hacking the planet from a LilyGo T-Deck using custom firmware |
git clone git://git.acid.vegas/acid-drop.git |
Log | Files | Refs | Archive | README | LICENSE |
animation.md (5455B)
1 ```eval_rst 2 .. include:: /header.rst 3 :github_url: |github_link_base|/overview/animation.md 4 ``` 5 # Animations 6 7 You can automatically change the value of a variable between a start and an end value using animations. 8 Animation will happen by periodically calling an "animator" function with the corresponding value parameter. 9 10 The *animator* functions have the following prototype: 11 ```c 12 void func(void * var, lv_anim_var_t value); 13 ``` 14 This prototype is compatible with the majority of the property *set* functions in LVGL. For example `lv_obj_set_x(obj, value)` or `lv_obj_set_width(obj, value)` 15 16 17 ## Create an animation 18 To create an animation an `lv_anim_t` variable has to be initialized and configured with `lv_anim_set_...()` functions. 19 20 ```c 21 22 /* INITIALIZE AN ANIMATION 23 *-----------------------*/ 24 25 lv_anim_t a; 26 lv_anim_init(&a); 27 28 /* MANDATORY SETTINGS 29 *------------------*/ 30 31 /*Set the "animator" function*/ 32 lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t) lv_obj_set_x); 33 34 /*Set target of the animation*/ 35 lv_anim_set_var(&a, obj); 36 37 /*Length of the animation [ms]*/ 38 lv_anim_set_time(&a, duration); 39 40 /*Set start and end values. E.g. 0, 150*/ 41 lv_anim_set_values(&a, start, end); 42 43 /* OPTIONAL SETTINGS 44 *------------------*/ 45 46 /*Time to wait before starting the animation [ms]*/ 47 lv_anim_set_delay(&a, delay); 48 49 /*Set path (curve). Default is linear*/ 50 lv_anim_set_path(&a, lv_anim_path_ease_in); 51 52 /*Set a callback to indicate when the animation is ready (idle).*/ 53 lv_anim_set_ready_cb(&a, ready_cb); 54 55 /*Set a callback to indicate when the animation is started (after delay).*/ 56 lv_anim_set_start_cb(&a, start_cb); 57 58 /*When ready, play the animation backward with this duration. Default is 0 (disabled) [ms]*/ 59 lv_anim_set_playback_time(&a, time); 60 61 /*Delay before playback. Default is 0 (disabled) [ms]*/ 62 lv_anim_set_playback_delay(&a, delay); 63 64 /*Number of repetitions. Default is 1. LV_ANIM_REPEAT_INFINITE for infinite repetition*/ 65 lv_anim_set_repeat_count(&a, cnt); 66 67 /*Delay before repeat. Default is 0 (disabled) [ms]*/ 68 lv_anim_set_repeat_delay(&a, delay); 69 70 /*true (default): apply the start value immediately, false: apply start value after delay when the anim. really starts. */ 71 lv_anim_set_early_apply(&a, true/false); 72 73 /* START THE ANIMATION 74 *------------------*/ 75 lv_anim_start(&a); /*Start the animation*/ 76 ``` 77 78 79 You can apply multiple different animations on the same variable at the same time. 80 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 and `lv_anim_start()` will remove any existing animations for such a pair. 81 82 ## Animation path 83 84 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. 85 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: 86 87 - `lv_anim_path_linear` linear animation 88 - `lv_anim_path_step` change in one step at the end 89 - `lv_anim_path_ease_in` slow at the beginning 90 - `lv_anim_path_ease_out` slow at the end 91 - `lv_anim_path_ease_in_out` slow at the beginning and end 92 - `lv_anim_path_overshoot` overshoot the end value 93 - `lv_anim_path_bounce` bounce back a little from the end value (like hitting a wall) 94 95 96 ## Speed vs time 97 By default, you set the animation time directly. But in some cases, setting the animation speed is more practical. 98 99 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. 100 The speed is interpreted in _unit/sec_ dimension. For example, `lv_anim_speed_to_time(20,0,100)` will yield 5000 milliseconds. For example, in the case of `lv_obj_set_x` *unit* is pixels so *20* means *20 px/sec* speed. 101 102 ## Delete animations 103 104 You can delete an animation with `lv_anim_del(var, func)` if you provide the animated variable and its animator function. 105 106 ## Timeline 107 A timeline is a collection of multiple animations which makes it easy to create complex composite animations. 108 109 Firstly, create an animation element but don’t call `lv_anim_start()`. 110 111 Secondly, create an animation timeline object by calling `lv_anim_timeline_create()`. 112 113 Thirdly, add animation elements to the animation timeline by calling `lv_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`. 114 115 Finally, call `lv_anim_timeline_start(at)` to start the animation timeline. 116 117 It supports forward and backward playback of the entire animation group, using `lv_anim_timeline_set_reverse(at, reverse)`. 118 119 Call `lv_anim_timeline_stop(at)` to stop the animation timeline. 120 121 Call `lv_anim_timeline_set_progress(at, progress)` function to set the state of the object corresponding to the progress of the timeline. 122 123 Call `lv_anim_timeline_get_playtime(at)` function to get the total duration of the entire animation timeline. 124 125 Call `lv_anim_timeline_get_reverse(at)` function to get whether to reverse the animation timeline. 126 127 Call `lv_anim_timeline_del(at)` function to delete the animation timeline. 128 129 ![](/misc/anim-timeline.png "timeline diagram") 130 131 ## Examples 132 133 ```eval_rst 134 135 .. include:: ../../examples/anim/index.rst 136 137 ``` 138 ## API 139 140 ```eval_rst 141 142 .. doxygenfile:: lv_anim.h 143 :project: lvgl 144 145 ```