Lottie (lv_lottie)

Play vector animations in the Lottie format — like a modern mix of SVG and GIF.

Overview

The Lottie widget parses, rasterizes, and plays Lottie animations — vector animations that you can think of as a modern mix of SVG and GIF. Get them from sites like lottiefiles.com or build your own in tools like Adobe After Effects.

The widget is based on Canvas: each frame is rendered into a buffer that you provide.

Styling

• LV_PART_MAIN The background of the Lottie animation. The typical background style properties apply but usually it is left transparent.

Dependencies

The Lottie Widget uses the ThorVG library which is integrated into LVGL. In order to use Lottie animations LV_USE_THORVG_INTERNAL (to use the built-in ThorVG) or LV_USE_THORVG_EXTERNAL (to link it externally) needs to be enabled in lv_conf.h. For vector graphics in general LV_USE_VECTOR_GRAPHIC also needs to be enabled.

As ThorVG is written in C++, when using LV_USE_THORVG_INTERNAL be sure that you can compile the cpp files.

Set a buffer

In order to render the animation a buffer needs to be assigned to the Lottie Widget. The animations are rendered in ARGB8888 format, therefore the buffer's size should be equal to target_width x target_height x 4 bytes.

To keep the buffer size and the animation size consistent, the size of the Widget (i.e. the size of the animation) is set to the dimensions of the buffer internally.

The buffer can be set with either lv_lottie_set_buffer(lottie, w, h, buf) or lv_lottie_set_draw_buf(lottie, draw_buf).

When a draw buffer is used, it must be already initialized by the user with LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED color format.

Set a source

lv_example_lottie_approve.c contains an example animation. Instead of storing the JSON string, a hex array is stored for the following reasons:

• to avoid escaping " character in the JSON file, and
• some compilers don't support very long strings.

lvgl/scripts/filetohex.py can be used to convert a Lottie file to a hex array. E.g.:

./filetohex.py path/to/lottie.json --filter-character --null-terminate > out.txt

--filter-character filters out non-ASCII characters and --null-terminate makes sure that a trailing zero is appended to properly close the string.

To create an animation from data use

Lottie animations can be opened from JSON files by using lv_lottie_set_src_file(lottie, "path/to/file.json"). Note that the Lottie loader doesn't support LVGL's File System interface but a "normal path" should be used without a driver letter.

Get the animation

lv_anim_t * a = lv_lottie_get_anim(lottie)

returns the LVGL animation which controls the Lottie animation. By default it is running infinitely at 60FPS however the LVGL animation can be freely adjusted.

Examples

Load a Lottie animation from an array

Load a Lottie animation from file