javaFx中的动画

Question

I am working on a project that has to do with animation in javaFx, I wrote the GUI for it and it is a Stick Figure. I am trying to make the stick figure walk to the right side of the pane and then when it touches the right side turn and go back the other way all the way to the left wall of the pane. I have this code that is a moving ball that does exactly what I want for my stick figure to do but I cannot seem to modify that code into my stick figure program. any ideas on how to do this? both codes are below:

    package animationdemo;

    import javafx.animation.KeyFrame;
    import javafx.animation.Timeline;
    import javafx.application.Application;
    import javafx.scene.Scene;
    import javafx.scene.layout.Pane;
    import javafx.scene.paint.Color;
    import javafx.scene.shape.Circle;
    import javafx.stage.Stage;
    import javafx.util.Duration;

    public class MovingBallDemo_3 extends Application {

@Override
public void start(Stage primaryStage) {

    BallPane ballPane = new BallPane(); // Create a ball pane
    // Pause and resume animation
    ballPane.setOnMousePressed(e -> ballPane.pause());
    ballPane.setOnMouseReleased(e -> ballPane.play());
    // Create a scene and place it in the stage
    Scene scene = new Scene(ballPane, 250, 150);
    primaryStage.setTitle("Bouncing Ball Control"); // Set the stage title
    primaryStage.setScene(scene); // Place the scene in the stage
    primaryStage.show(); // Display the stage
}

public static void main(String[] args) {
    launch(args);
  }
}

 class BallPane extends Pane {

public final double radius = 20;
private double x = 2 * radius, y = 3 * radius;
private double dx = 3; // Number of pixels to move each time
private Circle circle = new Circle(x, y, radius);
private Timeline animation;

public BallPane() {
    circle.setFill(Color.RED); // Set ball color
    getChildren().add(circle); // Place a ball into this pane
    // Create the animation for 25 millisecond events
    animation = new Timeline(new KeyFrame(Duration.millis(25), e -> moveBall()));
    animation.setCycleCount(Timeline.INDEFINITE);
    animation.play(); // Start animation
}

public void play() {
    animation.play();
}

public void pause() {
    animation.pause();
}
// Move the ball. When a wall is encountered, reverse direction
protected void moveBall() {
    if (x <= radius || x >= getWidth() - radius) {
        dx *= -1; // Change direction
    }
    // Adjust ball position
    x += dx;
    circle.setCenterX(x);
}
}

