ESP32-LVGL 开发笔记（四）：Lottie 动画

notice：lottie 是在lvgl9 引入的，请确认版本

有关 lottie 的简单介绍，截取至 lvgl 文档：

The Lottie animations are vector-based animations. Think of them as the modern combination of SVG and GIF.
Lottie 动画是基于矢量的动画。你可以把它们想象成 SVG 和 GIF 的现代结合。

目标

• 使用 lottie 组件

配置

lottie 组件依赖的内容比较多，需要配置一下内容
lv_config.h
搜索相关宏定义并启用

#define LV_USE_THORVG_INTERNAL 1
#define LV_USE_VECTOR_GRAPHIC  1
#define LV_USE_MATRIX           1
#define LV_USE_FLOAT            1
#define LV_USE_LOTTIE     1

• lottie 组件依赖 ThorVG 库，我们可以直接使用 lvgl 内部集成的
• ThorVG 库是用 C++ 写的，需要确认能够编译 c++ 文件

sdkconfig
我自己编译时不开启 RSRAM 会跑飞，但是之前的项目明明也没事🤔
Flash 顺手也配了

1. Flash 配置
   

Flash SPI mode：DIO(双线)、QIO(四线传输)
Flash size：根据自己的设备调整，比如我的是 esp32s3-n16r8
也就是 16MB 的 flash，8MB 的PSRAM

2. RSRAM配置
   

3. LVGL 配置
   开启与 lottie 相关的 lvgl 第三方库
   

运行demo

1. 拷贝 demo
   lvgl 官方提供了两个示例

• Load a Lottie animation from an array - 数组加载
• Load a Lottie animation from file - 文件加载
  • 这个示例我没跑通，可能是 JSON 没处理
    相关示例可以在官网找，也可以在组件库里找
• 官网 - Load a Lottie animation from an array
• 组件路径

managed_components\lvgl__lvgl\examples\widgets\lottie

创建 02_lottie.c、02_lottie.h
复制一下代码

void lv_example_lottie_1(void)
{
    extern const uint8_t lv_example_lottie_approve[];
    extern const size_t lv_example_lottie_approve_size;

    lv_obj_t * lottie = lv_lottie_create(lv_screen_active());
    lv_lottie_set_src_data(lottie, lv_example_lottie_approve, lv_example_lottie_approve_size);

#if LV_DRAW_BUF_ALIGN == 4 && LV_DRAW_BUF_STRIDE_ALIGN == 1
    /*If there are no special requirements, just declare a buffer
      x4 because the Lottie is rendered in ARGB8888_PREMULTIPLIED format*/
    static uint8_t buf[64 * 64 * 4];
    lv_lottie_set_buffer(lottie, 64, 64, buf);
#else
    /*For GPUs and special alignment/strid setting use a draw_buf instead*/
    LV_DRAW_BUF_DEFINE_STATIC(draw_buf, 64, 64, LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED);
    lv_lottie_set_draw_buf(lottie, &draw_buf);
#endif

    lv_obj_center(lottie);
}

lv_example_lottie_approve 和 lv_example_lottie_approve_size 如果前面配置正确的话，可以加载到，就不复制了
2. 运行示例
照例配置好 CMakeLists.txt，在 main.c 中调用
效果展示