Java Reference
In-Depth Information
var origNodeToReplaceOpacity = nodeToReplace.opacity;
var origReplacementNodeOpacity = replacementNode.opacity;
replacementNode.translateX = nodeToReplace.translateX;
replacementNode.translateY = nodeToReplace.translateY;
var index = Sequences.indexOf(parent.content, nodeToReplace);
insert replacementNode before parent.content[index];
var t = Timeline{
keyFrames: [
time: 0s
values: [
replacementNode.opacity => 0.0 tween Interpolator.EASEBOTH
time: 1s
values: [
nodeToReplace.opacity => 0.0 tween Interpolator.EASEBOTH,
replacementNode.opacity => origReplacementNodeOpacity tween
action: function(){
delete nodeToReplace from parent.content;
nodeToReplace.opacity = origNodeToReplaceOpacity;
Looking at Listing 3-3, the doReplace function takes two nodes and a function. The first node,
nodeToReplace , is replaced by the second node, replacementNode , and function doAfter is called when
the animation is complete. The opacity of both nodes is recorded. And since the opacity of these nodes
will change over the course of the animations, it is important that the original values be restored, as the
user of this function may not expect those values to change.
Next, replacementNode is placed behind nodeToReplace . This is done by finding the index of
nodeToReplace in its parent content and then adding replacementNode before that index, since nodes
with a higher index are drawn after nodes with a lower index.
Once the nodes are positioned in the scene, a Timeline called t is created with three KeyFrames . The
first KeyFrame sets the opacity of replacementNode to zero. The second KeyFrame states that after one
second, the opacity of replacementNode should increase to its original value, and that the opacity of
nodeToReplace should be at zero at the end of the first second. The last KeyFrame does not alter the visual
appearance of the animation, but does call the callback function doAfter when the animation is done.
Search WWH ::

Custom Search