search

airbnb / lottie-web

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

Animation has strange artifacts when rendering with canvas renderer #3051

Open CaptainStiggz opened 9 months ago

CaptainStiggz commented 9 months ago

I have a Lottie animation that I want to render using the canvas renderer, instead of the SVG renderer for performance reasons. The SVG renderer produces the expected output, but the canvas renderer produces some strange artifacts. For this animation in particular, it produces a thin red line around the primary animated shapes. I've attached a few screenshots, as well as the lottie JSON.

I've tried this both using lottie-react and @dotlottie/react-player, both of which use lottie-web under the hood. I've seen similar artifacts in some of my other animations, but this one is the most consistent and most apparent.

The Lottie plugin in after effects doesn't show any compatibility errors.

Canvas (you need to look quite carefully on the black background):

Screenshot 2023-12-07 at 12 47 32 PM Screenshot 2023-12-07 at 12 56 22 PM

SVG:

Screenshot 2023-12-07 at 12 47 51 PM

VA_101A_lottie_logo_stacked_outline_mono_in-3.json

Edit:

This appears to be an issue with masks in the canvas renderer. The mask works, it just shows this strange outline.

Tell us about your environment This issue appears on both chrome and safari.

What did you do? Please explain the steps you took before you encountered the problem. Just rendering a Lottie animation in a canvas.

What did you expect to happen? SVG renderer and canvas renderer produce the same output.

michaelperssonFI commented 9 months ago

+1. I have the same issue. Complex animation that works fine in the SVG renderer and produces weird render borders around (some of, but not all of) the rotating and scaling elements in the Canvas renderer.

lxrcan commented 7 months ago

I looked through the json and found a shape layer that has a red fill.

"k": [1, 0.235294132607, 0, 1]

"Layer 9 Outlines 6" acts as an Alpha Matte ("tt: 1") for: "Layer 21/visualelectric_logo_13 Outlines 2", which means the latter's visibility is influenced by the former's shape and opacity.

As the red circle scales up, the logo is revealed. but the setup can be improved...

what you can see is that the last value in the 'k' parameter is 1, so its alpha is set to 100. if we change that to 0 and then make the RBG values 0,0,0 then this should make that problem go away in most situations.

[Uploading VA_101A_lottie_logo_stacked_outline_mono_in-3.json…]()

seems like a bug with how the alpha matte renders...