FX

One of the most sophisticated transition types available in JavaFX technology is transition along an arbitrary path. This capability is provided by the javafx.animation.transition.PathTransition class.

The PathTransition class is easy to use: You create a path along which an object will move, and the object to move along the path. Pass both the path and the object to the PathTransition class and the PathTransition class handles animating the object along the path:

def path = Path {
    stroke: Color.BLACK
    strokeWidth: 4
    elements: [
        MoveTo {
            x: 50 
            y: 200 
        },
        CubicCurveTo {
            controlX1: 100 
            controlY1: 50
            controlX2: 300 
            controlY2: 350
            x: 350
            y: 200
        },
    ]
};
 
def anim = PathTransition {
    path: AnimationPath.createFromPath(path)
    orientation: OrientationType.NONE
    node: Circle { centerX: 0 centerY: 0 radius: 20 fill: Color.GREEN}
    duration: 5s
};

The PathTransition class inherits from the Transition class and adds two variables:

• path is a path along which an object moves. This variable is of the AnimationPath type. The AnimationPath class has functions that create an AnimationPath object from any Path, SVGPath, or Shape objects.
  
  
• The orientation variable defines the behavior of the moving object. The default value, OrientationType.NONE, means that the object does not change its orientation. The OrientationType.ORTHOGONAL_TO_TANGENT value specifies that the object moves perpendicular to the tangent to the path. The latter case perfectly describes a car that moves along a racetrack. The car will turn at the track's curvatures and move forward, just like a real race car.

The following application shows both types of orientation. The NONE type is used for the upper path, and the ORTHOGONAL_TO_TANGENT type is used for the bottom path.

You can find the complete code in PathAnim.fx.

We welcome your participation in our community. Please keep your comments civil and on point. You may optionally provide your email address to be notified of replies—your information is not used for any other purpose. By submitting a comment, you agree to these Terms of Use.