lottiefy
A toolkit to customize Lottie renderer. Demo here: https://pd4d10.github.io/lottiefy/
Motivation
Lottie is a solution to transform Adobe After Effects animations directly to code. It already has web, Android and iOS renderers. But Sometimes we need more control. For example, developers may want to render Lottie to other engines, like Cocos2d-x and PixiJS. With lottiefy, you can customize your own renderer in these cases.
Notice: It is 0.x currently, and may have breaking changes in future. Please submit an issue if something went wrong.
Use cases
- lottie-cocos2dx: Render Lottie to Cocos2d-x(JS binding)
- lottie-cocos2dx-lua Generate Lua code to render Lottie to Cocos2d-x(Lua binding)
- lottie-pixi: Render Lottie to PixiJS [Work in progress]
- ...
Installation
Install via NPM:
npm install --save lottiefy
Or just use UMD bundle via script
tag:
Usage
const renderer = animationData: {} // JSON data exported by Bodymovin containerId: '' // The id of container to render actions: { // Specify how to create a precomp // ... } { // Specify how to create an image // ... } // ... // List of all actions: // https://github.com/pd4d10/lottiefy/blob/master/src/types.ts#L53 // Notice that all actions should be specified to make it works correctly // Some engines like Cocos2d-x have opposite Y coordinate with Adobe After effects // Set reverseY to true in these cases, default is false reverseY: false // Set animation speed speed: 1 // Call generateAnimations to run all actionsrenderer
Roadmap
- Precomp
- Image
- Shape
- Effect
- ...
License
MIT