rlottie is a platform independent standalone c++ library for rendering vector based animations and art in realtime.
Lottie loads and renders animations and vectors exported in the bodymovin JSON format. Bodymovin JSON can be created and exported from After Effects with bodymovin, Sketch with Lottie Sketch Export, and from Haiku.
For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand. Since the animation is backed by JSON they are extremely small in size but can be large in complexity!
Here are small samples of the power of Lottie.
- Swift
- Building Lottie
- Demo
- Previewing Lottie JSON Files
- Quick Start
- Dynamic Property
- Supported After Effects Features
- Issues or Feature Requests?
Use Swift Package Manager for adding RLottie as dependency:
.package(name: "RLottie", url: "https://github.com/antonsergeev88/rlottie.git", from: "0.1.0")
Render frame in buffer:
import RLottie
let animationData = Data(/*get animation data*/)
var buffer = Data(count: 100 * 100 * 4)
guard let animation = Animation(data: animationData) else {
return
}
animation.render(frame: 5, into: &buffer, width: 100, height: 100)
rottie supports meson and cmake build system. rottie is written in C++14
. and has a public header dependancy of C++11
install meson and ninja if not already installed.
Run meson to configure rlottie
meson build
Run ninja to build rlottie
ninja -C build
Install cmake if not already installed
Create a build directory for out of source build
mkdir build
Run cmake command inside build directory to configure rlottie.
cd build
cmake ..
# install in a different path. eg ~/test/usr/lib
cmake -DCMAKE_INSTALL_PREFIX=~/test ..
Run make to build rlottie
make -j 2
To install rlottie library
make install
Configure to build test
meson configure -Dtest=true
Build test suit
ninja
Run test suit
ninja test
If you want to see rlottie librray in action without building it please visit rlottie online viewer
While building rlottie library it generates a simple lottie to GIF converter which can be used to convert lottie json file to GIF file.
Run Demo
lottie2gif [lottie file name]
Please visit rlottie online viewer
rlottie online viewer uses rlottie wasm library to render the resource locally in your browser. To test your JSON resource drag and drop it to the browser window.
Lottie loads and renders animations and vectors exported in the bodymovin JSON format. Bodymovin JSON can be created and exported from After Effects with bodymovin, Sketch with Lottie Sketch Export, and from Haiku.
You can quickly load a Lottie animation with:
std::unique_ptr<rlottie::Animation> animation =
rlottie::loadFromFile(std::string("absolute_path/test.json"));
You can load a lottie animation from raw data with:
std::unique_ptr<rlottie::Animation> animation = rlottie::loadFromData(std::string(rawData),
std::string(cacheKey));
Properties like frameRate
, totalFrame
, duration
can be queried with:
# get the frame rate of the resource.
double frameRate = animation->frameRate();
#get total frame that exists in the resource
size_t totalFrame = animation->totalFrame();
#get total animation duration in sec for the resource
double duration = animation->duration();
Render a particular frame in a surface buffer immediately
with:
rlottie::Surface surface(buffer, width , height , stride);
animation->renderSync(frameNo, surface);
Render a particular frame in a surface buffer asyncronousely
with:
rlottie::Surface surface(buffer, width , height , stride);
# give a render request
std::future<rlottie::Surface> handle = animation->render(frameNo, surface);
...
#when the render data is needed
rlottie::Surface surface = handle.get();
You can update properties dynamically at runtime. This can be used for a variety of purposes such as:
- Theming (day and night or arbitrary themes).
- Responding to events such as an error or a success.
- Animating a single part of an animation in response to an event.
- Responding to view sizes or other values not known at design time.
To understand how to change animation properties in Lottie, you should first understand how animation properties are stored in Lottie. Animation properties are stored in a data tree that mimics the information heirarchy of After Effects. In After Effects a Composition is a collection of Layers that each have their own timelines. Layer objects have string names, and their contents can be an image, shape layers, fills, strokes, or just about anything that is drawable. Each object in After Effects has a name. Lottie can find these objects and properties by their name using a KeyPath.
To update a property at runtime, you need 3 things:
- KeyPath
- rLottie::Property
- setValue()
A KeyPath is used to target a specific content or a set of contents that will be updated. A KeyPath is specified by a list of strings that correspond to the hierarchy of After Effects contents in the original animation. KeyPaths can include the specific name of the contents or wildcards:
- Wildcard *
- Wildcards match any single content name in its position in the keypath.
- Globstar **
- Globstars match zero or more layers.
rLottie::Property
is an enumeration of properties that can be set. They correspond to the animatable value in After Effects and the available properties are listed below.
enum class Property {
FillColor, /*!< Color property of Fill object , value type is rlottie::Color */
FillOpacity, /*!< Opacity property of Fill object , value type is float [ 0 .. 100] */
StrokeColor, /*!< Color property of Stroke object , value type is rlottie::Color */
StrokeOpacity, /*!< Opacity property of Stroke object , value type is float [ 0 .. 100] */
StrokeWidth, /*!< stroke with property of Stroke object , value type is float */
...
};
setValue()
requires a keypath of string and value. The value can be Color
, Size
and Point
structure or a function that returns them. Color
, Size
, and Point
vary depending on the type of rLottie::Property
. This value or function(callback) is called and applied to every frame. This value can be set differently for each frame by using the FrameInfo
argument passed to the function.
animation->setValue<rlottie::Property::FillColor>("**",rlottie::Color(0, 1, 0));
animation->setValue<rlottie::Property::FillColor>("Layer1.Box 1.Fill1",
[](const rlottie::FrameInfo& info) {
if (info.curFrame() < 15 )
return rlottie::Color(0, 1, 0);
else {
return rlottie::Color(1, 0, 0);
}
});
Shapes | Supported |
---|---|
Shape | π |
Ellipse | π |
Rectangle | π |
Rounded Rectangle | π |
Polystar | π |
Group | π |
Trim Path (individually) | π |
Trim Path (simultaneously) | π |
Renderable | Supported |
Fill | π |
Stroke | π |
Radial Gradient | π |
Linear Gradient | π |
Gradient Stroke | π |
Transforms | Supported |
Position | π |
Position (separated X/Y) | π |
Scale | π |
Skew | βοΈ |
Rotation | π |
Anchor Point | π |
Opacity | π |
Parenting | π |
Auto Orient | π |
Interpolation | Supported |
Linear Interpolation | π |
Bezier Interpolation | π |
Hold Interpolation | π |
Spatial Bezier Interpolation | π |
Rove Across Time | π |
Masks | Supported |
Mask Path | π |
Mask Opacity | π |
Add | π |
Subtract | π |
Intersect | π |
Lighten | βοΈ |
Darken | βοΈ |
Difference | βοΈ |
Expansion | βοΈ |
Feather | βοΈ |
Mattes | Supported |
Alpha Matte | π |
Alpha Inverted Matte | π |
Luma Matte | π |
Luma Inverted Matte | π |
Merge Paths | Supported |
Merge | βοΈ |
Add | βοΈ |
Subtract | βοΈ |
Intersect | βοΈ |
Exclude Intersection | βοΈ |
Layer Effects | Supported |
Fill | βοΈ |
Stroke | βοΈ |
Tint | βοΈ |
Tritone | βοΈ |
Levels Individual Controls | βοΈ |
Text | Supported |
Glyphs | βοΈ |
Fonts | βοΈ |
Transform | βοΈ |
Fill | βοΈ |
Stroke | βοΈ |
Tracking | βοΈ |
Anchor point grouping | βοΈ |
Text Path | βοΈ |
Per-character 3D | βοΈ |
Range selector (Units) | βοΈ |
Range selector (Based on) | βοΈ |
Range selector (Amount) | βοΈ |
Range selector (Shape) | βοΈ |
Range selector (Ease High) | βοΈ |
Range selector (Ease Low) | βοΈ |
Range selector (Randomize order) | βοΈ |
expression selector | βοΈ |
Other | Supported |
Expressions | βοΈ |
Images | π |
Precomps | π |
Time Stretch | π |
Time remap | π |
Markers | π |
File github issues for anything that is broken. Be sure to check the list of supported features before submitting. If an animation is not working, please attach the After Effects file to your issue. Debugging without the original can be very difficult. For immidiate assistant or support please reach us in Gitter