Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support radial gradient highlights #2524

Open
piusyikyu opened this issue Jul 26, 2024 · 1 comment
Open

Support radial gradient highlights #2524

piusyikyu opened this issue Jul 26, 2024 · 1 comment

Comments

@piusyikyu
Copy link

Is your feature request related to a problem? Please describe.
Radial gradient hightlight is supported in both iOS and web.

Describe the solution you'd like
Support highlight in Android.

Describe alternatives you've considered
Stacking arbitary number of circles and apply a mask. Not ideal.

Additional context

I have some suggestion on how to implement this on Android.

Concept

The image below is the concept of what 'hightlight' is in lottie. This feature is conventionally known as the focus or the focal point of a radial gradient instead. There are two parameters in lottie for this:

  • highlight length: a percentage of the distance between the gradient start and end
  • highlight angle: clockwise rotation about gradient start from the line joining the gradient start and end

radial gradient with highlight (commented)

Consider a point A lying on somewhere inside the circle defined by start and end in the lottie format. The colour stop at point A is the ratio of the distance between A and the focus to the project of A from the focal point to the circumference of the such circle. The figure below should give a good illustration, the ratio of $L:L'$ should be used to interpolate the colour at the location.

radial gradient with highlight (calc)


Implementation suggestion

MyApplication.zip

I created a sample kotlin project to show case the calculations shown above using min sdk 16 and java 17 like your repo setup.

For Android 12+, you can migrate your use of RadialGradient (here) to the new API and all will be fine.

For sdks below that, I created a custom BitmapShader to simulate the calculation and painted in onto a custom view on a JellyBean emulator. The goal is to show it can achieve the required render, so I did not optimise for performance. Below are some screenshots for your reference.

Android 4.2
image

Android 14
image


Housekeeping

  • both fill and stroke can use this feature. Your parser currently does not process those flags.
  • supporting resources.zip
@gpeal
Copy link
Collaborator

gpeal commented Jul 26, 2024

Thanks for the detailed write up!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants