Lottie-ios: Wrong Gradients & Bad Performance when showing them

[Rapsssito]

I am experiencing 1 FPS on UI when more than one animation with gradients is being reproduced on iOS. After some profiling, turns out that CGContextDrawLinearGradient is taking more than 90% of CPU time. Is there a missing swift optimization?
Furthermore, it looks like some gradients are not shown completely. I have attached a JSON that shows both errors.

Check these before submitting:

• [x] The issue doesn't involve an Unsupported Feature
• [x] This issue isn't related to another open issue

This issue is a:

• [x] Non-Crashing Bug (Visual or otherwise)

Which Version of Lottie are you using?

Lottie 3.0

What Platform are you on?

• [x] iOS

What Language are you in?

• [x] Swift

Expected Behavior

Actual Behavior

_Note the white corner on the bottom left._

Animation JSON

Animation JSON

This might be related to this issue: https://github.com/airbnb/lottie-ios/issues/895

[buba447]

You are experiencing two issues here.

1. The gradient is correctly displaying, its the shape that the gradient is filling that is incorrect. How is this shape being created? Is it a polygon with rounded corners or a shape layer?
2. The gradient performance is slow, drawing gradients is expensive, but 1fps makes me think something else is wrong. Mind sharing the after effects file so I can debug when I have time?

[Rapsssito]

@buba447, I think the issue is indeed related to the gradient generation. I have attached my AE file. It has three compositions, all look the same except for the gradient colors, but only the composition _"comp 2"_ shows this issue.
menuMainButton.zip

[buba447]

I will look at this over the weekend!

On Nov 21, 2019, at 6:16 PM, Rapsssito [e-mail] wrote:


I think the issue is indeed related to the gradient generation. I have attached my AE file. It has three compositions, all look the same except for the gradient colors, but only the composition "comp 2" shows this issue.
menuMainButton.zip

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

[Rapsssito]

Thank you! If you need anything from my end, tell me.

[buba447]

@Rapsssito You were correct! There is a bug with gradient rendering. Looking for a fix. Will update with PR.

[Rapsssito]

Thank you!

[buba447]

I found the issue with your animation! After a lot of debugging I discovered that the gradient had two colors at the same position in after effects. If you open the gradient editor you and drag the start color you will see that there are actually three colors on top of each other:

In after effects:

And the decoded locations:

Core Graphics apparently bugs out if two colors occupy the same location. I could add a check to remove the erroneous color, but that check would eat up performance. (It would require a nested for loop on locations with O(N2) complexity)

Removing one of them fixes the clipping gradient issue.
As far as performance goes, gradients are expensive to render. I might try refactoring the gradient renderer to use CAGradientLayer but Im not positive if that will increase performance or not.

[Rapsssito]

@buba447, thank you so much! After all, the issue was on my side. I apologize if this silly mistake took you a long time.

We definitely don't want O(N2) complexity with Swift... However, how is that Java outperforms Swift by that far? I can run six animations like that on solid 60 FPS on Android, but just one on 1 FPS on iOS.

[buba447]

Yeah the performance for this simple animation is especially bad! Far slower than it should be. Ill dig in and see what can be done.

[DariusVil]

@buba447 Any news on the issue? :)

[rolandleth]

We're having issues with this one as well, but we checked and we don't have overlapping locations. For now we had to downgrade to 2.5.3, any chance this will improve in a future release?

[dreampiggy]

Seems the core case is the draw with Gradient. Version 2.x seems fast on this. Should we combine the issue to #895 ??

And, any update about it ? Or can we use CAGradientLayer instead of draw gradient using CG code ? Or even more radical, use low-level Metal or GL code instead ?

Currently I've test the same image, with Lottie-iOS and Samsung's rlottie implementation on iPhone XR, the rlottie beat all the cases on animation performance.

[MobileMon]

I think the issue is happening on devices WITHOUT metal