Wipe Library

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.

Back