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

Canvas player matte support #2004

Open malaykeshav opened 4 years ago

malaykeshav commented 4 years ago

Looking at the supported features list for the canvas player, the matte support is very limited. What is the future of this feature for the canvas player? Is this something that has a roadmap to be developed in the future? Or is this simply not possible to be implemented on the canvas player?

bodymovin commented 4 years ago

Hi, it's not on the pipeline for now. I think it would be doable using a buffer canvas and globalCompositeOperation, but it is probably not worth to implement because it would have a big performance impact as well as increase the library file size. Any reason why you don't use the svg renderer instead?

malaykeshav commented 4 years ago

Canvas player can be run on a worker thread with the help of an offscreencanvas thus allowing for a better performance on the main ui thread.

I am curious to know how the SVG renderer achieves the matte support? I would assume that the chrome API used by SVG, would be the same as the web canvas API; they are backed by the same SkCanvas internally in chrome.

bodymovin commented 4 years ago

it's probably leveraging lower level apis abstracted away as Mask svg elements

malaykeshav commented 4 years ago

Thanks. I will take a look into that and maybe see if something similar can be leveraged.

In the meantime, the list of canvas supported features says that the alpha inverted matte is supported. But when creating a simple animation, the results are incorrect. Is this a bug?

Sample animation: https://codepen.io/malaykeshavchromium/project/editor/AKmWQq#

Expected: https://skottie.skia.org/985f2566d7dd6921aec108a343e50089?h=1080&w=1920

bodymovin commented 4 years ago

Yes, it's a bug. Canvas doesn't support any kind of track masks

ape-casear commented 3 years ago

@malaykeshav Can you share about this offscreencanvas?

malaykeshav commented 3 years ago

@ape-casear You can build the lottie player for use in a worker thread. I am using it here: https://source.chromium.org/chromium/chromium/src/+/master:third_party/lottie/ However, that is version v5.5.2

If you want to use a newer version, you would have to use https://github.com/airbnb/lottie-web/blob/master/build/player/lottie_canvas_worker.js But since I haven't worked with the updated version, I don't know if it would work. It may have some minor bugs. You can give it a try.

andrei9669 commented 2 years ago

any update on this issue?

stepancar commented 1 year ago

@malaykeshav if I understand correctly, it was released recently

https://github.com/airbnb/lottie-web/pull/2917 https://jsfiddle.net/8zh4d6pr/3/