如何在JavaFX中更改PathTransition上节点的起始位置？

Question

I'm learning about JavaFX by trying to build a (very) small platforming game. I thought it might be a good idea to simulate jumping by using PathTransition along an Arc shape. Like this:

import javafx.util.Duration;
import javafx.animation.PathTransition;
import javafx.scene.shape.Arc;

public void jump() {
    PathTransition jump = new PathTransition();
    Arc path = new Arc(
        figure().getX() + 20, //figure is a custom shape
        figure().getY() + figure().getHeight() / 2, 
        20, 80, 360, 180); 
    jump.setPath(path);
    jump.setNode(figure);
    jump.setAutoReverse(false);
    jump.setDuration(Duration.millis(3000));
    jump.setCycleCount(1);
    jump.play();
}

Event handler:

figure.setOnKeyPressed((e) -> {
    if (e.getCode() == KeyCode.SPACE) {
        jump();
    }
});

I discovered that doing this actually makes my figure jump BACKWARDS because the animation starts at the right end of the arc and ends at the left end. I tried looking through the documentation for Arc and PathTransition but couldn't find anything to help me solve the problem. What am I missing here?

Answer 1

The last two values you provide to the Arc constructor are the start angle and angular length of the arc (in degrees). Angles are measured relative to the positive x-axis in a counter-clockwise direction. So you are starting at 360 degrees (which of course is equivalent to 0 degrees: ie (centerX + radiusX, centerY) ) and heading counter-clockwise (up and left) for a half circle. To jump right, I think you want the start angle to be 180 and the angular length to be -180 (negative to rotate clockwise , a half-ellipse).

Note the PathTransition moves the center of the node along the path, by changing its translateX and translateY properties. So to do a half-turn clockwise from the negative x-axis to the positive x-axis, you need centerX to be the initial horizontal center of the shape, plus the radiusX , and centerY to be the initial vertical center of the shape.

Here's a SSCCE that jumps the way you want (I think...). I used set methods on the Arc instead of the constructor, just for clarity as what each value is doing. You can achieve the same with the constructor if you prefer.

import javafx.animation.PathTransition;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Arc;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class ArcTransitionTest extends Application {

    private final double xJumpRadius = 20 ;
    private final double yJumpRadius = 80 ;


    @Override
    public void start(Stage primaryStage) {
        Rectangle rect = new Rectangle(50, 200, 50, 100);
        rect.setFill(Color.CORNFLOWERBLUE);

        Button left = new Button("<");
        left.setOnAction(e -> jumpLeft(rect));

        Button right = new Button(">");
        right.setOnAction(e -> jumpRight(rect));

        HBox controls = new HBox(5, left, right);
        controls.setPadding(new Insets(10));
        controls.setAlignment(Pos.CENTER);

        Pane pane = new Pane(rect);
        BorderPane root = new BorderPane(pane, null, null, controls, null);
        primaryStage.setScene(new Scene(root, 600, 600));
        primaryStage.show();
    }

    private void jumpRight(Rectangle rect) {
        jump(rect, 180, -180, getHorizontalCenter(rect) + xJumpRadius, getVerticalCenter(rect));
    }

    private void jumpLeft(Rectangle rect) {        
        jump(rect, 0, 180, getHorizontalCenter(rect) - xJumpRadius, getVerticalCenter(rect));
    }

    private void jump(Rectangle rect, double startAngle, double angularLength, double centerX, double centerY) {
        Arc arc = new Arc();
        arc.setCenterX(centerX);
        arc.setCenterY(centerY);
        arc.setRadiusX(xJumpRadius);
        arc.setRadiusY(yJumpRadius);
        arc.setStartAngle(startAngle);
        arc.setLength(angularLength);

        PathTransition transition = new PathTransition(Duration.seconds(1), arc, rect);

        transition.playFromStart();
    }

    private double getHorizontalCenter(Rectangle rect) {
        return rect.getX() + rect.getTranslateX() + rect.getWidth() / 2 ;
        // Alternatively:
        // Bounds b = rect.getBoundsInParent();
        // return (b.getMinX() + b.getMaxX()) / 2 ;
    }

    private double getVerticalCenter(Rectangle rect) {
        return rect.getY() + rect.getTranslateY() + rect.getHeight() / 2 ;
        // Alternatively:
        // Bounds b = rect.getBoundsInParent();
        // return (b.getMinY() + b.getMaxY()) / 2 ;
    }

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