Lottie is a AE render library for Node.js that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on web.
Lottie-node is an API for runnig Lottie with the canvas renderer in Node.js, with the help of node-canvas. This is intended for rendering Lottie animations to images or video.
Lottie-node is transplanted from lottie-web, so its api is exactly the same as lottie-web. View documentation, FAQ, help, examples, and more at lottie-web.
# with npm
npm install lottie-nodejsOh, I don't have a built-in node-canvas library by default, you can import it externally and pass it in. This design is mainly for use in conjunction with FFCreator.
- Import lottie-nodejs and node-canvas libraries.
- Set up Canvas class for lottie-nodejs.
- Create a Canvas instance for rendering.
- Lottie loads the animation file and initializes it.
- Use timer to render lottie framed animation.
- Render and save the image to the local, or other operations.
// 1. Import lottie-nodejs and node-canvas libraries
const lottie = require('lottie-nodejs');
const { Canvas, Image } = require('canvas');
// 2. Set up Canvas class for lottie-nodejs
lottie.setCanvas({
Canvas,
Image,
});
// 3. Create a Canvas instance for rendering
const canvas = new Canvas(500, 500);
// 4. Lottie loads the animation file and initializes it
const anim = lottie.loadAnimation({
container: canvas,
loop: false,
path: path.join(__dirname, './assets/data.json'),
// animationData: data
});
// 5. Use timer to render lottie framed animation
setInterval(() => {
anim.render();
// 6. Render and save the image to the local, or other operations
const buffer = canvas.toBuffer('image/png');
const file = path.join(__dirname, `./output/imgs/${index++}.png`);
fs.outputFile(file, buffer);
}, 1000 / 30);anim.goToAndStop(25, true);
anim.onEnterFrame(...);- Modify the Text in the lottie json data.
anim.replaceText('_xxx_', 'hello world');- Modify the Image in the lottie json data.
// param: id, newpath
anim.replaceAsset(17, path.join(__dirname, 'xx.jpg'));- Use lottie-api for more advanced modifications. https://github.com/bodymovin/lottie-api
const elements = anim.getApi().getKeyPath('comp1,textnode');
elements.getElements()[0].setText('hahahahah!');
// or
const elements = anim.findElements('comp1,textnode');
elements[0].setText('hahahahah!');Clone the project and install related dependencies
git clone https://github.com/drawcall/lottie-node.git- Modify the demo/index.js file and modify the values of i and j to view the demo.
// i from 1 to 4 [1-4]
const i = 2; // floder
// j from 1 to 20 [1-20]
const j = 9; // file
const num = 50;
const delta = 33 * 4;- Run the demo script.
npm run demo- Install the
servepackage globally
npm i -g serve- Execute serve and view the corresponding demo html
modify the values of i and j to view the demo
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent