friday / lottie-node Goto Github PK

Moving to 2.0.0.
Running the lottie-node examples produces blank images and videos.
Previously this happened when replacing images, but is now happening for all examples.

Expected behavior

Images and videos produced contain content

Actual behavior

Videos produced are blank, white background throughout without content

Steps to reproduce

• Clone git
• Install dependencies
• Run examples e.g. 'node render-video.js lottie-logo2.json logo.mp4'

Environment

• Versions:

  • lottie-node: 2.0.0
  • lottie-web: 5.7.8
  • node-canvas: 2.7.0
  • jsdom: 16.5.2
  • Node.js: 14.16.1

• Operating System:

Ubuntu 20.04, Windows 10 and MacOS 10.15.7

Seeing the recent updates in node-canvas and jsdom. Can you make lottie animations in svg work?

The animation used in the example render is credited as "an animation from lottie-react-native", since I found it in that repo. It may not be significant or enough information for credits and from legal/licencing-aspects.

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

node-canvas v2 has been released, and jsdom-support is coming. This may not affect this repo since v2 is primarily about font rendering, and lottie uses glyphs. Testing is needed however, and the version strings used may need to be restricted.

Expected behavior

render-snapshot.js runs correctly

Actual behavior

script fails on window.lottie.loadAnimation with this error:

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'loadAnimation' of undefined
at /Users/meo/node_modules/lottie-node/index.js:63:24
at /Users/meo/Downloads/render-snapshot.js:11:21

which means that eval didn't create lottie object

Steps to reproduce

node render-snapshot.js test.json test.png

Environment

• Versions:

  • lottie-node: 2.0.0
  • lottie-web: 5.9.6
  • node-canvas: 2.10.1
  • jsdom: 20.0.0
  • Node.js: 14.15.1

• Operating System: MacOS 11.1

Tried also on an Azure Function with linux and Node 12.22.11 (different version of jsdom too, 19.0.0) and reported exaxtly the same error

Full stack trace or any errors

(node:55203) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'loadAnimation' of undefined
at /Users/meo/node_modules/lottie-node/index.js:63:24
at /Users/meo/Downloads/render-snapshot.js:11:21
(Use node --trace-warnings ... to show where the warning was created)
(node:55203) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:55203) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Link to where the bug is happening

render-snapshot.js

I'm using this file that rendering blank video

Tests are always good. Optimally the lottie-node API should be fully covered, but since it's kind of a niche library and I don't even have After Effects myself (I'm running Linux) I'm blocked by #4.

Example of tests that should be possible:

• Check the hash of an output (this type of test can be prone to false positives, for example if node-canvas makes changes to antialiasing or font kerning)
• Check the color of a specific pixel of a PNG export.

See https://github.com/friday/lottie-node#usage

There are ways to avoid the wrapper. I can't really recall why I wrote it the way I did.

Ex:

const loadAnimation = require('lottie-node');
const loadAnimationWithCustomLottie = require('lottie-node').factory('/path/to/lottie');

Or:

const {loadAnimation} = require('lottie-node');
const loadAnimationWithCustomLottie = require('lottie-node')('/path/to/lottie');

hey @friday thanks for putting your code here. This is a great way to create templates and render on the server.
The problem i have is that if I chose canvas as renderer, I am not able to change text on runtime as it converts text to glyphs and during template creation i am not sure of what all characters to put in hidden layer as suggested by bodymovin. Also there is some issue with masking but that can be taken of during creation.

And if i chose svg as renderer, i cannot export frames as png (i can export them as svg though) on nodejs.

let data = "data:image/svg+xml;base64,";
            let svgString = anim.renderer.svgElement.outerHTML;
            let base64 = window.btoa(svgString);
            let dataURI = data + base64;

Now if i use img onload method to actually use this dataURI as source for image i get error.

Also wanted to know what actually context in rendererSettings does in loadAnimation. Does it writes to the context of canvas on its own? I am not sure how it works.

Any help would be appreciated. thanks again for sharing your library.