Effect: Animated Gradients - JavaFX Special Effects - page 156

Animations
Now that you've seen the basics of how gradients are created and applied to shapes, it is time to animate
them. At first glance it would seem that you would animate colors and gradients the same way as the
locations of Nodes . In some ways that is true—the Timeline API can be used to transition from one color
to another. However, to achieve a higher level of control over the animations, a few tricks are required
because it is impossible to create a Paint object with its properties bound to another value. I don't know
if this was implemented in this way for technical reasons or if it was a simple oversight in a young
technology.
All of the animation examples use a trick where the fill property of a Shape is bound to a function
that creates a new Paint . The parameters to that function are then adjusted by a Timeline to produce the
animation. I have no doubt that this is inefficient, but the current limitations of JavaFX require us to
implement the code in this way. If you are planning on using lots of animated gradients in your
application, I would recommend doing a little performance testing before you get too far along on your
design. If you are just going to use a few gradients in your application, the technique presented will not
be a performance issue.
Simple Color Example
This example looks at the basics of animating a Paint , in this case just a simple color. The goal here is to
look at the technique that enables this to work. Listing 8-2 shows a simple rectangle with a color
animation.
Listing 8-2. Animated Color
function simpleColor():Void{
delete group.content;
var red = 0.0;
var rect = Rectangle{
translateX: 640/2-100
translateY: 480/2-100
width: 200
height: 200
fill: bind createColor(red,1.0,0,1.0)
}
insert rect into group.content;
var anim = Timeline{
repeatCount: Timeline.INDEFINITE;
autoReverse: true;
keyFrames: KeyFrame{
time: 2s
values: red => 1.0;
}
}
anim.play();
}