Lottie 播放器¶
允许在 LVGL 中使用 Lottie 动画。基于此 基础仓库。
LVGL 提供了 Samsung/rlottie 库的 C API 接口。实际的 Lottie 播放器并不是 LVGL 的一部分,需要单独构建。
构建 Rlottie¶
构建 Samsung 的 Rlottie 需要支持 C++14 的编译器,并且可选地需要 CMake 3.14 或更高版本。
在桌面端构建时,可以按照 Rlottie README 中的说明操作。最基本的步骤如下:
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
最后,将 -lrlottie 标志添加到链接器中。
在嵌入式系统中,需要根据具体的构建系统集成 Rlottie。
使用方法¶
可以从文件或原始数据(文本)中使用动画。在任一情况下,首先需要在 lv_conf.h 中启用 LV_USE_RLOTTIE。
对象的 width 和 height 在 创建 函数中设置,动画将根据这些尺寸进行缩放。
从文件使用 Rlottie¶
要从文件创建 Lottie 动画,请使用:
lv_obj_t * lottie = lv_rlottie_create_from_file(parent, width, height, "path/to/lottie.json");
注意,Rlottie 使用标准的 STDIO C 文件 API,因此可以“正常”使用路径,不需要 LVGL 特定的驱动器字母。
从原始字符串数据使用 Rlottie¶
lv_example_rlottie_approve.c 包含一个以原始格式存储的示例动画。以下是存储 JSON 字符串为十六进制数组的原因:
避免在 JSON 文件中转义
"一些编译器不支持非常长的字符串
可以使用 lvgl/scripts/filetohex.py 将 Lottie 文件转换为十六进制数组。例如:
./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);
获取动画¶
Lottie 是一种标准且流行的格式,因此可以在网上找到许多动画文件。 例如:https://lottiefiles.com/
您还可以使用 Adobe After Effects 或类似软件创建自己的动画。
控制动画¶
LVGL 提供了两个函数来控制动画模式:lv_rlottie_set_play_mode 和 lv_rlottie_set_current_frame。
调用第一个方法时可以组合您的意图,例如:
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);
// 正向播放一次(不循环)
lv_rlottie_set_play_mode(lottie, LV_RLOTTIE_CTRL_PLAY | LV_RLOTTIE_CTRL_FORWARD);
默认的动画模式是 正向播放并循环。
如果未启用循环,当动画无法在不循环的情况下继续时,会发送 LV_EVENT_READY。
要获取动画的帧数或当前帧索引,可以将 lv_obj_t 实例转换为 lv_rlottie_t 实例,并检查其 current_frame 和 total_frames 成员。
示例¶
从原始数据加载 Lottie 动画¶
C code
GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_RLOTTIE
/**
* Load an lottie animation from flash
*/
void lv_example_rlottie_1(void)
{
extern const uint8_t lv_example_rlottie_approve[];
lv_obj_t * lottie = lv_rlottie_create_from_raw(lv_scr_act(), 100, 100, (const void *)lv_example_rlottie_approve);
lv_obj_center(lottie);
}
#else
void lv_example_rlottie_1(void)
{
/*TODO
*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_scr_act());
lv_label_set_text(label, "Rlottie is not installed");
lv_obj_center(label);
}
#endif
#endif
#!/opt/bin/lv_micropython -i
import lvgl as lv
import display_driver
#
# Load a lottie animation from flash
#
from lv_example_rlottie_approve import lv_example_rlottie_approve
lottie = lv.rlottie_create_from_raw(lv.scr_act(), 100, 100, lv_example_rlottie_approve)
lottie.center()
从文件加载 Lottie 动画¶
C code
GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_RLOTTIE
/**
* Load an lottie animation from file
*/
void lv_example_rlottie_2(void)
{
/*The rlottie library uses STDIO file API, so there is no driver letter for LVGL*/
lv_obj_t * lottie = lv_rlottie_create_from_file(lv_scr_act(), 100, 100,
"lvgl/examples/libs/rlottie/lv_example_rlottie_approve.json");
lv_obj_center(lottie);
}
#else
void lv_example_rlottie_2(void)
{
/*TODO
*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_scr_act());
lv_label_set_text(label, "Rlottie is not installed");
lv_obj_center(label);
}
#endif
#endif
#!/opt/bin/lv_micropython -i
import lvgl as lv
import display_driver
lottie = lv.rlottie_create_from_file(lv.scr_act(), 100, 100,"lv_example_rlottie_approve.json")
lottie.center()
API¶
Enums
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)¶
Variables
-
const lv_obj_class_t
lv_rlottie_class¶
-
struct
lv_rlottie_t¶