How to make the javafx animation using path transition smooth?

问题

My goal for now is to make the animation of a little circle, going along the path of a big circle. In the future, I would need to dynamically change the speed of revolution using a slider, but that is not a problem now. I can't figure out how to make this animation smooth? By this I mean that I want my little circle to not slow down when it reaches the end of animation. Is this possible using path transition? Or should I use some other method to implement animation in order for it to be smooth?

Here is what I have for now:

import javafx.animation.*;
    import javafx.application.Application;
    import javafx.scene.Scene;
    import javafx.scene.layout.BorderPane;
    import javafx.scene.layout.Pane;
    import javafx.scene.paint.Color;
    import javafx.scene.shape.*;
    import javafx.stage.Stage;
    import javafx.util.Duration;

    public class SpinningCircles extends Application {

        BorderPane root = new BorderPane();
        int BigCircRad = 200;
        int BigCircX = 750;
        int BigCircY = 400;
        double duration = 1;

        public static void main(String[] args) {
            launch();
        }
        @Override
        public void start(Stage stage){
            Circle cir1 = new Circle(BigCircRad);
            Circle cir2 = new Circle(BigCircRad/10);

            cir1.setFill(Color.WHITE);
            cir2.setFill(Color.WHITE);

            cir1.setStroke(Color.BLUE);
            cir2.setStroke(Color.BLUE);

            cir1.setStrokeWidth(4);
            cir2.setStrokeWidth(4);

            cir1.setCenterX(BigCircX);
            cir2.setCenterX(BigCircX);

            cir1.setCenterY(BigCircY);
            cir2.setCenterY(BigCircY-BigCircRad);

            PathTransition pt = new PathTransition();
            pt.setNode(cir2);
            pt.setDuration(Duration.seconds(duration));
            pt.setPath(cir1);
            pt.setDelay(Duration.seconds(1));
            pt.setCycleCount(Animation.INDEFINITE);
            pt.play();

            root.getChildren().addAll(cir1, cir2);
            Scene scene = new Scene(root, 1000, 500);
            stage.setScene(scene);
            stage.setTitle("Spinning circles");
            stage.setMaximized(true);
            stage.setFullScreen(true);
            stage.show();
        }
    }

回答1:

You need to set the interpolator for the animation.

From the docs, the interpolator

Controls the timing for acceleration and deceleration at each Transition cycle.

Default interpolator is set to Interpolator.EASE_BOTH.

The default, Interpolator.EASE_BOTH

will make an animation start slow, then accelerate and slow down again towards the end, all in a smooth manner.

Instead, use a LINEAR interpolator:

    pt.setInterpolator(Interpolator.LINEAR);

Note the interpolator must be set before the animation is started:

    PathTransition pt = new PathTransition();
    pt.setNode(cir2);
    pt.setDuration(Duration.seconds(duration));
    pt.setPath(cir1);
    pt.setDelay(Duration.seconds(1));
    pt.setCycleCount(Animation.INDEFINITE);

    pt.setInterpolator(Interpolator.LINEAR);

    pt.play();

来源：https://stackoverflow.com/questions/62451115/how-to-make-the-javafx-animation-using-path-transition-smooth

标签

java

animation

javafx