search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.54k stars 2.87k forks source link

How to get all the frames in canvas renderer ? #2652

Open anilsoniaurionpro opened 3 years ago

anilsoniaurionpro commented 3 years ago

I'm trying to get all the rendered frames. to build a mp4 video I've tried enterFrame event but it doesn't return all the frames and it seems that it's dependent on canvas dimensions also. If the canvas size is big, fewer enterFrames are invoked.

I've tried to manually loop thru all frame numbers and invoke goToAndStop, but it doesn't work immediately.

Is there a way to get all the frames in the browser (no server side)?

bodymovin commented 3 years ago

hi, using goToAndStop should be the right solution. What do you mean by it doesn't work immediately?

anilsoniaurionpro commented 3 years ago

hi, using goToAndStop should be the right solution. What do you mean by it doesn't work immediately?

When I autoplay the animation and rely on enterFrame event , significant no of frames gets skipped.

When I loop through frames numbers and rely on goToAndStop, Lottie doesn't immediately do that (probably queue up or was not ready yet). But If I wait for few seconds before starting this whole process of capturing frames, goToAndStop works great (don't know why ?).

data_ready hook is where I start iterating and capturing frames.

bodymovin commented 3 years ago

you can try the DOMLoaded event, that should indicate that everything has been loaded.