What aspect of a a JavaFX animation is missing from this? - animation

Question

I am trying to get this simple animation to play over an image background however I cannot get it to start.
I have tried adding in a button as well as using playFromStart() instead of play().
I also tried adding in the set orientation to the path, I didn't think it would do anything because I'm just moving a circle, and it hasn't helped.
I also tried messing with the timing and number of repetitions of the animation just in case somehow it was just all happening really quickly or slowly and I just missed it.
I feel like I'm probably missing something really simple but from everything that I've looked at, all the things that the examples have, I also have.
The background image also went away when I added the button, for that I have tried moving it up and other things but I feel like this is also a simple issue that my brain has just glazed over.
package javafxapplication10;
import javafx.animation.PathTransition;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.*;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.paint.ImagePattern;
import javafx.scene.shape.*;
import javafx.stage.Stage;
import javafx.util.Duration;
public class JavaFXApplication10 extends Application {
#Override
public void start(Stage stage) {
stage.setScene(scene);
stage.setResizable(false);
stage.sizeToScene();
ImagePattern pattern = new ImagePattern(image);
scene.setFill(pattern);
stage.setScene(scene);
stage.show();
Circle cir = new Circle (19);
cir.setLayoutX(170);
cir.setLayoutY(100);
cir.setFill(Color.KHAKI);
pane.getChildren().add(cir);
Path path1 = new Path();
path1.getElements().add(new MoveTo(170,650));
path1.getElements().add(new MoveTo(1335,650));
path1.getElements().add(new MoveTo(1335,100));
PathTransition pl = new PathTransition();
pl.setDuration(Duration.seconds(8));
pl.setPath(path1);
pl.setNode(cir);
pl.setCycleCount(1);
//pl.setOrientation(OrientationType.ORTHOGONAL_TO_TANGENT);
pl.setAutoReverse(false);
//pl.play();
Button begin = new Button("Begin");
begin.setLayoutX(780);
begin.setLayoutY(105);
begin.setOnAction(new EventHandler<ActionEvent> () {
#Override
public void handle(ActionEvent press) {
pl.play();
}
});
pane.getChildren().add(begin);
}
Image image = new Image("file:Figure one.png");
Pane pane = new Pane();
Scene scene = new Scene (pane,1474,707);
public static void main(String[] args) {
launch(args);
}
}

Answer 1

PathTransition only moves the node along a path that would actually be drawn. MoveTo elements do not draw anything, but simply set the current position. You need to use LineTo (and/or ClosePath) to draw something in the Path. Furthermore PathTransition sets the translate poperties, not the layout properties, i.e. final position of the circle is determined by adding the layout coordinates to the coodrinates provided by the Path. Therefore you should either position the Circle using the translate properties or start the path at (0, 0):
Path path1 = new Path(
new MoveTo(0, 0),
new LineTo(0, 550),
new LineTo(1165, 550),
new LineTo(1165, 0),
new ClosePath()
);
// path1.getElements().add(new MoveTo(170,650));
// path1.getElements().add(new MoveTo(1335,650));
// path1.getElements().add(new MoveTo(1335,100));