This library wasn't really written for JavaFX in Action, but I've made it available here as a demo. Note: the library is just a rough prototype — there are still a few bugs in some of the wipes.
The code and libraries can be downloaded from here, while the JavaFXDocs can be found here.
The WipePanel class is a container that accepts one
child. What makes it special is that the child can be replaced
at any time, triggering a plug-in-able transition effect (known as
a wipe). The effect could be used in media viewer
applications, or in a tab pane/wizard component (to animate between
tabs or pages).
var wiper:WipePanel = WipePanel {
// This is the initial scene graph, containing one child node.
content: node1
// This is the wipe (FadeWipe) to be applied when the scene graph
// is replaced.
wipe: FadeWipe {
time: 1s;
}
// This function runs when the wipe is finished, and the new scene
// graph node is finally in place
action: function() {
println("Wiping");
}
}
To replace the current node, the WipePanel.next()
function is called, with the replacement node.
// Now we replace node1 with a new node, but rather than just swap // one child for another, the WipePanel animates between the two. wiper.next(node2);
The Wipe library contains a host of standard wipes, ready to use;
but creating a new wipe is as easy as implementing the
Wipe mixin.
// Fade between nodes
FadeWipe {
time: 1s;
}
// Fade to a blank display, then fade to the replacement node
FadeOutWipe {
time: 1s;
}
// Slide the display, to reveal the replacement node
SlideWipe {
time: 1s;
direction: SlideWipe.BOTTOM_TO_TOP;
}
// Slide the replacement node over the current node
SlideOverWipe {
time: 1s;
direction: SlideOverWipe.LEFT_TO_RIGHT;
}
// Split screen wipe between nodes
RevealWipe {
time: 1s;
direction: RevealWipe.LEFT_TO_RIGHT;
}
// Flip the display, so the replacement node appears to
// be drawn on the rear of the current node
Flip180Wipe {
time: 1s;
direction: Flip180Wipe.LEFT_TO_RIGHT;
}
// The current node swings into the display, like a door
SwingInOutWipe {
time: 1s;
anchor: SwingInOutWipe.TOP;
direction: SwingInOutWipe.OUT;
}
// Wipe between nodes using an expanding shape
ShapeWipe {
time: 1s;
direction: ShapeWipe.IN;
shape: javafx.scene.shape.Circle {
radius: n1.layoutBounds.width*0.75;
layoutX: n1.layoutBounds.width/2;
layoutY: n1.layoutBounds.height/2;
}
}
// Multiple split screen wipe, like a set of window blinds
BlindWipe {
time: 1s;
direction: BlindWipe.RIGHT_TO_LEFT;
blinds: 5;
}
// The current node vanished into the distance, as its replacement
// zooms in the opposite direction
FadeZoomWipe {
time: 1s;
}
Source code (96k)
Wipe library JAR (105k)
Wipe library PACK200 (16k)
An earlier version of the source code was also donated to the JFXtras project.
