|
|
1行目: |
1行目: |
| https://docs.lvgl.io/8.2/libs/rlottie.html | | https://docs.lvgl.io/8.2/libs/rlottie.html |
| __NOTOC__ | | __NOTOC__ |
− | {| class="wikitable"
| |
− | !英文
| |
− | !自動翻訳
| |
− | |-
| |
− | |
| |
− | |
| |
− | |}
| |
− |
| |
| = Lottie player = | | = Lottie player = |
| Allows to use Lottie animations in LVGL. Taken from this base repository | | Allows to use Lottie animations in LVGL. Taken from this base repository |
26行目: |
18行目: |
| make -j | | make -j |
| sudo make install | | sudo make install |
− | And finally add the <code>-lrlottie</code> flag to your linker. | + | And finally add the <code style="color: #bb0000;">-lrlottie</code> flag to your linker. |
| | | |
| On embedded systems you need to take care of integrating Rlottie to the given build system. | | On embedded systems you need to take care of integrating Rlottie to the given build system. |
| | | |
| == Usage == | | == Usage == |
− | You can use animation from files or raw data (text). In either case first you need to enable <code>LV_USE_RLOTTIE</code> in <code>lv_conf.h</code>. | + | You can use animation from files or raw data (text). In either case first you need to enable <code style="color: #bb0000;">LV_USE_RLOTTIE</code> in <code style="color: #bb0000;">lv_conf.h</code>. |
| | | |
− | The <code>width</code> and <code>height</code> of the object be set in the ''create'' function and the animation will be scaled accordingly. | + | The <code style="color: #bb0000;">width</code> and <code style="color: #bb0000;">height</code> of the object be set in the ''create'' function and the animation will be scaled accordingly. |
| | | |
| === Use Rlottie from file === | | === Use Rlottie from file === |
41行目: |
33行目: |
| | | |
| === Use Rlottie from raw string data === | | === Use Rlottie from raw string data === |
− | <code>lv_example_rlottie_approve.c</code> contains an example animation in raw format. Instead storing the JSON string a hex array is stored for the following reasons: | + | <code style="color: #bb0000;">lv_example_rlottie_approve.c</code> contains an example animation in raw format. Instead storing the JSON string a hex array is stored for the following reasons: |
| | | |
− | * avoid escaping <code>"</code> in the JSON file | + | * avoid escaping <code style="color: #bb0000;">"</code> in the JSON file |
| * some compilers don't support very long strings | | * some compilers don't support very long strings |
| | | |
− | <code>lvgl/scripts/filetohex.py</code> can be used to convert a Lottie file a hex array. E.g.: | + | <code style="color: #bb0000;">lvgl/scripts/filetohex.py</code> can be used to convert a Lottie file a hex array. E.g.: |
| ./filetohex.py path/to/lottie.json > out.txt | | ./filetohex.py path/to/lottie.json > out.txt |
| To create an animation from raw data: | | To create an animation from raw data: |
58行目: |
50行目: |
| | | |
| == Controlling animations == | | == Controlling animations == |
− | LVGL provides two functions to control the animation mode: <code>lv_rlottie_set_play_mode</code> and <code>lv_rlottie_set_current_frame</code>. You'll combine your intentions when calling the first method, like in these examples: | + | LVGL provides two functions to control the animation mode: <code style="color: #bb0000;">lv_rlottie_set_play_mode</code> and <code style="color: #bb0000;">lv_rlottie_set_current_frame</code>. You'll combine your intentions when calling the first method, like in these examples: |
| lv_obj_t * lottie = lv_rlottie_create_from_file(scr, 128, 128, "test.json"); | | lv_obj_t * lottie = lv_rlottie_create_from_file(scr, 128, 128, "test.json"); |
| lv_obj_center(lottie); | | lv_obj_center(lottie); |
72行目: |
64行目: |
| The default animation mode is play forward with loop. | | The default animation mode is play forward with loop. |
| | | |
− | If you don't enable looping, a <code>LV_EVENT_READY</code> is sent when the animation can not make more progress without looping. | + | If you don't enable looping, a <code style="color: #bb0000;">LV_EVENT_READY</code> is sent when the animation can not make more progress without looping. |
| | | |
− | To get the number of frames in an animation or the current frame index, you can cast the <code>lv_obj_t</code> instance to a <code>lv_rlottie_t</code> instance and inspect the <code>current_frame</code> and <code>total_frames</code> members. | + | To get the number of frames in an animation or the current frame index, you can cast the <code style="color: #bb0000;">lv_obj_t</code> instance to a <code style="color: #bb0000;">lv_rlottie_t</code> instance and inspect the <code style="color: #bb0000;">current_frame</code> and <code style="color: #bb0000;">total_frames</code> members. |
| | | |
| == Example == | | == Example == |
89行目: |
81行目: |
| Enums | | Enums |
| | | |
− | ; <span id="_CPPv317lv_rlottie_ctrl_t"></span><span id="_CPPv217lv_rlottie_ctrl_t"></span><span id="lv__rlottie_8h_1a59d936e0348921b08df86fe86251298b" class="target"></span>enum lv_rlottie_ctrl_t[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv417lv_rlottie_ctrl_t] <span id="_CPPv317lv_rlottie_ctrl_t"></span><span id="_CPPv217lv_rlottie_ctrl_t"></span><span id="lv__rlottie_8h_1a59d936e0348921b08df86fe86251298b" class="target"></span>
| + | enum lv_rlottie_ctrl_t |
| : ''Values:'' | | : ''Values:'' |
− | :; <span id="_CPPv3N17lv_rlottie_ctrl_t23LV_RLOTTIE_CTRL_FORWARDE"></span><span id="_CPPv2N17lv_rlottie_ctrl_t23LV_RLOTTIE_CTRL_FORWARDE"></span><span id="lv__rlottie_8h_1a59d936e0348921b08df86fe86251298baaa45b19035740250cb199039a2935552" class="target"></span>enumera[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv417lv_rlottie_ctrl_t]tor LV_RLOTTIE_CTRL_FORWARD[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N17lv_rlottie_ctrl_t23LV_RLOTTIE_CTRL_FORWARDE] <span id="_CPPv3N17lv_rlottie_ctrl_t23LV_RLOTTIE_CTRL_FORWARDE"></span><span id="_CPPv2N17lv_rlottie_ctrl_t23LV_RLOTTIE_CTRL_FORWARDE"></span><span id="lv__rlottie_8h_1a59d936e0348921b08df86fe86251298baaa45b19035740250cb199039a2935552" class="target"></span> | + | :; enumerator LV_RLOTTIE_CTRL_FORWARD |
| :: | | :: |
− | :; <span id="_CPPv3N17lv_rlottie_ctrl_t24LV_RLOTTIE_CTRL_BACKWARDE"></span><span id="_CPPv2N17lv_rlottie_ctrl_t24LV_RLOTTIE_CTRL_BACKWARDE"></span><span id="lv__rlottie_8h_1a59d936e0348921b08df86fe86251298baa897e13f80a316bb7a139a1f3fed2296" class="target"></span>enumerator LV_RLOTTIE_CT[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N17lv_rlottie_ctrl_t23LV_RLOTTIE_CTRL_FORWARDE]RL_BACKWARD[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N17lv_rlottie_ctrl_t24LV_RLOTTIE_CTRL_BACKWARDE] <span id="_CPPv3N17lv_rlottie_ctrl_t24LV_RLOTTIE_CTRL_BACKWARDE"></span><span id="_CPPv2N17lv_rlottie_ctrl_t24LV_RLOTTIE_CTRL_BACKWARDE"></span><span id="lv__rlottie_8h_1a59d936e0348921b08df86fe86251298baa897e13f80a316bb7a139a1f3fed2296" class="target"></span> | + | :; enumerator LV_RLOTTIE_CTRL_BACKWARD |
| :: | | :: |
− | :; <span id="_CPPv3N17lv_rlottie_ctrl_t21LV_RLOTTIE_CTRL_PAUSEE"></span><span id="_CPPv2N17lv_rlottie_ctrl_t21LV_RLOTTIE_CTRL_PAUSEE"></span><span id="lv__rlottie_8h_1a59d936e0348921b08df86fe86251298babb9473d50eca00382771aee86f2eb526" class="target"></span>enumerator LV_RLOTTIE_CTR[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N17lv_rlottie_ctrl_t24LV_RLOTTIE_CTRL_BACKWARDE]L_PAUSE[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N17lv_rlottie_ctrl_t21LV_RLOTTIE_CTRL_PAUSEE] <span id="_CPPv3N17lv_rlottie_ctrl_t21LV_RLOTTIE_CTRL_PAUSEE"></span><span id="_CPPv2N17lv_rlottie_ctrl_t21LV_RLOTTIE_CTRL_PAUSEE"></span><span id="lv__rlottie_8h_1a59d936e0348921b08df86fe86251298babb9473d50eca00382771aee86f2eb526" class="target"></span> | + | :; enumerator LV_RLOTTIE_CTRL_PAUSE |
| :: | | :: |
− | :; <span id="_CPPv3N17lv_rlottie_ctrl_t20LV_RLOTTIE_CTRL_PLAYE"></span><span id="_CPPv2N17lv_rlottie_ctrl_t20LV_RLOTTIE_CTRL_PLAYE"></span><span id="lv__rlottie_8h_1a59d936e0348921b08df86fe86251298bafbe34532b6b85155302229c2173b5ac5" class="target"></span>enumerator LV_RLOTTIE_[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N17lv_rlottie_ctrl_t21LV_RLOTTIE_CTRL_PAUSEE]CTRL_PLAY[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N17lv_rlottie_ctrl_t20LV_RLOTTIE_CTRL_PLAYE] <span id="_CPPv3N17lv_rlottie_ctrl_t20LV_RLOTTIE_CTRL_PLAYE"></span><span id="_CPPv2N17lv_rlottie_ctrl_t20LV_RLOTTIE_CTRL_PLAYE"></span><span id="lv__rlottie_8h_1a59d936e0348921b08df86fe86251298bafbe34532b6b85155302229c2173b5ac5" class="target"></span> | + | :; enumerator LV_RLOTTIE_CTRL_PLAY |
| :: | | :: |
− | :; <span id="_CPPv3N17lv_rlottie_ctrl_t20LV_RLOTTIE_CTRL_LOOPE"></span><span id="_CPPv2N17lv_rlottie_ctrl_t20LV_RLOTTIE_CTRL_LOOPE"></span><span id="lv__rlottie_8h_1a59d936e0348921b08df86fe86251298ba2da7f70a9f377a134f472cfbbf24f949" class="target"></span>enumerator LV_RLOTTIE[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N17lv_rlottie_ctrl_t20LV_RLOTTIE_CTRL_PLAYE]_CTRL_LOOP[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N17lv_rlottie_ctrl_t20LV_RLOTTIE_CTRL_LOOPE] <span id="_CPPv3N17lv_rlottie_ctrl_t20LV_RLOTTIE_CTRL_LOOPE"></span><span id="_CPPv2N17lv_rlottie_ctrl_t20LV_RLOTTIE_CTRL_LOOPE"></span><span id="lv__rlottie_8h_1a59d936e0348921b08df86fe86251298ba2da7f70a9f377a134f472cfbbf24f949" class="target"></span> | + | :; enumerator LV_RLOTTIE_CTRL_LOOP |
| :: | | :: |
| | | |
| Functions | | Functions |
| | | |
− | ; <span id="_CPPv327lv_rlottie_create_from_fileP8lv_obj_t10lv_coord_t10lv_coord_tPKc"></span><span id="_CPPv227lv_rlottie_create_from_fileP8lv_obj_t10lv_coord_t10lv_coord_tPKc"></span><span id="lv_rlottie_create_from_file__lv_obj_tP.lv_coord_t.lv_coord_t.cCP"></span><span id="lv__rlottie_8h_1a6f38484770dab8ae498282cc84ee7018" class="target"></span>lv_obj_t[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N17lv_rlottie_ctrl_t20LV_RLOTTIE_CTRL_LOOPE] *lv_rlottie_create_from_file(lv_obj_t *parent, lv_coord_t width, lv_coord_t height, const char *path)[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv427lv_rlottie_create_from_fileP8lv_obj_t10lv_coord_t10lv_coord_tPKc] <span id="_CPPv327lv_rlottie_create_from_fileP8lv_obj_t10lv_coord_t10lv_coord_tPKc"></span><span id="_CPPv227lv_rlottie_create_from_fileP8lv_obj_t10lv_coord_t10lv_coord_tPKc"></span><span id="lv_rlottie_create_from_file__lv_obj_tP.lv_coord_t.lv_coord_t.cCP"></span><span id="lv__rlottie_8h_1a6f38484770dab8ae498282cc84ee7018" class="target"></span>
| + | lv_obj_t *lv_rlottie_create_from_file(lv_obj_t *parent, lv_coord_t width, lv_coord_t height, const char *path) |
| : | | : |
| | | |
− | ; <span id="_CPPv326lv_rlottie_create_from_rawP8lv_obj_t10lv_coord_t10lv_coord_tPKc"></span><span id="_CPPv226lv_rlottie_create_from_rawP8lv_obj_t10lv_coord_t10lv_coord_tPKc"></span><span id="lv_rlottie_create_from_raw__lv_obj_tP.lv_coord_t.lv_coord_t.cCP"></span><span id="lv__rlottie_8h_1aded405f94c89f9ef0a8d5577e9662fab" class="target"></span>lv_obj_t *lv_rlottie_create_from_raw(lv_obj_t *parent, lv_coord_t width, lv_coord_t height, const ch[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv427lv_rlottie_create_from_fileP8lv_obj_t10lv_coord_t10lv_coord_tPKc]ar *rlottie_desc)[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv426lv_rlottie_create_from_rawP8lv_obj_t10lv_coord_t10lv_coord_tPKc] <span id="_CPPv326lv_rlottie_create_from_rawP8lv_obj_t10lv_coord_t10lv_coord_tPKc"></span><span id="_CPPv226lv_rlottie_create_from_rawP8lv_obj_t10lv_coord_t10lv_coord_tPKc"></span><span id="lv_rlottie_create_from_raw__lv_obj_tP.lv_coord_t.lv_coord_t.cCP"></span><span id="lv__rlottie_8h_1aded405f94c89f9ef0a8d5577e9662fab" class="target"></span>
| + | lv_obj_t *lv_rlottie_create_from_raw(lv_obj_t *parent, lv_coord_t width, lv_coord_t height, const char *rlottie_desc) |
| : | | : |
| | | |
− | ; <span id="_CPPv324lv_rlottie_set_play_modeP8lv_obj_tK17lv_rlottie_ctrl_t"></span><span id="_CPPv224lv_rlottie_set_play_modeP8lv_obj_tK17lv_rlottie_ctrl_t"></span><span id="lv_rlottie_set_play_mode__lv_obj_tP.lv_rlottie_ctrl_tC"></span><span id="lv__rlottie_8h_1a2b30dd091cf3ec11698cc5c7c2962df1" class="target"></span>void lv_rlottie_set_play_mode(lv_obj_t *rlottie, const lv_rlottie_ctrl_t ctrl)[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv424lv_rlottie_set_play_modeP8lv_obj_tK17lv_rlottie_ctrl_t] <span id="_CPPv324lv_rlottie_set_play_modeP8lv_obj_tK17lv_rlottie_ctrl_t"></span><span id="_CPPv224lv_rlottie_set_play_modeP8lv_obj_tK17lv_rlottie_ctrl_t"></span><span id="lv_rlottie_set_play_mode__lv_obj_tP.lv_rlottie_ctrl_tC"></span><span id="lv__rlottie_8h_1a2b30dd091cf3ec11698cc5c7c2962df1" class="target"></span>
| + | void lv_rlottie_set_play_mode(lv_obj_t *rlottie, const lv_rlottie_ctrl_t ctrl) |
| : | | : |
| | | |
− | ; <span id="_CPPv328lv_rlottie_set_current_frameP8lv_obj_tK6size_t"></span><span id="_CPPv228lv_rlottie_set_current_frameP8lv_obj_tK6size_t"></span><span id="lv_rlottie_set_current_frame__lv_obj_tP.sC"></span><span id="lv__rlottie_8h_1a0bee636fb7987f869ae38d6d75f01171" class="target"></span>void lv_rlottie_s[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv426lv_rlottie_create_from_rawP8lv_obj_t10lv_coord_t10lv_coord_tPKc]et_current_frame(lv_obj_t *rlottie, const size_t go[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv424lv_rlottie_set_play_modeP8lv_obj_tK17lv_rlottie_ctrl_t]to_frame)[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv428lv_rlottie_set_current_frameP8lv_obj_tK6size_t] <span id="_CPPv328lv_rlottie_set_current_frameP8lv_obj_tK6size_t"></span><span id="_CPPv228lv_rlottie_set_current_frameP8lv_obj_tK6size_t"></span><span id="lv_rlottie_set_current_frame__lv_obj_tP.sC"></span><span id="lv__rlottie_8h_1a0bee636fb7987f869ae38d6d75f01171" class="target"></span>
| + | void lv_rlottie_set_current_frame(lv_obj_t *rlottie, const size_t goto_frame) |
| : | | : |
| | | |
| Variables | | Variables |
| | | |
− | ; <span id="_CPPv316lv_rlottie_class"></span><span id="_CPPv216lv_rlottie_class"></span><span id="lv_rlottie_class__lv_obj_class_tC"></span><span id="lv__rlottie_8h_1a899cb0cc50c483bb52a68f1aea91f6e4" class="target"></span>const lv_obj_class_t lv_rlottie_class[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv416lv_rlottie_class] <span id="_CPPv316lv_rlottie_class"></span><span id="_CPPv216lv_rlottie_class"></span><span id="lv_rlottie_class__lv_obj_class_tC"></span><span id="lv__rlottie_8h_1a899cb0cc50c483bb52a68f1aea91f6e4" class="target"></span>
| + | const lv_obj_class_t lv_rlottie_class |
| : | | : |
| | | |
− | ; <span id="_CPPv312lv_rlottie_t"></span><span id="_CPPv212lv_rlottie_t"></span><span id="lv_rlottie_t"></span><span id="structlv__rlottie__t" class="target"></span>struct [https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv428lv_rlottie_set_current_frameP8lv_obj_tK6size_t]lv_rlottie_t[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv412lv_rlottie_t] <span id="_CPPv312lv_rlottie_t"></span><span id="_CPPv212lv_rlottie_t"></span><span id="lv_rlottie_t"></span><span id="structlv__rlottie__t" class="target"></span>
| + | struct lv_rlottie_t |
− | : Pu[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv416lv_rlottie_class]blic Members [https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv412lv_rlottie_t] | + | : Public Members |
− | :; <span id="_CPPv3N12lv_rlottie_t7img_extE"></span><span id="_CPPv2N12lv_rlottie_t7img_extE"></span><span id="lv_rlottie_t::img_ext__lv_img_t"></span><span id="structlv__rlottie__t_1aa4140df01d9bd6777b84307ff15b3f47" class="target"></span>lv_img_t img_ext[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t7img_extE] <span id="_CPPv3N12lv_rlottie_t7img_extE"></span><span id="_CPPv2N12lv_rlottie_t7img_extE"></span><span id="lv_rlottie_t::img_ext__lv_img_t"></span><span id="structlv__rlottie__t_1aa4140df01d9bd6777b84307ff15b3f47" class="target"></span> | + | :; lv_img_t img_ext |
| :: | | :: |
− | :; <span id="_CPPv3N12lv_rlottie_t9animationE"></span><span id="_CPPv2N12lv_rlottie_t9animationE"></span><span id="lv_rlottie_t::animation__Lottie_Animation_SP"></span><span id="structlv__rlottie__t_1a0ea0f3f0a359768d4a168b2768b62256" class="target"></span>struct[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t7img_extE] Lottie_Animation_S *animation[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t9animationE] <span id="_CPPv3N12lv_rlottie_t9animationE"></span><span id="_CPPv2N12lv_rlottie_t9animationE"></span><span id="lv_rlottie_t::animation__Lottie_Animation_SP"></span><span id="structlv__rlottie__t_1a0ea0f3f0a359768d4a168b2768b62256" class="target"></span> | + | :; struct Lottie_Animation_S *animation |
| :: | | :: |
− | :; <span id="_CPPv3N12lv_rlottie_t4taskE"></span><span id="_CPPv2N12lv_rlottie_t4taskE"></span><span id="lv_rlottie_t::task__lv_timer_tP"></span><span id="structlv__rlottie__t_1a340484d56761b176949c8e85652dd9fb" class="target"></span>lv_timer_t *task[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t4taskE] <span id="_CPPv3N12lv_rlottie_t4taskE"></span><span id="_CPPv2N12lv_rlottie_t4taskE"></span><span id="lv_rlottie_t::task__lv_timer_tP"></span><span id="structlv__rlottie__t_1a340484d56761b176949c8e85652dd9fb" class="target"></span> | + | :; lv_timer_t *task |
| :: | | :: |
− | : [https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t9animationE] | + | : |
− | :; <span id="_CPPv3N12lv_rlottie_t6imgdscE"></span><span id="_CPPv2N12lv_rlottie_t6imgdscE"></span><span id="lv_rlottie_t::imgdsc__lv_img_dsc_t"></span><span id="structlv__rlottie__t_1a7ae49b2e27bc3cf0970a9af16604cca5" class="target"></span>lv_img[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t4taskE]_dsc_t imgdsc[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t6imgdscE] <span id="_CPPv3N12lv_rlottie_t6imgdscE"></span><span id="_CPPv2N12lv_rlottie_t6imgdscE"></span><span id="lv_rlottie_t::imgdsc__lv_img_dsc_t"></span><span id="structlv__rlottie__t_1a7ae49b2e27bc3cf0970a9af16604cca5" class="target"></span> | + | :; lv_img_dsc_t imgdsc |
| :: | | :: |
− | :; <span id="_CPPv3N12lv_rlottie_t12total_framesE"></span><span id="_CPPv2N12lv_rlottie_t12total_framesE"></span><span id="lv_rlottie_t::total_frames__s"></span><span id="structlv__rlottie__t_1a86ed01bad68f34159dd506817453d8a6" class="target"></span>size_t to[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t6imgdscE]tal_frames[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t12total_framesE] <span id="_CPPv3N12lv_rlottie_t12total_framesE"></span><span id="_CPPv2N12lv_rlottie_t12total_framesE"></span><span id="lv_rlottie_t::total_frames__s"></span><span id="structlv__rlottie__t_1a86ed01bad68f34159dd506817453d8a6" class="target"></span> | + | :; size_t total_frames |
| :: | | :: |
− | :; <span id="_CPPv3N12lv_rlottie_t13current_frameE"></span><span id="_CPPv2N12lv_rlottie_t13current_frameE"></span><span id="lv_rlottie_t::current_frame__s"></span><span id="structlv__rlottie__t_1af2a64d83496b0bb2e26a1276f49c0533" class="target"></span>size_t cu[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t12total_framesE]rrent_frame[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t13current_frameE] <span id="_CPPv3N12lv_rlottie_t13current_frameE"></span><span id="_CPPv2N12lv_rlottie_t13current_frameE"></span><span id="lv_rlottie_t::current_frame__s"></span><span id="structlv__rlottie__t_1af2a64d83496b0bb2e26a1276f49c0533" class="target"></span> | + | :; size_t current_frame |
| :: | | :: |
− | :; <span id="_CPPv3N12lv_rlottie_t9framerateE"></span><span id="_CPPv2N12lv_rlottie_t9framerateE"></span><span id="lv_rlottie_t::framerate__s"></span><span id="structlv__rlottie__t_1a6bf18b6d8ea9ba5fe8dc05b5fd55f880" class="target"></span>size_t fra[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t13current_frameE]merate[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t9framerateE] <span id="_CPPv3N12lv_rlottie_t9framerateE"></span><span id="_CPPv2N12lv_rlottie_t9framerateE"></span><span id="lv_rlottie_t::framerate__s"></span><span id="structlv__rlottie__t_1a6bf18b6d8ea9ba5fe8dc05b5fd55f880" class="target"></span> | + | :; size_t framerate |
| :: | | :: |
− | :; <span id="_CPPv3N12lv_rlottie_t13allocated_bufE"></span><span id="_CPPv2N12lv_rlottie_t13allocated_bufE"></span><span id="lv_rlottie_t::allocated_buf__uint32_tP"></span><span id="structlv__rlottie__t_1a034d0684d6a108138113c3ae87c31172" class="target"></span>uint32[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t9framerateE]_t *allocated_buf[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t13allocated_bufE] <span id="_CPPv3N12lv_rlottie_t13allocated_bufE"></span><span id="_CPPv2N12lv_rlottie_t13allocated_bufE"></span><span id="lv_rlottie_t::allocated_buf__uint32_tP"></span><span id="structlv__rlottie__t_1a034d0684d6a108138113c3ae87c31172" class="target"></span> | + | :; uint32_t *allocated_buf |
| :: | | :: |
− | :; <span id="_CPPv3N12lv_rlottie_t21allocated_buffer_sizeE"></span><span id="_CPPv2N12lv_rlottie_t21allocated_buffer_sizeE"></span><span id="lv_rlottie_t::allocated_buffer_size__s"></span><span id="structlv__rlottie__t_1a700bfe8401382beda62c609a64b85d62" class="target"></span>size_t alloca[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t13allocated_bufE]ted_buffer_size[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t21allocated_buffer_sizeE] <span id="_CPPv3N12lv_rlottie_t21allocated_buffer_sizeE"></span><span id="_CPPv2N12lv_rlottie_t21allocated_buffer_sizeE"></span><span id="lv_rlottie_t::allocated_buffer_size__s"></span><span id="structlv__rlottie__t_1a700bfe8401382beda62c609a64b85d62" class="target"></span> | + | :; size_t allocated_buffer_size |
| :: | | :: |
− | :; <span id="_CPPv3N12lv_rlottie_t14scanline_widthE"></span><span id="_CPPv2N12lv_rlottie_t14scanline_widthE"></span><span id="lv_rlottie_t::scanline_width__s"></span><span id="structlv__rlottie__t_1ae6e8a042026874ae3fac4ae2f11ea1d1" class="target"></span>size_t scanline_wi[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t21allocated_buffer_sizeE]dth[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t14scanline_widthE] <span id="_CPPv3N12lv_rlottie_t14scanline_widthE"></span><span id="_CPPv2N12lv_rlottie_t14scanline_widthE"></span><span id="lv_rlottie_t::scanline_width__s"></span><span id="structlv__rlottie__t_1ae6e8a042026874ae3fac4ae2f11ea1d1" class="target"></span> | + | :; size_t scanline_width |
| :: | | :: |
− | :; <span id="_CPPv3N12lv_rlottie_t9play_ctrlE"></span><span id="_CPPv2N12lv_rlottie_t9play_ctrlE"></span><span id="lv_rlottie_t::play_ctrl__lv_rlottie_ctrl_t"></span><span id="structlv__rlottie__t_1a804f58f5a5aba876bf719f3fc406405f" class="target"></span>lv_rlottie_[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t14scanline_widthE]ctrl_t play_ctrl[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t9play_ctrlE] <span id="_CPPv3N12lv_rlottie_t9play_ctrlE"></span><span id="_CPPv2N12lv_rlottie_t9play_ctrlE"></span><span id="lv_rlottie_t::play_ctrl__lv_rlottie_ctrl_t"></span><span id="structlv__rlottie__t_1a804f58f5a5aba876bf719f3fc406405f" class="target"></span> | + | :; lv_rlottie_ctrl_t play_ctrl |
| :: | | :: |
− | :; <span id="_CPPv3N12lv_rlottie_t10dest_frameE"></span><span id="_CPPv2N12lv_rlottie_t10dest_frameE"></span><span id="lv_rlottie_t::dest_frame__s"></span><span id="structlv__rlottie__t_1a801b46163fcd31e165e5f4b36e9e1f80" class="target"></span>size_t dest_frame[https://docs.lvgl.io/8.2/libs/rlottie.html#_CPPv4N12lv_rlottie_t9play_ctrlE] | + | :; size_t dest_frame |
| | | |
| | | |
https://docs.lvgl.io/8.2/libs/rlottie.html
Lottie player
Allows to use Lottie animations in LVGL. Taken from this base repository
LVGL provides the interface to Samsung/rlottie library's C API. That is the actual Lottie player is not part of LVGL, it needs to be built separately.
Build Rlottie
To build Samsung's Rlottie C++14-compatible compiler and optionally CMake 3.14 or higher is required.
To build on desktop you can follow the instructions from Rlottie's README. In the most basic case it looks like this:
mkdir rlottie_workdir
cd rlottie_workdir
git clone https://github.com/Samsung/rlottie.git
mkdir build
cd build
cmake ../rlottie
make -j
sudo make install
And finally add the -lrlottie
flag to your linker.
On embedded systems you need to take care of integrating Rlottie to the given build system.
Usage
You can use animation from files or raw data (text). In either case first you need to enable LV_USE_RLOTTIE
in lv_conf.h
.
The width
and height
of the object be set in the create function and the animation will be scaled accordingly.
Use Rlottie from file
To create a Lottie animation from file use:
lv_obj_t * lottie = lv_rlottie_create_from_file(parent, width, height, "path/to/lottie.json");
Note that, Rlottie uses the standard STDIO C file API, so you can use the path "normally" and no LVGL specific driver letter is required.
Use Rlottie from raw string data
lv_example_rlottie_approve.c
contains an example animation in raw format. Instead storing the JSON string a hex array is stored for the following reasons:
- avoid escaping
"
in the JSON file
- some compilers don't support very long strings
lvgl/scripts/filetohex.py
can be used to convert a Lottie file a hex array. E.g.:
./filetohex.py path/to/lottie.json > out.txt
To create an animation from raw data:
extern const uint8_t lottie_data[];
lv_obj_t* lottie = lv_rlottie_create_from_raw(parent, width, height, (const char *)lottie_data);
Getting animations
Lottie is standard and popular format so you can find many animation files on the web. For example: https://lottiefiles.com/
You can also create your own animations with Adobe After Effects or similar software.
Controlling animations
LVGL provides two functions to control the animation mode: lv_rlottie_set_play_mode
and lv_rlottie_set_current_frame
. You'll combine your intentions when calling the first method, like in these examples:
lv_obj_t * lottie = lv_rlottie_create_from_file(scr, 128, 128, "test.json");
lv_obj_center(lottie);
// Pause to a specific frame
lv_rlottie_set_current_frame(lottie, 50);
lv_rlottie_set_play_mode(lottie, LV_RLOTTIE_CTRL_PAUSE); // The specified frame will be displayed and then the animation will pause
// Play backward and loop
lv_rlottie_set_play_mode(lottie, LV_RLOTTIE_CTRL_PLAY | LV_RLOTTIE_CTRL_BACKWARD | LV_RLOTTIE_CTRL_LOOP);
// Play forward once (no looping)
lv_rlottie_set_play_mode(lottie, LV_RLOTTIE_CTRL_PLAY | LV_RLOTTIE_CTRL_FORWARD);
The default animation mode is play forward with loop.
If you don't enable looping, a LV_EVENT_READY
is sent when the animation can not make more progress without looping.
To get the number of frames in an animation or the current frame index, you can cast the lv_obj_t
instance to a lv_rlottie_t
instance and inspect the current_frame
and total_frames
members.
Example
Load a Lottie animation from raw data
Load a Lottie animation from a file
API
Enums
enum lv_rlottie_ctrl_t
- Values:
- enumerator LV_RLOTTIE_CTRL_FORWARD
- enumerator LV_RLOTTIE_CTRL_BACKWARD
- enumerator LV_RLOTTIE_CTRL_PAUSE
- enumerator LV_RLOTTIE_CTRL_PLAY
- enumerator LV_RLOTTIE_CTRL_LOOP
Functions
lv_obj_t *lv_rlottie_create_from_file(lv_obj_t *parent, lv_coord_t width, lv_coord_t height, const char *path)
lv_obj_t *lv_rlottie_create_from_raw(lv_obj_t *parent, lv_coord_t width, lv_coord_t height, const char *rlottie_desc)
void lv_rlottie_set_play_mode(lv_obj_t *rlottie, const lv_rlottie_ctrl_t ctrl)
void lv_rlottie_set_current_frame(lv_obj_t *rlottie, const size_t goto_frame)
Variables
const lv_obj_class_t lv_rlottie_class
struct lv_rlottie_t
- Public Members
- lv_img_t img_ext
- struct Lottie_Animation_S *animation
- lv_timer_t *task
-
- lv_img_dsc_t imgdsc
- size_t total_frames
- size_t current_frame
- size_t framerate
- uint32_t *allocated_buf
- size_t allocated_buffer_size
- size_t scanline_width
- lv_rlottie_ctrl_t play_ctrl
- size_t dest_frame
- 戻る : Previous