Java Reference
In-Depth Information
translateY: 480/2-50
width: 350
height: 50
fill: bind createLinearGradient([
Stop{color:Color.YELLOW, offset:0.0},
createStop(Color.CYAN, stop),
Stop{color:Color.YELLOW, offset:1.0},
]);
}
insert rect into group.content;
var anim = Timeline{
repeatCount: Timeline.INDEFINITE;
autoReverse: true;
keyFrames: [
KeyFrame{
time: 3s
values: [stop => 1.0 tween Interpolator.EASEBOTH]
}
]
}
anim.play();
}
Listing 8-12 shows a
Rectangle
being created with the now familiar function
createLinearGradient
from Listing 8-7 used to set the
fill
. The only real difference between this example and Listing 8-11 is
that there are three
Stops
in this example instead of two, and the
offset
of the middle
Stop
is having its
offset
changed as the animation progresses. This shows that the functions we have created provide the
flexibility required to make increasingly interesting animations.
Animate Opacity and Stops
The nice part about animating gradients is how they generate very smooth effects. Sometimes when
looking at an animation where a gradient changes it is not entirely clear how the animation works. I
consider this sort of confusion a success for the animators, because we want the audience to focus on
the end result, not the details of how it is obtained. This example combines the two techniques of
animating a
color
and animating a
stop
, and the
color
in this case will have its opacity value changed.
Figure 8-7 shows an animation in progress.
