airbnb / lottie-web

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

How to get relative position/rotation/scale of an element with an Id when using Canvas renderer #3019

Open Tarks opened 11 months ago

Tarks commented 11 months ago

I'm looking to use a Lottie animation inside of Babylon. I know there's a Babylon player for Lottie files but it doesn't cover my use case.

I'd like to dynamically attach elements to named (#IdName) shapes in a Lottie animation. This is so that we can add accessories like sunglasses etc to our character

1) If I use the SVGRenderer I can query and attach new SVG elements to the animation and they animate perfectly, however I have no way of rendering that animation with the additional elements to a canvas element (not functionality that's offered by the browser)

2) If I use the built in Canvas renderer I can't seem to be able to query the current position/rotation/scale of any of the shapes, they're just all rasterized to the canvas

I thought about running the animation in both rendering modes and each frame getting the offset, or somehow being able to add in the new elements before the animation is loaded and raserized but keen to hear thoughts

For reference : image

I'm intending to attach some accessories like sunglasses to the character at the right position, have the animations play and update the accessories automatically, then render that in the 3d space.