JavaFX的简单PathTransition动画 [英] javafx simple PathTransition animation

问题描述

我使用JavaFX的建设cardgame，我奋斗添加简单的动画。

i'm using JavaFX to build a cardgame and i struggle to add simple animations.

我有在其中多个ImageViews一个HBox中。每个图像具有-80一个右边缘，以获得图像彼此重叠。

I have a HBox with multiple ImageViews in them. Every Image has a right margin of -80 to get the images to overlap each other.

现在我想，当它加入到动画卡。我想要的地方把它放在屏幕（对手球员手），并将其移动到它会一直没有动画的位置。

Now i want to animate the card when it's added. I want to place it somewhere on the screen (opponent player hand) and move it to the position it would've been without animation.

我试过这样：

// Animation
Path path = new Path();
MoveTo moveTo = new MoveTo(200, 200);
moveTo.setAbsolute(true);
path.getElements().add(moveTo);
LineTo lineTo = new LineTo(0, 0);
path.getElements().add(lineTo);
PathTransition pathTransition = new PathTransition();
pathTransition.setDuration(Duration.millis(4000));
pathTransition.setPath(path);
pathTransition.setNode(imageView);
pathTransition.setCycleCount(1);
pathTransition.play();

不过，这并不工作就像我希望它。我不知道如何处理coordiantes并不能找到我的问题的解决方案。

But it doesn't work like i want it to. I have no clue how to handle the coordiantes and can't find a solution for my problem.

我希望有人能帮助我与M Y问题

I hope someone can help me with m y problem

推荐答案

正确路径几何关键取决于根父<布局/ code>。在下面的例子中，路径从左上角到右下角，调整，以保持移动长方形在视图中。它增加了矩形到面板，因为它不执行布局调整之外可调整大小的孩子他们的preferred大小。如果你使用了更先进的布局，例如 StackPane ，相应地调整对齐方式：

The correct Path geometry hinges critically on the layout of the root Parent. In the example below, the Path goes from the top-left to the bottom-right, adjusted to keep the moving Rectangle in view. It adds the rectangle to a Pane, "since it does not perform layout beyond resizing resizable children to their preferred sizes." If you use a more advanced layout, e.g. StackPane, adjust the alignment accordingly:

StackPane root = new StackPane();
root.setAlignment(Pos.TOP_LEFT)

import javafx.animation.PathTransition;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;

/** @see http://stackoverflow.com/a/31443755/230513 */
public class AnimationTest extends Application {

    private static final int SIZE = 256;
    private static final int RECT = SIZE / 4;
    private static final int R2 = RECT / 2;

    @Override
    public void start(Stage stage) {
        stage.setTitle("Animation Test");
        Rectangle rect = new Rectangle(0, 0, RECT, RECT);
        rect.setArcHeight(16);
        rect.setArcWidth(16);
        rect.setFill(Color.GOLD);
        Pane root = new Pane();
        root.getChildren().add(rect);
        Scene scene = new Scene(root, SIZE, SIZE);
        stage.setScene(scene);
        stage.show();

        Path path = new Path();
        path.getElements().add(new MoveTo(R2, R2));
        path.getElements().add(new LineTo(SIZE - R2, SIZE - R2));
        PathTransition pathTransition = new PathTransition();
        pathTransition.setDuration(Duration.millis(1000));
        pathTransition.setPath(path);
        pathTransition.setNode(rect);
        pathTransition.setCycleCount(Timeline.INDEFINITE);
        pathTransition.setAutoReverse(true);
        pathTransition.play();
    }

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

}

这篇关于JavaFX的简单PathTransition动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！