在 javaFX 中翻译转换重置位置
Translate transition reset position in javaFX
我正在尝试将一个圆圈从 (100,200) 移动到 (400,200),一个循环后圆圈应该开始从 (100,100) 移动到 (200,100) 并继续重复该动作。在第一个循环之后,我使用 circle.setCenterX(100) 和 circle.setCenterY(100) 重置圆的位置。然而,这并没有体现在动画中。圆圈重置为 (400,100) 并继续沿 X 方向向前移动,而不是重复运动。我是 javaFX 的新手。任何帮助将不胜感激。
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);
}
}
TranslateTransition
修改 translateX
和 translateY
属性,而不是 centerX
和 centerY
属性。如果您在动画完成时修改 centerX
和 centerY
属性,您还应该将 translateX
和 translateY
重置为 0 以使圆出现在这些坐标处:
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);
}
或者,您可以使用 Timeline
而不是 TranslateTransition
来直接操作动画中的 centerX
和 centerY
属性:
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);
}
我正在尝试将一个圆圈从 (100,200) 移动到 (400,200),一个循环后圆圈应该开始从 (100,100) 移动到 (200,100) 并继续重复该动作。在第一个循环之后,我使用 circle.setCenterX(100) 和 circle.setCenterY(100) 重置圆的位置。然而,这并没有体现在动画中。圆圈重置为 (400,100) 并继续沿 X 方向向前移动,而不是重复运动。我是 javaFX 的新手。任何帮助将不胜感激。
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);
}
}
TranslateTransition
修改 translateX
和 translateY
属性,而不是 centerX
和 centerY
属性。如果您在动画完成时修改 centerX
和 centerY
属性,您还应该将 translateX
和 translateY
重置为 0 以使圆出现在这些坐标处:
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);
}
或者,您可以使用 Timeline
而不是 TranslateTransition
来直接操作动画中的 centerX
和 centerY
属性:
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);
}