Effect: Visual Transitions - JavaFX Special Effects - page 57

var t = Timeline{
keyFrames: [
KeyFrame{
time: 1s
values: [
group.translateX =>
startingX + totalWidth tween Interpolator.EASEBOTH,
clip.translateX => -totalWidth tween Interpolator.EASEBOTH
]
action: function(){
delete group.content;
replacementNode.translateX = startingX;
replacementNode.translateY = startingY;
insert replacementNode before parent.content[index];
doAfter();
}
}
]
}
t.play();
}
In Listing 3-4 a new node called group is created that contains both nodeToReplace and
replacementNode . We see that nodeToReplace is removed from its parent and replaced with the new Group
in the same location, and group also has its clip set to a rectangular area the size of nodeToReplace .
Finally, a Timeline is created that simply translates the group containing both nodes to the right while
translating the clip area to the left. The effect is that the clip area appears to stay in one place as the two
nodes slide to the right. The function in the first KeyFrame does a little bookkeeping, ensuring that the
nodes are in a reasonable state when the animation is complete. This includes removing both nodes
from the group and placing replacementNode onto the scene where nodeToReplace started out.
Example 3: Flip Replace
The flip replace flips a node to reveal the second node, as if a playing card were flipped to show its
backside. This example takes advantage of the JavaFX PerspectiveTransform class to simulate a 3D
perspective. However, this is not a real 3D transform, as JavaFX does not currently support 3D content.
Instead, the original node is wrapped in a group that is “rotated” in 3D, and when the rotation is halfway
done, the original node is replaced with the new node. The screenshots in Figures 3-4 and 3-5 show the
animation one-third complete and two-thirds complete.