Javafx Path Animation

Path Animation

JavaFX provides us very neat and easy way to do animation. A path animation creates a path for an object to move on. Basically it tells the object where to start moving, how will it moves and when it should stop moving. Lets see a simple example on path animation so we can have a clear understanding of how it works.

Example

/* The program demonstrate how to do simple path animation * */ package simplepathanimation; import javafx.stage.Stage; import javafx.scene.Scene; import javafx.animation.transition.PathTransition; import javafx.scene.shape.*; import javafx.scene.paint.*; import javafx.animation.transition.*; import javafx.scene.control.Button; /** * @author JJ */ //Creating a circle var circle = Circle { centerX:300 centerY:200 fill: Color.RED radius:6 } //Creating the path the circle will be moving var path = Path { elements: [ // Circle starts at this position MoveTo { x : 300, y : 200 }, //Then it moves in the vertical direction VLineTo { y : 70 }, // Then it moves in the horizontal direction HLineTo { x :200 }, ] } //Creating the animation for the circle var circleAnimation = PathTransition { duration: 5s node: circle path: AnimationPath.createFromPath(path) orientation: OrientationType.ORTHOGONAL_TO_TANGENT autoReverse: true repeatCount: PathTransition.INDEFINITE; } Stage { title:"Simple Path Animation" //Setting the window resize ability to be false resizable: false scene: Scene { width:400 height:400 content: [ Button { layoutX:250 layoutY:300 text:"Click to Play" action:function() { circleAnimation.play() } } //Making the circle to appear on the window circle ] } }

Click here to download the example

The example above, we first created a circle with an initial start position. Then we create a path for the circle. The path determines the movement of the circle, then we create an animation for the circle using the PathTransition. A click of the button cause the animation to start.

Example

/* The program creates path animation for two objects One is circle and other one is rectangle * */ package rectanglencirclepath; import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.shape.*; import javafx.animation.transition.*; import javafx.scene.paint.*; import javafx.scene.control.Button; /** * @author JJ */ //Creating a circle with initial position var circle = Circle { centerX:200 centerY:200 fill: Color.BLUE radius:8 } //Creating a rectangle with initial position var rectangle = Rectangle { x:150 y:150 fill: Color.RED width:30 height:10 } //Creating a path for circle var circlePath = Path { elements: [ MoveTo { x:200 y:200 }, HLineTo { x : 100 }, ] } //Creating a path for rectangle var rectanglePath = Path { elements: [ MoveTo { x:150 y:150 } VLineTo { y:100 } ] } //Creating the path animation for circle var circleAnimation = PathTransition { duration:1s node:circle orientation: OrientationType.NONE repeatCount:PathTransition.INDEFINITE path: AnimationPath.createFromPath(circlePath) autoReverse: true } //Creating the path animation for rectangle var rectangleAnimation = PathTransition { duration:1s node:rectangle orientation: OrientationType.NONE repeatCount:PathTransition.INDEFINITE path: AnimationPath.createFromPath(rectanglePath) autoReverse:true } Stage { title:"Rectangle and Circle Path" width: 400 height: 400 scene : Scene { //Setting the background of the window fill: RadialGradient { centerX: 5 centerY: 5 focusX: 0.1 focusY: 0.1 radius: 10 stops: [ Stop { color : Color.GREEN offset: 1.0 }, Stop { color : Color.LIGHTBLUE offset: 1.0 }, ] } content: [ Button { layoutX:300 layoutY:300 text:"Play" action:function() { circleAnimation.play(); rectangleAnimation.play() } } circle, rectangle ] } }

Click here to download the example

In this example, we create two objects a circle and a rectangle. then we assign different path and different animation to each objects. Then a click of a button cause the objects to animate.