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

Round corners are not rendered correctly on path shape content. #2561

Open RickAi opened 1 month ago

RickAi commented 1 month ago

Lottie is supported and developed on nights and weekends. Issues from Lottie sponsors will be prioritized.

If you don't use this template, your issue will be closed. Delete this text once completed.

Checklist

  1. My animation doesn't use any unsupported features. ✅
  2. I know what part of my animation doesn't work. ✅
  3. I have created a simplified version of my animation ✅
  4. I have attached the AEP file (as a zip file so it can be attached) that only has the part of the animation that doesn't work. ✅

Describe the bug A clear and concise description of what the bug is. Round corners are not rendered correctly on path shape content.

A very simple example is a path only with 3 vertices: ✅ lottie-web:

image

❌ lottie-android:

image

More open path example: ✅ lottie-web:

image

❌ lottie-android:

image

A closed path example with 4 vertices:

✅ lottie-web:

image

❌ lottie-android:

image

What version of Lottie did you test this on? 6.5.2

What version of Android did you test this on? Android 12.0

Steps To Reproduce Steps to reproduce the behavior:

  1. unzip the attachment .zip file: roundcorner_issue.zip
  2. render json files (closed, 3points or points.json) with lottie-android
gpeal commented 2 weeks ago

I just looked into this and there are two separate issues here.

  1. There are some issues with non-closed shapes that I need to spend more time to get right
  2. If there is a rounded corner animation but nothing else, the cached path would always get returned. That will be fixed with #2567
alexzhirkevich commented 2 weeks ago

@gpeal Is there a reason why you don't utilize CornerPathEffect for rounding corners? I use it here and it works perfectly fine for all examples above.

gpeal commented 2 weeks ago

@gpeal Is there a reason why you don't utilize CornerPathEffect for rounding corners? I use it here and it works perfectly fine for all examples above.

I could look into it. In general, lottie-android has limited effect support but it's worth adding support for when possible!

alexzhirkevich commented 2 weeks ago

I mean you can add this PathEffect to Paint to implement rounded corners shape, instead of manual curves modification that you do here. Similar to DashPathEffect that you use for dashed strokes