friday / lottie-node

Export lottie animations in Node.js
MIT License
56 stars 11 forks source link

Add examples(s) with replaceable content #4

Closed friday closed 3 years ago

friday commented 6 years ago

This library can be used to render Lottie animations with modifications (use animations as templates, allow users to make changes and render the result).

It would be useful to add this to the examples. I don't have any such animations that I can legally use, so contributions are welcome.

More info about how to replace content:

For texts, this is documented here: https://github.com/airbnb/lottie-web/wiki/TextLayer.updateDocumentData

I'm not aware about any official API to replace images. I have been able to use something like this (where data is an object literal containing the data.json-structure):

// Map of readable names
const paths = {file: 'p', folder: 'u', preserveAspectRatio: 'pr'};
// Filter out images
const images = (data.assets || []).filter(asset => asset[paths.folder]); // Only images have folders
// Change image path to empty string since we've flattened the folder structure
images.forEach(asset => {
  asset[paths.folder] = ''; // Set folder to the same directory as data.json
  asset[paths.file] = '/path/to/new/image'; // Override image
  asset[paths.preserveAspectRatio] = 'xMidYMid meet'; // "Contain" image, See https://github.com/airbnb/lottie-web/issues/1046
});

Note that this code is taken out of context and untested.

Possible animation which can be used: https://lottiefiles.com/53085-airplane-animation

friday commented 3 years ago

render-video-replacing-image.js now covers this well enough.