calda
commented
1 year ago 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.
Which Version of Lottie are you using?
Lottie 4.2.0
Expected Behavior
https://github.com/airbnb/lottie-ios/assets/47234953/7c3a2056-59a2-4ca6-a857-8907da7b5055
Actual Behavior
https://github.com/airbnb/lottie-ios/assets/47234953/e24d19f9-9f38-4cd8-84cb-111e095e24c0
Animation JSON
rollingBall.json.zip