search

CommunityToolkit / Lottie-Windows

Lottie-Windows is a library (and related tools) for rendering Lottie animations on Windows 10 and Windows 11.
https://aka.ms/lottiedocs
Other
638 stars 78 forks source link

Investigate path direction + fill-rule #124

Closed FrayxRulez closed 4 years ago

FrayxRulez commented 5 years ago

The library has some issues with the rendering order for this animation. Tried with a few other libraries (iOS, Android, Qt, Skia, Web) and they all process it correctly. Tried quite hard to fix this by myself but I didn't succeed at all 😁

Json file here: test_animation.json

Expected result: immagine

Actual result: immagine

sohchatt commented 5 years ago

@FrayxRulez thanks for the bug report. Do you have the AEP file as well? Or any other lottie JSON files that also demonstrate the same incorrect behavior?

Reducing these animations to a minimal repro is a struggle across all Lottie implementations at present.

FrayxRulez commented 5 years ago

I have a minimalized version of the same animation, with just head shape and eyes: minimal.json

simeoncran commented 5 years ago

I see that we're painting in the wrong order, but I'm having trouble figuring out what the correct order should be. In your minimal.json, layer indexes are: 21 - shoulders 20 - head 25 - eye 26 - eye Currently we draw in decreasing order of index, but doing that for minimal.json draws the eyes before the head. I'm wondering if maybe this isn't a problem with order, but with a mask or a matte or a blend or something that should allow the eyes to show through from behind. There's definitely something special about your file, I'm just not sure what it is yet!

Can you give me any more hints. Breaking it down further to just the head and the eyes would help although I can do that myself with some effort on the JSON. Even better would be an AEP of the minimalized JSON.

NikhStash commented 5 years ago

I am facing a similar problem The following screenshots though might appear different are the same one from Web, other from Windows app.

Web Screenshot (47)

Windows Screenshot (46)

It works properly in Web, IOS and android.

sohchatt commented 5 years ago

@NikhStash thanks for the repro; will take a look.

sohchatt commented 5 years ago

@NikhStash can you re-attach your json file? I'm not sure if it disappeared or if I missed it in the first place.

NikhStash commented 5 years ago

In Web: (Expected Beahavior) Screenshot (47)

In Windows: Screenshot (46)

Here is the json file for this pwl_pushnotification.zip

NikhStash commented 5 years ago

Are any steps being taken on this, if so any info on when this can be cleared!

sohchatt commented 5 years ago

@NikhStash: I pushed the latest changes in master to the Lottie Viewer app a couple of days ago. Can you try it out? Your issue does not repro (even though your file results in warnings) / has been fixed.

The changes in master will be published in version 6.0, which should be released in about a month. If you want the fix earlier, you can grab the nuget from Azure DevOps here.

sohchatt commented 5 years ago

I've finally managed to reduce @FrayxRulez's animation to a minimal repro with a single shape group that is stacked as follows:

  1. Path for left eye socket
  2. Path for face
  3. Yellow Fill

The expected outcome is:

minimal_repro

where the eye socket is actually transparent (white background).

layertest.zip

NikhStash commented 5 years ago

Thanks, @sohchatt. It was not working in the previous build, but it is working perfectly in the latest build that you have specified.

NikhStash commented 4 years ago

@NikhStash: I pushed the latest changes in master to the Lottie Viewer app a couple of days ago. Can you try it out? Your issue does not repro (even though your file results in warnings) / has been fixed.

The changes in master will be published in version 6.0, which should be released in about a month. (https://dev.azure.com/dotnet/WindowsCommunityToolkit/_build/results?buildId=20753&view=artifacts).

I have installed 6.0 version but it doesn't work. In this version, the screen is completely blank. It doesn't even show the faulted UI. Could you please share the working build again. And when can I expect a proper build.

FrayxRulez commented 4 years ago

I actually had to move away from this library and I made my own porting of rlottie using Win2D.

NikhStash commented 4 years ago

Actually @FrayxRulez I was asking @sohchatt . Sorry for the confusion. @sohchatt If you don't remember what I'm talking please refer: https://github.com/windows-toolkit/Lottie-Windows/issues/124#issuecomment-525809623

I have installed 6.0 version but it doesn't work. In this version, the screen is completely blank. It doesn't even show the faulted UI. Could you please share the working build again. And when can I expect a proper build.

sohchatt commented 4 years ago

@ajbennet / @scott-moore-ms / @simeoncran should be able to help you.

ajbennet commented 4 years ago

Thanks @sohchatt for looping us in. @NikhStash, we are looking into this. Will keep you posted as soon as we know. Thanks.

NikhStash commented 4 years ago

Thank you @ajbennet. Please let me posted.

NikhStash commented 4 years ago

@ajbennet any update on the issue.

simeoncran commented 4 years ago

@NikhStash this is working for me on the 6.1 preview code. Can you try it?

simeoncran commented 4 years ago

Closing this for now because I think this is working now. The original FrayxRulez issue has also been solved. This is still one remaining issue for the FrayxRulez file due to multiple animated, which we will work on separately. Please reopen if you are still seeing issues.

simeoncran commented 4 years ago

And the one remaining issue is fixed with: https://github.com/windows-toolkit/Lottie-Windows/pull/274.