Json animation not rendering correctly with core animation rendering engine

[PM74367]

Which Version of Lottie are you using?

Lottie 4.2.0

Expected Behavior

Screen.Recording.2023-06-23.at.12.35.40.PM.mov

Actual Behavior

Screen.Recording.2023-06-23.at.12.29.51.PM.mov

Animation JSON

rollingBall.json.zip

[calda]

This is a known issue in the Core Animation rendering engine when applying a fill to shapes in different groups, if you're relying on the two overlapping shapes being rendered as a single CGPath filled with non-zero winding.

In the animation json, this is structured as:

• Group
  • Shape A
  • Shape Transform A
• Group
  • Shape B
  • Shape Transform B
• Fill

In After Effects / the Main Thread rendering engine, all of the groups and shapes are combined into a single CGPath, and then the Fill is applied to that path. When using non-zero winding, that results in the inner shape being not filled.

Due to the architecture of the core animation rendering engine (basically each group becomes its own CALayer), that structure is rendered as if it were:

• Group
  • Shape A
  • Shape Transform A
  • Fill
• Group
  • Shape B
  • Shape Transform B
  • Fill

This causing the two shapes to be filled, separately, with the same color.

When two shapes are part of the same group, the Core Animation rendering engine is able to combine them into a single CAShapeLayer, but since the two shapes are part of different groups that doesn't happen.

If you move the shapes to be part of the same group, you can get the cutout effect you're looking for:

Ideally we would fall back to the Main Thread rendering engine in this case, but I'm not aware of a performant way to detect this specific issue in a way that doesn't cause a bunch of false positives. For example, if the two shapes didn't overlap (which is by far more common) then the existing behavior would look correct.

[calda]

Given this investigation, this is the same issue as #1876 (comment). Closing this in favor of the existing issue.