Java Reference
In-Depth Information
C H A P T E R 5
■ ■ ■
Effect: Advanced Interpolators
Animations are pictures that change over time; these changes are composed of transformations and
color changes. In either case, the rates at which these changes take place dictate much about the
appearance of the animation, and of course, the rates themselves can change over time. Imagine the
trivial animation of a rectangle moving from the top of the screen to the bottom. If the box moves down
at a constant rate of 2 pixels per second, it would appear to be gently lowering. However, if the box drops
2 pixels the first second, 4 pixels the next second, then 8, 16, and so on, the box would seem to be freely
falling. The difference between an object being lowered and an object falling can have a big effect on the
impact of the animation.
In the case of keyframe animation, a start position and an end position are defined. In terms of the
falling rectangle, the starting position is the top of the screen and the ending position is the bottom of
the screen. In order to describe how the box moves from the start position to the end position, you must
specify a function that describes that motion. In the case of the lowering box, the function is simply
linear, while the falling box is defined by a polynomial function. These functions describe the
interpolation between the start and end values. This chapter explores how interpolators are defined and
used in JavaFX by providing several examples of custom interpolators.
The Basics
JavaFX comes with a handful of built-in interpolators. Each interpolator gives the developer a chance to
tweak her animations in a different way. Though interpolators can be used alone, they are most often
used in conjunction with Timelines and KeyFrames. The easiest way to see how interpolators are used is
with a quick example, as shown in Listing 5-1.
Listing 5-1.
SimpleExample.fx
function run():Void{
var dot = Circle{
radius: 10;
translateX: 140
translateY: 240
}
var anim = Timeline{
repeatCount: Timeline.INDEFINITE
keyFrames: KeyFrame{
