JavaFX Code Recipes - JavaFX: Developing Rich Internet Applications - page 317

Magnify
The Magnify class allows the node to grow when the mouse hovers over it.
When the mouse is moved off the node, it returns to its normal size. This class is
similar to the Fader class in that an animation plays when the mouse moves over
the node, and plays in reverse when the mouse moves off the node.
This is done by adding an on replace trigger to the hover instance variable
inherited from javafx.scene.Node . The following code in Listing 12.12 dem-
onstrates this.

Listing 12.12 Magnify - hover

override var hover on replace {
if(hover) {
timeline.rate = 1.0; // play forward
timeline.playFromStart(); // from the beginning
}else {
timeline.rate = -1.0; // play backward
timeline.time = duration; // from the end
timeline.play();
}
}

The timeline modifies the scale from its start setting to its end setting, 1x and
1.5x, respectively, by default. The default is to use a linear interpolator. Listing
12.13 shows how this is done.

Listing 12.13 Magnify - timeline

var scale = 1.0;
var timeline = Timeline {
keyFrames: [
KeyFrame {
time: 0s
values: [
scale => startScale,
]
},
KeyFrame {
time: duration
values: [
scale => endScale tween interpolator,

]
},
]
};