Java 翻转卡片动画

Flip a card animation

提问by Cyberlurk

I'm trying to flip a coloured rectangle. Is it possible to use the rotateTransition to do this?

我正在尝试翻转一个彩色矩形。是否可以使用 rotateTransition 来做到这一点？

I have tried the following code:

我尝试了以下代码：

 public void rotateField(){
    RotateTransition rt = new RotateTransition(Duration.millis(3000), field[4][4]);
    rt.setByAngle(360);
    rt.setCycleCount(1);
    rt.play();
}

However, this doesn't flip the rectangle, it just rotates it. I would like to actually flip the rectangle as you would flip a playing card.

然而，这不会翻转矩形，它只是旋转它。我想像翻转扑克牌一样翻转矩形。

Is it possible to use the rotateTransition class for this?

是否可以为此使用 rotateTransition 类？

采纳答案by jewelsea

I like Sergey's solution, it is such a clever use of ScaleTransition and working in 2D means you don't need to deal with some of the complexities of 3D.

我喜欢 Sergey 的解决方案，它巧妙地使用了 ScaleTransition，在 2D 中工作意味着您不需要处理 3D 的一些复杂性。

---

---

Here a couple of 3D rotation samples.

这里有几个 3D 旋转示例。

Rotates a 2D Node (an ImageView) round the Y axis (requires JavaFX 2.2 + 3D support).

围绕 Y 轴旋转 2D 节点（一个 ImageView）（需要 JavaFX 2.2 + 3D 支持）。

import javafx.animation.*;
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.image.*;
import javafx.scene.layout.StackPane;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;
import javafx.util.Duration;

public class QuickFlip extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        Node card = createCard();

        stage.setScene(createScene(card));
        stage.show();

        RotateTransition rotator = createRotator(card);
        rotator.play();
    }

    private Scene createScene(Node card) {
        StackPane root = new StackPane();
        root.getChildren().addAll(card);

        Scene scene = new Scene(root, 600, 700, true, SceneAntialiasing.BALANCED);
        scene.setCamera(new PerspectiveCamera());

        return scene;
    }

    private Node createCard() {
        return new ImageView(
            new Image(
                "http://www.ohmz.net/wp-content/uploads/2012/05/Game-of-Throne-Magic-trading-cards-2.jpg"
            )
        );
    }

    private RotateTransition createRotator(Node card) {
        RotateTransition rotator = new RotateTransition(Duration.millis(10000), card);
        rotator.setAxis(Rotate.Y_AXIS);
        rotator.setFromAngle(0);
        rotator.setToAngle(360);
        rotator.setInterpolator(Interpolator.LINEAR);
        rotator.setCycleCount(10);

        return rotator;
    }

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

---

---

Rotates a 3D Node (a TriangleMesh) round the Y axis (requires Java 8 + 3D support).

绕 Y 轴旋转 3D 节点（三角形网格）（需要 Java 8 + 3D 支持）。

import javafx.animation.*;
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.image.Image;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;
import javafx.util.Duration;

public class CardFlip extends Application {
    final Image CARD_IMAGE = new Image(
        "http://fc05.deviantart.net/fs70/i/2010/345/7/7/vitam_et_mortem_by_obviouschild-d34oni2.png"
        // sourced from: http://obviouschild.deviantart.com/art/Vitam-et-Mortem-189267194
    );
    final int W = (int) (CARD_IMAGE.getWidth()  / 2);
    final int H = (int) CARD_IMAGE.getHeight();

    @Override
    public void start(Stage stage) throws Exception {
        Node card = createCard();

        stage.setScene(createScene(card));
        stage.show();

        RotateTransition rotator = createRotator(card);
        rotator.play();
    }

    private Scene createScene(Node card) {
        StackPane root = new StackPane();
        root.getChildren().addAll(card, new AmbientLight(Color.WHITE));

        Scene scene = new Scene(root, W + 200, H + 200, true, SceneAntialiasing.BALANCED);
        scene.setFill(Color.MIDNIGHTBLUE.darker().darker().darker().darker());
        scene.setCamera(new PerspectiveCamera());

        return scene;
    }

    private RotateTransition createRotator(Node card) {
        RotateTransition rotator = new RotateTransition(Duration.millis(10000), card);
        rotator.setAxis(Rotate.Y_AXIS);
        rotator.setFromAngle(0);
        rotator.setToAngle(360);
        rotator.setInterpolator(Interpolator.LINEAR);
        rotator.setCycleCount(10);

        return rotator;
    }

    private Node createCard() {
        MeshView card = new MeshView(createCardMesh());

        PhongMaterial material = new PhongMaterial();
        material.setDiffuseMap(CARD_IMAGE);
        card.setMaterial(material);

        return card;
    }

    private TriangleMesh createCardMesh() {
        TriangleMesh mesh = new TriangleMesh();

        mesh.getPoints().addAll(-1 * W/2, -1 * H/2 , 0, 1 * W/2, -1 * H/2, 0, -1 * W/2, 1 * H/2, 0, 1 * W/2, 1 * H/2, 0);
        mesh.getFaces().addAll(0, 0, 2, 2, 3, 3, 3, 3, 1, 1, 0, 0);
        mesh.getFaces().addAll(0, 4, 3, 7, 2, 6, 3, 7, 0, 4, 1, 5);
        mesh.getTexCoords().addAll(0, 0, 0.5f, 0, 0, 1, 0.5f, 1, 0.5f, 0, 1, 0, 0.5f, 1, 1, 1);

        return mesh;
    }

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

回答by Sergey Grinev

Not in 2D world. But you can imitate card flip using two ScaleTransitions:

不是在 2D 世界中。但是您可以使用两个ScaleTransitions来模仿卡片翻转：

Rectangle front = new Rectangle(50, 50);

ScaleTransition stHideFront = new ScaleTransition(Duration.millis(1500), front);
stHideFront.setFromX(1);
stHideFront.setToX(0);

Rectangle back = new Rectangle(50, 50, Color.RED);
back.setScaleX(0);

ScaleTransition stShowBack = new ScaleTransition(Duration.millis(1500), back);
stShowBack.setFromX(0);
stShowBack.setToX(1);

stHideFront.setOnFinished(new EventHandler<ActionEvent>() {
    @Override
    public void handle(ActionEvent t) {
        stShowBack.play();
    }
});

StackPane root = new StackPane();
root.getChildren().addAll(front, back);
Scene scene = new Scene(root, 300, 250);
primaryStage.setScene(scene);

primaryStage.show();
stHideFront.play();