Flip a card animation

Question

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

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?

Phrensy

Answer 1

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.

---

Here a couple of 3D rotation samples.

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

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).

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();
    }
}

Gringo

your examples are awesome! – Tedie

great example, but how can i stop it after one rotation? – Gaddi

There is a cycle count, change the line rotator.setCycleCount(10) to rotator.setCycleCount(1) to just rotate once. – Gringo

Jewelsea how do i actually use this example as Animation animate = new Animation(); animate.launch();? I tried integrating it but to no avail. Purpose is to integrate into a panel within a jframe – Renatarenate

@KayzelMoo create a new question, in it reference this one, and include a minimal reproducible example (minimal, complete code that somebody could use to replicate your issue) in your question. – Gringo

Hello. Would it be difficult to implement a feature that would allow the front and the back to show a different image, just like a playing card? – Officinal

That can be done Zoltan. If you have tried to do it and gotten stuck, ask a new question, referencing this one if you like. – Gringo

Answer 2

Not in 2D world. But you can imitate card flip using two 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();

Tedie

Answer 3

Here is an extension of @jewelsea's answer. This example shows one way to flip and show the back of the card. The way I thought of this was to change the ImageView's image at half the duration of the RotateTransition.

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 App extends Application {

    boolean isFrontShowing = true;
    Image frontImage = new Image(getClass().getResourceAsStream("image/front.jpg"));
    Image backImage = new Image(getClass().getResourceAsStream("image/back.jpg"));

    @Override
    public void start(Stage stage) throws Exception {
        ImageView card = createCard();
        card.setOnMouseClicked((t) -> {
            RotateTransition rotator = createRotator(card);
            PauseTransition ptChangeCardFace = changeCardFace(card);
            
            ParallelTransition parallelTransition = new ParallelTransition(rotator, ptChangeCardFace);
            parallelTransition.play();

            isFrontShowing = !isFrontShowing;
        });

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

    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 ImageView createCard() {
        ImageView card = new ImageView(frontImage);

        return card;
    }

    private RotateTransition createRotator(ImageView card) {
        RotateTransition rotator = new RotateTransition(Duration.millis(1000), card);
        rotator.setAxis(Rotate.Y_AXIS);

        if (isFrontShowing) {
            rotator.setFromAngle(0);
            rotator.setToAngle(180);
        } else {
            rotator.setFromAngle(180);
            rotator.setToAngle(360);
        }
        rotator.setInterpolator(Interpolator.LINEAR);
        rotator.setCycleCount(1);

        return rotator;
    }

    private PauseTransition changeCardFace(ImageView card) {
        PauseTransition pause = new PauseTransition(Duration.millis(500));

        if (isFrontShowing) {
            pause.setOnFinished(
                    e -> {
                        card.setImage(backImage);
                    });
        } else {
            pause.setOnFinished(
                    e -> {
                        card.setImage(frontImage);
                    });
        }

        return pause;
    }

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

Hoon