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
coordinates
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
}









