Terjemahkan posisi reset transisi di javaFX

Aug 17 2020

Saya mencoba untuk memindahkan lingkaran dari (100,200) ke (400,200) dan setelah satu siklus lingkaran akan mulai bergerak dari (100,100) ke (200,100) dan terus mengulangi gerakan itu. Setelah siklus pertama saya mengatur ulang posisi lingkaran menggunakan circle.setCenterX (100) dan circle.setCenterY (100). Namun, ini tidak tercermin dalam animasinya. Lingkaran disetel ulang ke (400.100) dan terus bergerak maju ke arah X alih-alih mengulangi gerakan. Saya baru mengenal javaFX. Bantuan apa pun akan dihargai.

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.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Test extends Application
{
  public static void main(String[] args)
  {
    launch(args);
  }

  final double lambda = 0.1; // pixel per millisecond
  double posX = 100;
  double posY = 200;
  double time = 0;
  double velocityX = 1*lambda;
  double velocityY = 0*lambda;
  Circle circle = new Circle(posX, posY, 20, Color.AQUA);
  Circle ref1 = new Circle(100, 200, 5, Color.CADETBLUE);
  Circle ref2 = new Circle(400, 200, 5, Color.CADETBLUE);
  Circle ref3 = new Circle(100, 100, 5, Color.CADETBLUE);

  @Override
  public void start(Stage stage) throws Exception
  {
    Pane pane = new Pane();
    pane.getChildren().addAll(circle, ref1, ref2, ref3);

    BorderPane root = new BorderPane();
    root.setCenter(pane);
    root.setStyle("-fx-background-color: #29353B");
    double WIDTH = 800;
    double HEIGHT = 600;
    Scene scene = new Scene(root, WIDTH, HEIGHT);
    stage.setScene(scene);
    stage.show();

    move(3000);
  }

  public void move(double dt) // dt in milliseconds
  {
    System.out.println(circle.getCenterX()+", "+circle.getCenterY());
    TranslateTransition translateTransition = new TranslateTransition(Duration.millis(dt), circle);
    //translateTransition.setInterpolator(Interpolator.LINEAR);
    translateTransition.setByX(this.velocityX*dt);
    translateTransition.setByY(this.velocityY*dt);
    translateTransition.setCycleCount(1);
    translateTransition.play();
    translateTransition.setOnFinished(actionEvent -> { updatePos(dt); move(2000); });
  }


  public void updatePos(double dt)
  {
    //this.posX += this.velocityX*dt;
    //this.posY += this.velocityY*dt;
    this.posX = 100;
    this.posY = 100;
    circle.setCenterX(this.posX);
    circle.setCenterY(this.posY);
  }
}

Jawaban

3 James_D Aug 17 2020 at 19:22

The TranslateTransitionmemodifikasi yang translateXdan translateYsifat, bukan centerXdan centerYsifat. Jika Anda memodifikasi properti centerXdan centerYsaat animasi selesai, Anda juga harus menyetel ulang translateXdan translateYke 0 agar lingkaran muncul pada koordinat tersebut:

  public void updatePos(double dt) {
    //this.posX += this.velocityX*dt;
    //this.posY += this.velocityY*dt;
    this.posX = 100;
    this.posY = 100;
    circle.setCenterX(this.posX);
    circle.setCenterY(this.posY);
    circle.setTranslateX(0);
    circle.setTranslateY(0);
  }

Alternatifnya, Anda dapat menggunakan a Timelinedaripada a TranslateTransitionuntuk secara langsung memanipulasi properti centerXdan centerYdalam animasi:

public void move(double dt) /* dt in milliseconds */ {
    System.out.println(circle.getCenterX() + ", " + circle.getCenterY());
    double targetX = circle.getCenterX() + this.velocityX * dt;
    double targetY = circle.getCenterY() + this.velocityY * dt;
    Timeline timeline = new Timeline(new KeyFrame(Duration.millis(dt),
            new KeyValue(circle.centerXProperty(), targetX),
            new KeyValue(circle.centerYProperty(), targetY)));

    timeline.setOnFinished(actionEvent -> {
        updatePos(dt);
        move(2000);
    });
    timeline.play();
}

public void updatePos(double dt) {
    this.posX = 100;
    this.posY = 100;
    circle.setCenterX(this.posX);
    circle.setCenterY(this.posY);
}