search

airbnb / lottie-android

Render After Effects animations natively on Android and iOS, Web, and React Native
http://airbnb.io/lottie/
Apache License 2.0
35.03k stars 5.41k forks source link

Apply transformation for the stroke on the canvas so the skew is also… #2531

Closed Mirko-Volkers closed 3 months ago

Mirko-Volkers commented 3 months ago

I noticed that the Android implementation had trouble with applying a skew on a stroke, so this attempts to fix that issue.

The issue was that since the transformation was applied to the path, it didn’t take any properties from the paint into consideration. As a result, the skew was not applied to the width of the line. By applying the transformation on the canvas, this issue is resolved.

Example Lottie which wasn’t rendered correctly (should have skewed lines): Skewed-Stroke.json

gpeal commented 3 months ago

@Mirko-Volkers Thanks for taking a look at this. Could you add Skewed-Stroke.json to this folder? It'll get auto-included in snapshot tests if you do.

github-actions[bot] commented 3 months ago

Snapshot Tests API 23: Report Diff API 31: Report Diff

gpeal commented 3 months ago

@Mirko-Volkers Based on the snapshot tests, it doesn't look like these changes are correct. Several of the failing ones are in the same snapshot-test module so feel free to take a look at them locally to see what's going on.

github-actions[bot] commented 3 months ago

Snapshot Tests API 23: Report Diff API 31: Report Diff

Mirko-Volkers commented 3 months ago

Yeah, I see some differences in the snapshots. Found some changes because the scale was applied twice, going through it locally to check if I can fix it and make sure I'm not missing something.

github-actions[bot] commented 3 months ago

Snapshot Tests API 23: Report Diff API 31: Report Diff