「App:Library:LVGL:docs:3rd party libraries:Lottie player」の版間の差分

提供: robot-jp wiki
ナビゲーションに移動検索に移動
2行目: 2行目:
 
__NOTOC__
 
__NOTOC__
 
= Lottie player =
 
= Lottie player =
 +
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 
Allows to use Lottie animations in LVGL. Taken from this base repository
 
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.
 
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.
 +
|
 +
|}
 +
:[[App:Library:LVGL:docs:3rd party libraries|戻る : Previous]]
 +
  
 
== Build Rlottie ==
 
== Build Rlottie ==
 +
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 
To build Samsung's Rlottie C++14-compatible compiler and optionally CMake 3.14 or higher is required.
 
To build Samsung's Rlottie C++14-compatible compiler and optionally CMake 3.14 or higher is required.
  
21行目: 35行目:
  
 
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.
 +
|
 +
|}
 +
:[[App:Library:LVGL:docs:3rd party libraries|戻る : Previous]]
 +
  
 
== Usage ==
 
== Usage ==
 +
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 
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>.
 
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 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.
 
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.
 +
|
 +
|}
 +
:[[App:Library:LVGL:docs:3rd party libraries|戻る : Previous]]
 +
  
 
=== Use Rlottie from file ===
 
=== Use Rlottie from file ===
 +
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 
To create a Lottie animation from file use:
 
To create a Lottie animation from file use:
 
   lv_obj_t * lottie = lv_rlottie_create_from_file(parent, width, height, "path/to/lottie.json");
 
   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.
 
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.
 +
|
 +
|}
 +
:[[App:Library:LVGL:docs:3rd party libraries|戻る : Previous]]
 +
  
 
=== Use Rlottie from raw string data ===
 
=== Use Rlottie from raw string data ===
 +
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 
<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:
 
<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:
  
43行目: 84行目:
 
  extern const uint8_t lottie_data[];
 
  extern const uint8_t lottie_data[];
 
  lv_obj_t* lottie = lv_rlottie_create_from_raw(parent, width, height, (const char *)lottie_data);
 
  lv_obj_t* lottie = lv_rlottie_create_from_raw(parent, width, height, (const char *)lottie_data);
 +
|
 +
|}
 +
:[[App:Library:LVGL:docs:3rd party libraries|戻る : Previous]]
 +
  
 
== Getting animations ==
 
== Getting animations ==
 +
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 
Lottie is standard and popular format so you can find many animation files on the web. For example: <nowiki>https://lottiefiles.com/</nowiki>
 
Lottie is standard and popular format so you can find many animation files on the web. For example: <nowiki>https://lottiefiles.com/</nowiki>
  
 
You can also create your own animations with Adobe After Effects or similar software.
 
You can also create your own animations with Adobe After Effects or similar software.
 +
|
 +
|}
 +
:[[App:Library:LVGL:docs:3rd party libraries|戻る : Previous]]
 +
  
 
== Controlling animations ==
 
== Controlling animations ==
 +
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 
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:
 
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");
67行目: 126行目:
  
 
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.
 
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.
 +
|
 +
|}
 +
:[[App:Library:LVGL:docs:3rd party libraries|戻る : Previous]]
 +
  
 
== Example ==
 
== Example ==
 +
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 
=== Load a Lottie animation from raw data ===
 
=== Load a Lottie animation from raw data ===
 
[[file:LVGL docs 3rdPartyLibs Lottie 01.png|link=https://docs.lvgl.io/8.2/libs/rlottie.html#load-a-lottie-animation-from-raw-data]]
 
[[file:LVGL docs 3rdPartyLibs Lottie 01.png|link=https://docs.lvgl.io/8.2/libs/rlottie.html#load-a-lottie-animation-from-raw-data]]
−
 
+
|
−
----
+
|-
 +
|
 
=== Load a Lottie animation from a file ===
 
=== Load a Lottie animation from a file ===
 
[[file:LVGL docs 3rdPartyLibs Lottie 01.png|link=https://docs.lvgl.io/8.2/libs/rlottie.html#load-a-lottie-animation-from-a-file]]
 
[[file:LVGL docs 3rdPartyLibs Lottie 01.png|link=https://docs.lvgl.io/8.2/libs/rlottie.html#load-a-lottie-animation-from-a-file]]
 +
|
 +
|}
 +
:[[App:Library:LVGL:docs:3rd party libraries|戻る : Previous]]
  
−
----
 
  
 
== API ==
 
== API ==
 +
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 
Enums
 
Enums
  
139行目: 215行目:
 
::
 
::
 
:; size_t dest_frame
 
:; size_t dest_frame
 +
|
 +
|}
  
  
  
−
 
−
 
−
 
−
 
−
 
−
 
−
----
 
 
:[[App:Library:LVGL:docs:3rd party libraries|戻る : Previous]]
 
:[[App:Library:LVGL:docs:3rd party libraries|戻る : Previous]]

2022年6月29日 (水) 17:12時点における版

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.

戻る : Previous


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.

戻る : Previous


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.

戻る : Previous


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.

戻る : Previous


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);
戻る : Previous


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.

戻る : Previous


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.

戻る : Previous


Example

英文 自動翻訳

Load a Lottie animation from raw data

LVGL docs 3rdPartyLibs Lottie 01.png

Load a Lottie animation from a file

LVGL docs 3rdPartyLibs Lottie 01.png

戻る : Previous


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
「https://robot-jp.com/wiki/index.php?title=App:Library:LVGL:docs:3rd_party_libraries:Lottie_player&oldid=3810」から取得