lottie-web
lottie-web copied to clipboard
How to get relative position/rotation/scale of an element with an Id when using Canvas renderer
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
-
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)
-
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 :
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.