FX

This sample shows how to animate a shape along an arbitrary path. It has two "scenarios" that the user can switch between: a car running on a racetrack and a boat sailing on waves.

Understanding the Code

Path-based animation is provided by the class javafx.animation.transition.PathTransition. It takes two principal parameters: a Node that is animated and a Path along which the node moves.

When constructing a node to be animated, keep in mind that the center of the node always becomes the anchor point of the animation, i.e. the point that follows the path closely. An API to control the anchor point is planned in a future release, however, it is not there yet.

After both the node and the path are ready, animating is easily done. You specify the duration for the transition and the interpolation method. The optional ORTHOGONAL_TO_TANGENT parameter demands that the node be kept orthogonal to the tangent of the path. Otherwise, the car would stick in the initial left-to-right orientation and would not turn. Figure 1 shows the complete definition of the transition.

def track = Path {
    ...
};

def anim = PathTransition {
    node: car
    path: AnimationPath.createFromPath(track)
    orientation: OrientationType.ORTHOGONAL_TO_TANGENT
    interpolate: Interpolator.LINEAR
    duration: 6s
    repeatCount: Timeline.INDEFINITE
};

Figure 1: Creating the Transition Object

To start the transition, use the play() method, as shown in Figure 2.

anim.play();

Figure 2: Starting the Transition

In the sailboat scenario, not only is the sailboat animated, but the waves also run from right to left. This effect is obtained with another type of transition, javafx.animation.transition.TranslateTransition. This transition is set up to travel the same distance as the PathTransition does, in the same time, but in the opposite direction so that the boat stays in the center of the scenario. Figure 3 shows the translating transition.

def move = TranslateTransition {
    fromX: 0
    fromY: 0
    toX: -600
    toY: 0
    node: bind this.node
    interpolate: Interpolator.LINEAR
    duration: 8s
    repeatCount: Timeline.INDEFINITE
};

Figure 3: Defining a Translation Transition

When the user switches between scenarios using the buttons in the top-left corner, the new scenario fades in. This is done using yet another transition class, javafx.animation.transition.FadeTransition. Its fromValue and toValue parameters refer to the opacity of the node. So in our case, illustrated by Figure 4, the scenario node is brought from its current opacity state to completely opaqueness in two seconds.

var fadein = FadeTransition {
    node: bind this.node
    fromValue: bind this.node.opacity
    toValue: 1
    duration: 2s
    interpolate: Interpolator.EASEOUT
};

Figure 4: Using Fade Transition