the above is the animation that I want the stick figure GUI to do. here is my attempt of merging my code in with the code above to make the stick figure work but nothing happens:

     package Stickfigure;

     import java.awt.Graphics;
     import javafx.animation.KeyFrame;
     import javafx.animation.PathTransition;
     import javafx.animation.Timeline;
     import javafx.application.Application;
     import javafx.event.ActionEvent;
     import javafx.event.EventHandler;
     import javafx.scene.Scene;
     import javafx.scene.control.Button;
     import javafx.scene.layout.Pane;
     import javafx.scene.layout.StackPane;
     import javafx.scene.paint.Color;
     import javafx.scene.shape.Arc;
     import javafx.scene.shape.ArcType;
     import javafx.scene.shape.Circle;
     import javafx.scene.shape.Line;
     import javafx.stage.Stage;
     import javafx.util.Duration;


     public class Stickfigure extends Application {

      @Override
     public void start(Stage primaryStage) {
      BallPane ballPane = new BallPane();
      ballPane.setOnMousePressed(e -> ballPane.pause());
      ballPane.setOnMouseReleased(e -> ballPane.play());

    Circle circle = new Circle(100, 100, 0);//head
    Circle circle1 = new Circle(120, 80, 50);//eye
    circle1.setRadius(5);//radius of eye
    circle.setRadius(50);//radius of head
    circle.setStroke(Color.BLACK);//circle color
    circle1.setStroke(Color.BLACK);//circle color
    circle.setFill(null);//makes the head empty(no brain haha)
    circle.setStrokeWidth(5);//sets the line thickness of circle (head)

    Arc arc = new Arc();//mouth
    arc.setCenterX(110.0f);//mouth position
    arc.setCenterY(120.0f);//mouth position
    arc.setRadiusX(35.0f);//mouth size
    arc.setRadiusY(25.0f);//mouth size
    arc.setStartAngle(1.0f);//angle of mouth
    arc.setLength(5.0f);//length of mouth
    arc.setType(ArcType.ROUND);

    Line line1 = new Line(100, 250, 100, 150); //body of stick figure
    Line line2 = new Line(); //left leg
    Line line3 = new Line();//right leg
    Line line4 = new Line();//right arm
    Line line5 = new Line();//left arm

    line2.setStartX(30.0f); //left leg starting position y
    line2.setStartY(350.0f);//left leg starting position y
    line2.setEndX(100.0f);//left leg end pos x
    line2.setEndY(250.0f);//left leg end pos y

    line3.setStartX(200.0f); //right leg start pos x
    line3.setStartY(350.0f);// right leg start pos y
    line3.setEndX(100.0f); //right leg end pos x
    line3.setEndY(250.0f); //right leg end pos y

    line4.setStartX(100.0f);//right arm start pos x
    line4.setStartY(200.0f); //right arm start pos y
    line4.setEndX(200.0f); //right arm end pos x
    line4.setEndY(170.0f); //right arm end pos y

    line5.setStartX(30.0f);//left arm arm statt pos x
    line5.setStartY(250.0f); // left arm start pos y
    line5.setEndX(100.0f);//left arm end pos x
    line5.setEndY(200.0f);//left arm end pos y

    line1.setStrokeWidth(5); //thickness of line
    line1.setStroke(Color.BLACK);//color of line
    line2.setStrokeWidth(5);//thickness of line
    line2.setStroke(Color.BLACK);//color of line
    line3.setStrokeWidth(5);//thickness of line
    line3.setStroke(Color.BLACK);//color of line
    line4.setStrokeWidth(5);//thickness of line
    line4.setStroke(Color.BLACK);//color of line
    line5.setStrokeWidth(5);//thickness of line
    line5.setStroke(Color.BLACK);//color of line

    // Create a pane to hold the circle 

    ballPane.getChildren().add(circle); //adds circle to picture
     ballPane.getChildren().add(circle1);//adds circle to picture
    ballPane.getChildren().add(line1);//adds line
    ballPane.getChildren().add(line2);//adds line
    ballPane.getChildren().add(line3);//adds line
   ballPane.getChildren().add(line4);//adds line
    ballPane.getChildren().add(line5);//adds line
    ballPane.getChildren().add(arc);//adds arc





    Scene scene = new Scene( ballPane, 400, 400);

    primaryStage.setTitle("stick figure");//title
    primaryStage.setScene(scene);
    primaryStage.show();
}

/**
 * @param args the command line arguments
 */
public static void main(String[] args) {
    launch(args);
}
class BallPane extends Pane {

public final double radius = 20;
private double x = 2 * radius, y = 3 * radius;
private double dx = 3; // Number of pixels to move each time

private Timeline animation;

public BallPane() {


    // Create the animation for 25 millisecond events
    animation = new Timeline(new KeyFrame(Duration.millis(25), e ->    moveBall()));
    animation.setCycleCount(Timeline.INDEFINITE);
    animation.play(); // Start animation
}

public void play() {
    animation.play();
}

public void pause() {
    animation.pause();
}
// Move the ball. When a wall is encountered, reverse direction
protected void moveBall() {
    if (x <= radius || x >= getWidth() - radius) {
        dx *= -1; // Change direction
    }
    // Adjust ball position
    x += dx;

}
}

}

Answer 1

You are not doing any moving in the moveBall() method. You just change local values. Have a look at the Node class from which Pane is inheriting and the translateXProperty . You want to change that, not just your fields.
You even had the actual translation in your Ball class: circle.setCenterX(x);

protected void moveBall() {
    if (x <= radius || x >= getWidth() - radius) {
        dx *= -1; // Change direction
    }
    // Adjust ball position
    x += dx; 

    //#######################################
    setTranslateX(x); // Move the Pane!!! ###
    //#######################################
}