Odtnhj

I'm trying to get a car to animate along a curved path. The PathTransition.OrientationType only seems to give the option to keep the node perpendicular to the path instead of parallel.

Is there a way to make this parallel?

Here is a bit of what I have so far:

 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

Altered code from 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();
 

I was able to get it working by trying other ways to rotate the car, thanks to Fabian for suggesting.
Sedrick's example also helped narrow down where to focus.

Here's what I added:

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

The pivot points were a little unusual, but this made it perfectly centered on the path.
Previously, I tried:

car.setRotate(270);

Which did nothing, leading me to drift away from that idea.