Add Motion with JavaFX Animation - JavaFX: Developing Rich Internet Applications - page 200

First, locate an image for the map of midtown Manhattan, the image in the
example is from the United States Census Bureau and is located from http://
www.census.gov/geo/www/tiger/tigermap.html. Next, calculate a route on the
map for the animation. One way to do this is to display the map using JavaFX,
and then add an onMouseClicked function to print the coordinates where the
mouse is clicked. Then, mark the route by clicking at major transition points
along the route. Include these points either in a javafx.scene.shape.Path or
javafx.scene.shape.SVGPath . The example uses an SVGPath .
var route = SVGPath {
fill: Color.TRANSPARENT
stroke: Color.TRANSPARENT
content: "M21.5,330.0 L186.5,421.0 235.5,335.0 "
"293.5,368.0 407.5,167.0 287.5,103.0 "
"181.5,302.0 68.5,244.0 z"
};
In an SVGPath , the code letter M means moveto , L means lineto , and z means
closepath . After a lineto code is entered, it automatically applies to adjacent
uncoded point coordinate pairs. In this example, the route is made invisible with
the TRANSPARENT fill and stroke instance variables. If desired, you can use the
stroke to visibly show a route. For example, to demonstrate a yellow highlighter, use
var route = SVGPath {
fill: Color.TRANSPARENT
stroke: Color.rgb(255,255,0, .5)
strokeWidth: 15
...
...
Next, we need a graphical asset that will move along the path, and this is defined
generically as a javafx.scene.Node . In the example, we used an image of an
automobile.
var racecar = ImageView {
scaleX: 0.5
scaleY: 0.5
image: Image{ url: "{__DIR__}images/racecar.gif" }
}
Lastly, we need to define a path animation using javafx.animation.transition
.PathTransition .