Question

我正在尝试让汽车沿弯曲的路径进行动画处理。似乎PathTransition.OrientationType仅提供使节点垂直于路径而不是平行的选项。

有没有办法做到这一点？

以下是我到目前为止的内容：

    VBox car = new VBox();

    Line track1 = new Line(242, 10, 242, 200);
    Line track2 = new Line(258, 10, 258, 200);
    Line track3 = new Line(242, 600, 242, 800);
    Line track4 = new Line(258, 600, 258, 800);

    CubicCurveTo curvePath1 = new CubicCurveTo();
    curvePath1.setControlX1(400.0f);
    curvePath1.setControlY1(300.0f);
    curvePath1.setControlX2(400.0f);
    curvePath1.setControlY2(500.0f);
    curvePath1.setX(250.0f);
    curvePath1.setY(600.0f);

    VBox station1 = new VBox();
    LoadingPosition stationUp = new LoadingPosition();
    LoadingPosition stationDown = new LoadingPosition();
    station1.getChildren().addAll(stationUp, stationDown);
    station1.setLayoutX(170);
    station1.setLayoutY(27);

    VBox station2 = new VBox();
    LoadingPosition station2Up = new LoadingPosition();
    LoadingPosition station2Down = new LoadingPosition();
    station2.getChildren().addAll(station2Up, station2Down);
    station2.setLayoutX(170);
    station2.setLayoutY(712);

    //Setting up the path
    Path path = new Path();
    path.getElements().add(new MoveTo(250f, 70f));
    path.getElements().add(new LineTo(250f, 200f));
    path.getElements().add(curvePath1);
    path.getElements().add(new LineTo(250f, 712f));
    //Instantiating PathTransition class
    PathTransition pathTransition = new PathTransition();

    //Setting duration for the PathTransition
    pathTransition.setDuration(Duration.millis(1000));

    //Setting Node on which the path transition will be applied
    pathTransition.setNode(car);

    //setting path for the path transition
    pathTransition.setPath(path);

    //setting up the cycle count
    pathTransition.setCycleCount(10);

    //setting auto reverse to be true
    pathTransition.setAutoReverse(true);

    pathTransition.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT);

    //Playing path transition
    pathTransition.play();
    //Applying parallel Translation to the circle
    ParallelTransition parallelTransition = new ParallelTransition(
            car, pathTransition);

    //Playing the animation
    parallelTransition.play();
    //Configuring group and scene
    Group root = new Group();
    root.getChildren().addAll(station1, station2, track1, track2, track3, track4, curveTrack1, curveTrack2, car, path);
    Scene scene = new Scene(root, 1200, 900, Color.LIGHTGRAY);
    primaryStage.setScene(scene);
    primaryStage.setTitle("Path Transition Example");
    primaryStage.show();
}

Orthogonal to path instead of parallel

Answer 1

来自here

的更改代码

imp

ort javafx.animation.PathTransition;
import javafx.animation.PathTransition.OrientationType;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.paint.Color;
import javafx.scene.shape.CubicCurveTo;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.stage.Stage;
import javafx.util.Duration;

public class JavaFXApplication extends Application
{

    public static void main(String[] args)
    {

        Application.launch(args);
    }

    @Override
    public void start(Stage primaryStage)
    {

        primaryStage.setTitle("PathTransition");

        Group root = new Group();
        Scene scene = new Scene(root, 800, 300, Color.GREY);

        //ImageView car = new ImageView(new Image("http://hajsoftutorial.com/im/smallcar.png"));
        Image image = new Image(getClass().getResourceAsStream("car.png"));
        ImageView car = new ImageView(image);
        car.setFitHeight(40);
        car.setPreserveRatio(true);

        Path road = new Path();
        road.setStrokeWidth(30);

        MoveTo moveTo = new MoveTo();
        moveTo.setX(150);
        moveTo.setY(30);

        LineTo line1 = new LineTo();
        line1.setX(650);
        line1.setY(30);

        CubicCurveTo cubicTo = new CubicCurveTo();
        cubicTo.setControlX1(800);
        cubicTo.setControlY1(30);
        cubicTo.setControlX2(800);
        cubicTo.setControlY2(270);
        cubicTo.setX(650);
        cubicTo.setY(270);

        LineTo line2 = new LineTo();
        line2.setX(150);
        line2.setY(270);

        CubicCurveTo cubicTo2 = new CubicCurveTo();
        cubicTo2.setControlX1(0);
        cubicTo2.setControlY1(270);
        cubicTo2.setControlX2(0);
        cubicTo2.setControlY2(30);
        cubicTo2.setX(150);
        cubicTo2.setY(30);

        road.getElements().addAll(moveTo, line1, cubicTo, line2, cubicTo2);

        PathTransition pathTransition = new PathTransition();
        pathTransition.setDuration(Duration.millis(10000));
        pathTransition.setNode(car);
        pathTransition.setPath(road);
        pathTransition.setOrientation(OrientationType.ORTHOGONAL_TO_TANGENT);
        pathTransition.setCycleCount(Timeline.INDEFINITE);
        pathTransition.play();

        root.getChildren().addAll(road, car);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

Answer 2

感谢Fabian的建议，通过尝试其他方法使汽车旋转，我得以使它正常工作。塞德里克（Sedrick）的例子也有助于缩小关注范围。

这是我添加的内容：

car.getTransforms().add(new Rotate(270,totalCarHeight/2,totalCarWidth));

枢轴点有点不寻常，但这使它完美地位于路径的中心。以前，我尝试过：

car.setRotate(270);

什么也没做，导致我放弃了这个想法。

JavaFX-沿与切线平行的路径进行动画处理

2 个答案: