JavaFX-沿着平行于切线的路径制作动画

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();
}

正交于路径而不是平行

Answer 1

从此处更改代码

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的建议，我可以通过尝试其他方式旋转汽车来让它工作。塞德里克的例子也有助于缩小关注范围。

以下是我添加的内容：

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

枢轴点有点不寻常，但这使它完全以路径为中心。以前，我尝试过：

car.setRotate(270);

这并没有起到什么作用，导致我偏离了那个想法。