javafx 使用 translatetransition 和 keyevent 在屏幕上移动图像

Question

我正在尝试制作一个简单的基于图块的移动系统，以便在按下一个方向时播放平移过渡以平滑地将角色移动一个图块。我运行遇到的问题是，当我播放动画时，图像可以很好地过渡，但在过渡完成后，图像会跳到比预期更远的位置。如果我取出代码的 onFinished 部分，那么动画会完美播放，但之后按方向会导致图像从以前的位置而不是当前位置移动。

这是代码

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


public class ControlTranslateImage extends Application
{   
    final int STEP_SIZE = 64;
    final Duration DURATION = Duration.millis(500);
    Group player;

    public static void main(String[] args)
    {
        launch(args);
    }

    @Override
    public void start(Stage stage)
    {
        final ImageView image0 = new ImageView(new Image("http://opengameart.org/sites/default/files/styles/medium/public/slime_idle.gif"));


        player = new Group(image0);
        player.getChildren().setAll(image0);

        final Scene scene = new Scene(player, 900, 600, Color.WHITE);

        moveOnKeyPressed(scene, player);

        stage.setScene(scene);
        stage.show();
    }

    private void moveOnKeyPressed(Scene scene, Group player)
    {

        final TranslateTransition transition = new TranslateTransition(DURATION, player);

        scene.setOnKeyPressed(e -> {
            switch(e.getCode())
            {

                case UP:
                {

                    transition.setFromX(player.getLayoutX());
                    transition.setFromY(player.getLayoutY());
                    transition.setToX(player.getLayoutX());
                    transition.setToY(player.getLayoutY() - STEP_SIZE);
                    transition.playFromStart();
                    transition.setOnFinished(t -> {
                        player.setLayoutX(player.getLayoutX());
                        player.setLayoutY(player.getLayoutY() - STEP_SIZE);
                    });

                } break;
                case DOWN:
                {

                    transition.setFromX(player.getLayoutX());
                    transition.setFromY(player.getLayoutY());
                    transition.setToX(player.getLayoutX());
                    transition.setToY(player.getLayoutY() + STEP_SIZE);
                    transition.playFromStart();

                    transition.setOnFinished(t -> {
                        player.setLayoutX(player.getLayoutX());
                        player.setLayoutY(player.getLayoutY() + STEP_SIZE);
                    });

                } break;
                case LEFT:
                {

                    transition.setFromX(player.getLayoutX());
                    transition.setFromY(player.getLayoutY());
                    transition.setToX(player.getLayoutX() - STEP_SIZE);
                    transition.setToY(player.getLayoutY());
                    transition.playFromStart();

                    transition.setOnFinished(t -> {
                        player.setLayoutX(player.getLayoutX() - STEP_SIZE);
                        player.setLayoutY(player.getLayoutY());
                    });
                    player.setLayoutX(player.getLayoutX() - STEP_SIZE);
                    player.setLayoutY(player.getLayoutY());


                } break;
                case RIGHT:
                {

                    transition.setFromX(player.getLayoutX());
                    transition.setFromY(player.getLayoutY());
                    transition.setToX(player.getLayoutX() + STEP_SIZE);
                    transition.setToY(player.getLayoutY());
                    transition.playFromStart();

                    transition.setOnFinished(t -> {
                        player.setLayoutX(player.getLayoutX() + STEP_SIZE);
                        player.setLayoutY(player.getLayoutY());
                    });
                } break;

                default:break;

            }
        });
    }
}

Answer 1

固定码

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


public class ControlTranslateImage extends Application
{   
    final int STEP_SIZE = 64;
    final Duration DURATION = Duration.millis(500);
    Group player;

    public static void main(String[] args)
    {
        launch(args);
    }

    @Override
    public void start(Stage stage)
    {
        final ImageView image0 = new ImageView(new Image("http://opengameart.org/sites/default/files/styles/medium/public/slime_idle.gif"));

        player = new Group(image0);

        final Scene scene = new Scene(player, 900, 600, Color.WHITE);

        moveOnKeyPressed(scene, player);

        stage.setScene(scene);
        stage.show();
    }

    private void moveOnKeyPressed(Scene scene, Group player)
    {

        final TranslateTransition transition = new TranslateTransition(DURATION, player);
        scene.setOnKeyPressed(e -> {
            switch(e.getCode())
            {

                case UP:
                {

                    transition.setFromX(player.getTranslateX());
                    transition.setFromY(player.getTranslateY());
                    transition.setToX(player.getTranslateX());
                    transition.setToY(player.getTranslateY() - STEP_SIZE);
                    transition.playFromStart();

                } break;
                case DOWN:
                {

                    transition.setFromX(player.getTranslateX());
                    transition.setFromY(player.getTranslateY());
                    transition.setToX(player.getTranslateX());
                    transition.setToY(player.getTranslateY() + STEP_SIZE);
                    transition.playFromStart();

                } break;
                case LEFT:
                {

                    transition.setFromX(player.getTranslateX());
                    transition.setFromY(player.getTranslateY());
                    transition.setToX(player.getTranslateX() - STEP_SIZE);
                    transition.setToY(player.getTranslateY());
                    transition.playFromStart();

                } break;
                case RIGHT:
                {

                    transition.setFromX(player.getTranslateX());
                    transition.setFromY(player.getTranslateY());
                    transition.setToX(player.getTranslateX() + STEP_SIZE);
                    transition.setToY(player.getTranslateY());
                    transition.playFromStart();

                } break;

                default:break;

            }
        });
    }
}

javafx 使用 translatetransition 和 keyevent 在屏幕上移动图像

javafx using translatetransition and keyevent to move image around screen

javafx

transition

move

translate

keyevent