「App:Library:LVGL:docs:3rd party libraries:Lottie player」の版間の差分
(同じ利用者による、間の4版が非表示) | |||
1行目: | 1行目: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
https://docs.lvgl.io/8.2/libs/rlottie.html | https://docs.lvgl.io/8.2/libs/rlottie.html | ||
__NOTOC__ | __NOTOC__ | ||
83行目: | 65行目: | ||
|- | |- | ||
| | | | ||
− | 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. | ||
− | | | + | |ファイルや生データ(テキスト)からのアニメーションを使用することができます。 |
+ | |||
+ | どちらの場合でも、まず<code style="color: #bb0000;">lv_conf.h</code>で <code style="color: #bb0000;">LV_USE_RLOTTIE</code> を有効にする必要があります。 | ||
− | オブジェクトの<code style="color: #bb0000;">width</code> | + | オブジェクトの<code style="color: #bb0000;">width</code>と<code style="color: #bb0000;">height</code>はcreate関数で設定され、アニメーションはそれに応じて拡大縮小されます。 |
|} | |} | ||
:[[App:Library:LVGL:docs:3rd party libraries|戻る : Previous]] | :[[App:Library:LVGL:docs:3rd party libraries|戻る : Previous]] | ||
103行目: | 89行目: | ||
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"); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
+ | |||
+ | |||
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. | ||
|ファイルからロッティアニメーションを作成するには、次のようにします。 | |ファイルからロッティアニメーションを作成するには、次のようにします。 | ||
108行目: | 96行目: | ||
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"); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | + | ||
+ | |||
+ | なお、Rlottieは標準のSTDIO CファイルAPIを使用しているので、パスは「普通に」使用でき、LVGL固有のドライバ文字は必要ありません。 | ||
|} | |} | ||
:[[App:Library:LVGL:docs:3rd party libraries|戻る : Previous]] | :[[App:Library:LVGL:docs:3rd party libraries|戻る : Previous]] | ||
123行目: | 113行目: | ||
* avoid escaping <code style="color: #bb0000;">"</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 style="color: #bb0000;">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.: | ||
128行目: | 119行目: | ||
./filetohex.py path/to/lottie.json > out.txt | ./filetohex.py path/to/lottie.json > out.txt | ||
</syntaxhighlight> | </syntaxhighlight> | ||
+ | |||
+ | |||
To create an animation from raw data: | To create an animation from raw data: | ||
<syntaxhighlight lang="C++" style="border:1px dashed gray;"> | <syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
135行目: | 128行目: | ||
| | | | ||
+ | <code style="color: #bb0000;">lv_example_rlottie_approve.c</code> は、raw 形式のアニメーション例を含んでいます。以下の理由から、JSON文字列の代わりに16進配列が格納されています。 | ||
+ | |||
+ | * JSONファイル中の<code style="color: #bb0000;">"</code>のエスケープを避けるため。 | ||
+ | * コンパイラによっては、非常に長い文字列をサポートしない場合があります。 | ||
− | |||
− | + | <code style="color: #bb0000;">lvgl/scripts/filetohex.py</code> は、Lottieファイルを16進配列に変換するために使用されます。 | |
− | |||
− | + | 例:<syntaxhighlight lang="C++" style="border:1px dashed gray;"> | |
− | <syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
./filetohex.py path / to / lottie.json> out.txt | ./filetohex.py path / to / lottie.json> out.txt | ||
</syntaxhighlight> | </syntaxhighlight> | ||
+ | |||
+ | |||
生データからアニメーションを作成するには: | 生データからアニメーションを作成するには: | ||
<syntaxhighlight lang="C++" style="border:1px dashed gray;"> | <syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
160行目: | 156行目: | ||
|- | |- | ||
| | | | ||
− | 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. | ||
− | | | + | |Lottieは標準的で一般的なフォーマットなので、ウェブ上で多くのアニメーションファイルを見つけることができます。 |
+ | |||
+ | |||
+ | 例: <nowiki>https://lottiefiles.com/</nowiki> | ||
+ | |||
− | + | また、Adobe After Effectsなどを使って、自分でアニメーションを作成することもできます。 | |
|} | |} | ||
:[[App:Library:LVGL:docs:3rd party libraries|戻る : Previous]] | :[[App:Library:LVGL:docs:3rd party libraries|戻る : Previous]] | ||
176行目: | 179行目: | ||
|- | |- | ||
| | | | ||
− | 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: | ||
<syntaxhighlight lang="C++" style="border:1px dashed gray;"> | <syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
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"); | ||
190行目: | 196行目: | ||
lv_rlottie_set_play_mode(lottie, LV_RLOTTIE_CTRL_PLAY | LV_RLOTTIE_CTRL_FORWARD); | lv_rlottie_set_play_mode(lottie, LV_RLOTTIE_CTRL_PLAY | LV_RLOTTIE_CTRL_FORWARD); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
+ | |||
+ | |||
The default animation mode is play forward with loop. | The default animation mode is play forward with loop. | ||
195行目: | 203行目: | ||
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. | ||
− | | | + | |LVGLはアニメーションモードを制御するために、<code style="color: #bb0000;">lv_rlottie_set_play_mode</code>と<code style="color: #bb0000;">lv_rlottie_set_current_frame</code>という2つの関数を提供しています。 |
− | <syntaxhighlight lang="C++" style="border:1px dashed gray;"> | + | |
+ | |||
+ | これらの例のように、最初のメソッドを呼び出すときに、あなたの意図を組み合わせることになります。<syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
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); | ||
211行目: | 221行目: | ||
デフォルトのアニメーションモードは、ループ再生です。 | デフォルトのアニメーションモードは、ループ再生です。 | ||
− | |||
− | + | ループを有効にしない場合、アニメーションがループせずにそれ以上進めなくなると、<code style="color: #bb0000;">LV_EVENT_READY</code>が送信されます。 | |
+ | |||
+ | |||
+ | アニメーションのフレーム数や現在のフレームインデックスを取得するには、<code style="color: #bb0000;">lv_obj_t</code> インスタンスを<code style="color: #bb0000;">lv_rlottie_t</code> インスタンスにキャストし、 <code style="color: #bb0000;">current_frame</code> と<code style="color: #bb0000;">total_frames</code> のメンバを検査することができます。 | ||
|} | |} | ||
:[[App:Library:LVGL:docs:3rd party libraries|戻る : Previous]] | :[[App:Library:LVGL:docs:3rd party libraries|戻る : Previous]] | ||
371行目: | 383行目: | ||
:: | :: | ||
:; <span style="background-color: #eeeeee;">size_t dest_frame</span> | :; <span style="background-color: #eeeeee;">size_t dest_frame</span> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
|} | |} | ||
2022年6月29日 (水) 17:37時点における最新版
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. |
LVGLでロッティアニメーションを使用できます。このベースリポジトリから取得
LVGLは、Samsung/rlottieライブラリのCAPIへのインターフェイスを提供します。つまり、実際のLottieプレーヤーはLVGLの一部ではなく、個別に構築する必要があります。 |
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 <nowiki>https://github.com/Samsung/rlottie.git</nowiki>
mkdir build
cd build
cmake ../rlottie
make -j
sudo make install
And finally add the On embedded systems you need to take care of integrating Rlottie to the given build system. |
SamsungのRlottieC++ 14互換コンパイラをビルドするには、オプションでCMake3.14以降が必要です。
デスクトップ上に構築するには、RlottieのREADMEの指示に従うことができます。最も基本的なケースでは、次のようになります。 mkdir rlottie_workdir
cd rlottie_workdir
git clone <nowiki>https://github.com/Samsung/rlottie.git</nowiki>
mkdirビルド
cdビルド
cmake ../rlottie
make -j
sudo make install
そして最後に、 組み込みシステムでは、Rlottieを特定のビルドシステムに統合する必要があります。 |
Usage
英文 | 自動翻訳 |
---|---|
You can use animation from files or raw data (text). In either case first you need to enable The |
ファイルや生データ(テキスト)からのアニメーションを使用することができます。
どちらの場合でも、まず オブジェクトの |
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");
|
ファイルからロッティアニメーションを作成するには、次のようにします。
lv_obj_t * lottie = lv_rlottie_create_from_file(parent、width、height、 "path / to / lottie.json");
|
Use Rlottie from raw string data
英文 | 自動翻訳 |
---|---|
./filetohex.py path/to/lottie.json > out.txt
extern const uint8_t lottie_data[];
lv_obj_t* lottie = lv_rlottie_create_from_raw(parent, width, height, (const char *)lottie_data);
|
./filetohex.py path / to / lottie.json> out.txt
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.
You can also create your own animations with Adobe After Effects or similar software. |
Lottieは標準的で一般的なフォーマットなので、ウェブ上で多くのアニメーションファイルを見つけることができます。
|
Controlling animations
英文 | 自動翻訳 |
---|---|
LVGL provides two functions to control the animation mode:
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);
If you don't enable looping, a To get the number of frames in an animation or the current frame index, you can cast the |
LVGLはアニメーションモードを制御するために、lv_rlottie_set_play_mode とlv_rlottie_set_current_frame という2つの関数を提供しています。
lv_obj_t * lottie = lv_rlottie_create_from_file(scr、128、128、 "test.json");
lv_obj_center(lottie);
//特定のフレームに一時停止します
lv_rlottie_set_current_frame(lottie、50);
lv_rlottie_set_play_mode(lottie、LV_RLOTTIE_CTRL_PAUSE); //指定したフレームが表示され、アニメーションが一時停止します
//逆方向に再生してループします
lv_rlottie_set_play_mode(lottie、LV_RLOTTIE_CTRL_PLAY | LV_RLOTTIE_CTRL_BACKWARD | LV_RLOTTIE_CTRL_LOOP);
// 1回前方に再生します(ループなし)
lv_rlottie_set_play_mode(lottie、LV_RLOTTIE_CTRL_PLAY | LV_RLOTTIE_CTRL_FORWARD);
デフォルトのアニメーションモードは、ループ再生です。
|
Example
英文 | 自動翻訳 |
---|---|
Load a Lottie animation from raw data |
|
Load a Lottie animation from a file |
API
英文 | 自動翻訳 |
---|---|
Enums enum lv_rlottie_ctrl_t
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
|
列挙型lv_rlottie_ctrl_t
機能 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) 変数 const lv_obj_class_t lv_rlottie_class struct lv_rlottie_t
|