Java Reference
In-Depth Information
The code snippet makes use of the Path API and the PathTransition class to move the
circle along a specified path. Let's take a closer look at the previous code.
F Animated subject —irst, the code declares the node that will be animated. In
this instance, it is a Circle. Notice that the node carries no information about the
animation. There is a clear separation between the animated subject and the process
that drives the animation.
F Path description —the PathTransition class makes use of the Path API to specify
the path along which the animated subject will be displaced. The API provides an
idiom to describe different segments of the path using path element classes. For
more details about the Path API, have a look at the See also section following shortly.
F Animation setup —once we have an animation subject and animation path, we are
ready to set up the animation. We declare an instance of PathTransition and
use its node property to specify the subject being animated. Then, to resolve the
path of the animation, we use an instance of another class named AnimationPath
and its function createFromPath(path:Path) to transform the Path instance
into coordinates for the animation sequence.
F Animation control —once the the instance of the transition class is declared, we can
use the function playFromStart() to start playing the animation as shown in the
code. When the property autoReverse:Boolean is set to true , it causes the play
head to restart the animation when the end of the sequence is reached. The property
repeatCount:Number is used to indicate the number of times the animation is
repeated. A value of PathTransition.INDEFINITE causes the playback to
repeat indefinitely, as exemplified in the code.
There's more...
Before we exit this recipe, let's take a look at the other transition classes provided by JavaFX.
You can see examples of all of the transition classes in the package ch03/source-code/
src/animation/trans/ .
TranslateTransition —shifts the target
node from its origin to the specified x and y
TranslateTransition {
node: circle
duration: 3s
toX:100 toY:300
ScaleTransition —enlarges or shrinks the
dimensions of the node by the specified factor
ScaleTransition {
node: circle
duration: 3s
fromX:0.5 fromY:0.5
toX:3 toY:3
Search WWH ::

Custom Search