JavaFX with Passion! Puzzler #2: Animation

This puzzler is mainly directed at the students of the free JavaFX with Passion! course, and it contains concepts that have been covered in the course so far, including animation.  The first student in that course who submits a correct solution will be awarded a free token for the Pro JavaFX early access eBook.  If you're not enrolled in that course, feel free to submit a solution to this puzzler as well, because I'll give a free eBook for the first correct solution from a non-JavaFX-with-Passion student as well.

Here are the requirements for this second puzzler:

1. As shown in the screenshot above, the JavaFX program must have a Path that resembles a "figure 8" race track.
2. A blue ellipse representing the race car will follow the track when the program begins, with each lap taking 10 seconds.
3. The car will loop infinitely around the track, and will remain perpendicular to the center point of the circle around which it is currently traveling.
4. When the user presses the mouse on the race car (ellipse), the car will pause.
5. When the user presses the mouse on a paused race car, the car will resume moving from its current location.

To enter your solution, submit a comment to this blog post that contains the source code pasted into it.  To validate that the code meets the requirements, I will compile and run it with JavaFX SDK 1.1.1. It must run without any code editing, and must meet the above requirements.

I will feature the two winners and their solutions in an upcoming blog post.  Have fun with this one!

Regards,
Jim Weaver
JavaFXpert.com

Comments

[FeiCheng]

sorry for posting so much times, I just want to make
it better! :)

import javafx.animation.Interpolator;
import javafx.animation.Timeline;
import javafx.animation.transition.AnimationPath;
import javafx.animation.transition.OrientationType;
import javafx.animation.transition.PathTransition;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.shape.ArcTo;
import javafx.scene.shape.Ellipse;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.stage.Stage;

/**
* @author FeiCheng
*/
var path = Path {
elements: [
MoveTo { x: 100 y: 100 },
ArcTo {
x : 50*java.lang.Math.sqrt(2), y : 50*java.lang.Math.sqrt(2)
radiusX : 50, radiusY :50
sweepFlag:true
absolute:false
},
ArcTo {
x : 50*java.lang.Math.sqrt(2), y : 50*java.lang.Math.sqrt(2)
radiusX : 50, radiusY :50
sweepFlag:false
absolute:false
},
ArcTo {
x : -50*java.lang.Math.sqrt(2), y : -50*java.lang.Math.sqrt(2)
radiusX : 50, radiusY :50
sweepFlag:false
absolute:false
},
ArcTo {
x : -50*java.lang.Math.sqrt(2), y : -50*java.lang.Math.sqrt(2)
radiusX : 50, radiusY :50
sweepFlag:true
absolute:false
},
]
stroke:Color.BLACK
}

var pathTransition : PathTransition;

var car : Ellipse = Ellipse {
radiusX : 20, radiusY : 10
fill: Color.BLUE
onMousePressed: function( e: MouseEvent ):Void {
if (not pathTransition.paused) {pathTransition.pause();}
else {pathTransition.play();}
}

}
pathTransition = PathTransition {
interpolate : Interpolator.LINEAR
duration: 10s node: car
path: AnimationPath.createFromPath(path)
orientation: OrientationType.ORTHOGONAL_TO_TANGENT
repeatCount:Timeline.INDEFINITE
}
pathTransition.play();

Stage {
title: "PathTransition Puzzler"
width: 600
height: 600
scene: Scene {
content: [path,car]
}
}