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: [
KeyFrame{
time: 0s
values: [
replacementNode.opacity => 0.0 tween Interpolator.EASEBOTH
]
}
KeyFrame{
time: 1s
values: [
nodeToReplace.opacity => 0.0 tween Interpolator.EASEBOTH,
replacementNode.opacity => origReplacementNodeOpacity tween
Interpolator.EASEBOTH
]
action: function(){
delete nodeToReplace from parent.content;
nodeToReplace.opacity = origNodeToReplaceOpacity;
doAfter();
}
}
]
}
t.play();
}
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.