Question

我有8x8 Board，，其中SIZE = 8，moveHistory是javafx.geometry.Point2D 的ArrayList。这是代码：

private class ChessBoard extends Pane {
    ImageView knightImageView = new ImageView("image/knight.jpg");

    ChessBoard() {
        this.setOnMouseClicked(e -> {
            startX = (int)(e.getX() / (getWidth() / SIZE));
            startY = (int)(e.getY() / (getHeight() / SIZE));
            resetMoveHistory();
            paint();
        });
    }

    protected void paint() {
        this.getChildren().clear();

        this.getChildren().add(knightImageView);
        knightImageView.setX(startX * getWidth() / SIZE);
        knightImageView.setY(startY * getHeight() / SIZE);
        knightImageView.setFitWidth(getWidth() / SIZE);
        knightImageView.setFitHeight(getHeight() / SIZE);

        for (int i = 1; i <= SIZE; i++) {
            this.getChildren().add(new Line(0, i * getHeight() / SIZE,
                    getWidth(), i * getHeight() / SIZE));
            this.getChildren().add(new Line(i * getWidth() / SIZE, 0,
                    i * getWidth() / SIZE, getHeight()));
        }

        if (moveHistory != null) {
            for (int i = 1; i < moveHistory.size(); i++) {
                Point2D p1 = moveHistory.get(i - 1);
                Point2D p2 = moveHistory.get(i);
                PathTransition ptMove = new PathTransition();
                Line line = (new Line(
                        p1.getX() * (getWidth() / SIZE) + getWidth() / SIZE / 2,
                        p1.getY() * (getHeight() / SIZE) + (getHeight() / SIZE / 2),
                        p2.getX() * (getWidth() / SIZE) + getWidth() / SIZE / 2,
                        p2.getY() * (getHeight() / SIZE) + getHeight() / SIZE / 2));
                ptMove.setPath(line);
                ptMove.setNode(knightImageView);
                ptMove.setCycleCount(1);
                ptMove.setDuration(Duration.seconds(2));
                ptMove.play();
            }
        }
    }
}

我要做的是显示最后一个循环的动作，但它只显示1个不正确的动作并一直反复播放。 我哪里出错了？ 任何帮助都会非常有用！

Answer 1

play()方法启动动画播放并立即退出。因此，您几乎可以同时有效地启动所有动画，并让它们同时播放。每个动画都会设置translateX的{{1}}和translateY属性，这些值将在动画持续时间内由每个渲染帧上的每个动画设置。无论哪个动画设置最后的值都会在该帧上“赢”，这就是要渲染的值。所以整体效果将是高度不可预测的。

你想要的（我认为）是一个接一个地播放一个动画。您可以使用SequentialTransition执行此操作。您的代码应该看起来像这样：

knightImageView

此处需要注意的另一件事是，过渡通过操纵if (moveHistory != null) { SequentialTransition sequentialTransition = new SequentialTranstiion(); for (int i = 1; i < moveHistory.size(); i++) { Point2D p1 = moveHistory.get(i - 1); Point2D p2 = moveHistory.get(i); PathTransition ptMove = new PathTransition(); Line line = (new Line( p1.getX() * (getWidth() / SIZE) + getWidth() / SIZE / 2, p1.getY() * (getHeight() / SIZE) + (getHeight() / SIZE / 2), p2.getX() * (getWidth() / SIZE) + getWidth() / SIZE / 2, p2.getY() * (getHeight() / SIZE) + getHeight() / SIZE / 2)); ptMove.setPath(line); ptMove.setNode(knightImageView); ptMove.setCycleCount(1); ptMove.setDuration(Duration.seconds(2)); sequentialTransition.getChildren().add(ptMove); } sequentialTransition.play(); }和translateX坐标来移动图像视图。您调用的translateY setX方法可能不符合您的想法：请参阅Javadocs。

循环中的PathTransition

1 个答案: