Lottie-android: Gradient and transparency

[samiam2017]

to_lottie.zip

I'm having an issue with a linear gradient that is going from 0%--->100%----0% opacity. The json plays back correctly on the web demo, but when I play it back on the lottiefiles player on android one side does not go completely to 0% opacity before getting clipped by the shape.

Any help would be appreciated.

[samiam2017]

K figured it out. Lottie runs into issues with the placement of opacity markers and color markers in the gradient editor. This doesn't appear to be an issue on the json files when played via the bodymovin web library. just when they are read by the lottie native plugin, this is only an issue on Android, tested it on iOS and the unmodified gradient works fine. If you don't have an opacity market at the beginning and end there will be an issue, and if there are not color markets between each opacity marker it appears there will be an issue as well.
I've attach the original gradient editor setup (fewer markers) and the corrected one that solves the problem (with the extra markers).

[gpeal]

@bodymovin what is the exact spec for how gradients are rendered to the values array in the json?

[bodymovin]

"p" defines how many color and opacity keys there are. (always number of color keys = number of opacity keys)
"k": defines colors and eventually opacity.
if opacity is 100% at all keys, length of "k" is 4*p.
if opacity is different than 100% at any key, length of k is 4*p + 2*p
always the first 4*p values define color.
if there is opacity, the remaining 2*p values define opacity.
If there is not, you can assume opacity is 100% at all keys.

[samiam2017]

@gpeal has an update been created for this issue?

[gpeal]

No update yet. I would accept a PR though.

[samiam2017]

@gpeal what is a PR?

[samiam2017]

@gpeal is that a "pull request"? Im just a motion designer trying to use the tool. More than happy to try to learn the basics of coding to help out but don't really know where to start. What is the code base for the plugin and library?

[gpeal]

@samiam2017 Upon further inspection, I see that you used separate opacity and color stops. The correct thing to do here is to just use opacity on each color in the color stop. Lottie doesn't support opacity stops.

[rocifier]

@gpeal I have a similar issue. I'd like to take your advice to use color stops with opacity set on them but Ae 2019 only seems to support separate stops for color and opacity. Ie, you can't set the opacity of a colour, just RGB or HSL for it. Typing an extra 2 digits in hex just gets truncated. Can you please clarify what you meant by your supported solution?

[rocifier]

After a long time of playing around with this stuff, I found the above solution to pretty much work as well. I can also align the percentages of the colors with the percentages of the opacity stops and it works. But.. here's the kicker I needed to do to support multiple shapes with gradients:

All gradient fills on shapes need to be named uniquely. That's right.. by default mine were called "Gradient Fill 1" on each shape, and that isn't unique enough for the export to work properly.. I think it either shares or ignore ones with the same name :(

[N0t-Simon]

Hi @rocifier, my gradient doesn't appear on my export. Can you share your file ? I would like to understand how to export gradient to my Lottie file :)

[gpeal]

@N0t-Simon sometimes, they don't export unless your AEP file is saved.

[N0t-Simon]

hi @gpeal , AEP fils is saved, but gradients don't export... Have any idea ?

[gpeal]

@N0t-Simon Can you attach your aep as a zip file?

[N0t-Simon]

@gpeal sorry for time passed, find AEP attached ;)
Shimmer-Coupons-20191104T081811Z-001.zip