Transition with gradient

Solar2D Advanced Graphics
#1

Hello. I’m trying to transition the colors of a rectangle’s fill gradient.

I have no problem with the fill color is just a single color, animating the r, g and b properties of the object’s fill property using transition.to(). This works perfectly.

But when the fill color is a gradient, I haven’t found a way to access the rgb values of the two colors that make up the gradient, so that I can animate them. I have tried animating r, g and b of object.fill, but to no avail. I also tried animating r, g and b of object.fill.color1 or object.fill.color2, which did not work either.

I’ve been looking around the forum and documentation, and googled around, but haven’t found anything. While the documentation for the Paint type specifies there’s r, g and b properties, the documentation for the GradientPaint type doesn’t mention any properties at all, besides those inherited from Paint.

Could someone please point me in the right direction? I would just need to know how to animate the gradient’s color, or if that’s just not possible and I should just look for another solution.

Thanks in advance!

#2

Off the top of my head, I’m not sure if it is possible to “transition the gradient fill” like that. Unless I’m mistaken, you’ll need to update fills like that separately (unless you are using shaders).

You could manoeuvre around this by creating a few functions.

First, you can add onStart, onPause, onResume and onComplete listeners to your transition call.

When you start a transition, you could add an enterFrame listener to your object that will update its fill every frame. Then, on pause or on complete, you’d simply remove the listener.

Finally, the thing that you’d actually transition would be the the rgb values that the enterFrame listener would use to create the fill.

1 Like