About Lottie
For recent years, modern UX has become more intuitive and simpler, concept of Micro Interaction has been introduced to various cases in multiple environments. In the meantime, Lottie which was named by AirBnB, came out as a new practical method to concrete those concepts. It's a sort of data format that contains visual shapes and animation metadata.
Basically, this Lottie file is composed by using JSON format, it contains visual shape information such as rectangle, circle, path and fill methods like the traditional vector graphics elements. It sounds same with SVG format but it could contain frame information for smooth animation. It defines various elements, properties and functionalities for constructing any kinds of complex designs and those data is hierarchically well constructed for run-time processing. That's one of major pros of the Lottie file.
The other big pros of the Lottie is that it could be extracted from Adobe After Effect(AE) using Bodymovin plug-in exporter. Since AE is the one of the most popular design tools these days among designers, there are fewer barriers to apply Lottie data to your application UIs if you have a hands-on develop team with interaction designers.
There is already a huge community placed for this Lottie since major platforms -Android, iOS, Windows(Xamarin), Reactive Native, etc- are supporting this one, even you can skim over show-cases through many examples in the Lottie Community
Lottie Animation
In this article, I don't intend to look in detail about Lottie since it's already popular and there are many online materials to learn about it. Instead, I'd like to introduce a new project rLottie which provides a platform independent standalone library for Lottie Animation.
rLottie: a platform independent standalone library for Lottie Animation
Basically, rLottie is a portable library for working on POSIX standard Operating Systems, it's implemented in C++ programming language, partially copied several existing open-source code. It is consisted of four sub parts to build it up.
- Lottie Animation: Animation Controller (API Set)
- Rapid JSON: Fast JSON lexing and parsing for constructing scene data tree
- Scene Renderer: Scenge-Graph frame data generator
- Vector Rasterizer: Software rasterizer engine utilizing pixman + freetype + stb
This library is designed to generate Lottie Animation frame data as a result. User could use Animation Controller(a convenient API set) to load Lottie file and control its animation frames. rLottie does not only provide C++ interfaces but C porting layer API set as well. Currently, the library returns RGBA 32bits bitmap or scene-graph node tree as the output. The output format could be chosen by user demands. Normally, your system could obtain frame image data from rLottie then could display it as a single image. If your system has own decent vector rasterizer, you can pick up scene-graph node tree from rLottie then rasterizing them using your own vector renderer after interpreting node data.
rLottie utilizes an open-source, Rapid JSON to build up the data model tree from json files. This project is one of Tencent's, provide fast scanner to parse Lottie data. rLottie reads json files and constructs model tree that is described by Bodymovin before scene renderer. The data model is based on the design properties and functionalities specified by After Effect.
Lottie Data Model Tree
From the Lottie model data, rLottie translates it to a scene-graph tree data which represents a frame data of the Lottie animation. The scene-graph would be updated for a certain frame by a request, compute and remap properties so as to prepare drawing for a next step. Then vector rasterizer actually do this drawing tasks. A little bit abstracted description here, but anyhow, all this sequences of internal rLottie from the API calls would be performed asynchronously(or sync optionally) to avoid any blocking from the application procedure cycle. It uses task scheduler internally for doing this. It would help for application performance.
Rendering performing on multi-tasks scheduler
How to start?
Since this rLottie is an open-source project, you can freely join this project, if you are interested in. Of course, you could download software and use it as your demand. Here is the github: https://github.com/Samsung/rlottie
You could download source code and build it using meson build system. (Please read README for more details)
|
$ meson . build $ (sudo) ninja -C build install |
Now, here is a quick guide for starters for launching a useful example. You can see an example app from here: rlottie/build/example/lottieviewer. However, current sample requires EFL(Enlightenment Foundation Libraries) for building up a single launch-able app. If you want to launch examples, you must install EFL library. (Download: https://download.enlightenment.org/rel/libs/efl/efl-1.21.1.tar.xz) For more details about EFL installation, please see: https://www.enlightenment.org/download. Once you finished compiling the example, you can see a lot of Lottie examples by rLottie.
For the case if you are trying to use this rLottie immediately, here shows a basic usage of rLottie APIs. In this case, it brings you C++ version only.
using namespace rlottie; //Open "example.json" file Animation *animation = loadFromFile("example.json"); //Animation time in seconds. This may useful to decide current pos value in your system. double duration = animation->duration(); /* Decide which frame you'd like to show in this lottie animation. this pos is normalized 0 ~ 1. 0 is the first frame of animation, 1 is the last frame. this API returns the exact frame number from the given normalized value. */ size_t frame = animation->frameAtPos(pos); /* Prepare a surface data to obtain current animation frame image. Actual source(buffer) for Surface must be suggested by your system. size_t width = 400; size_t height = 400; size_t bytesPerLine = width * sizeof(uint32_t); uint32_t *buffer = calloc(bytesPerLine * height, sizeof(uint32_t)); */ Surface surface = Surface(buffer, width, height, bytesPerLine); //Request to draw current frame to a surface. After this, you could access current frame image from "buffer" animation->renderSync(frame, surface); //For more, please check rlottie/inc/rlottie.h or rlottie_capi.h |