# 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?

1
6
11/10/2013 11:57:27 PM

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

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

return scene;
}

private Node createCard() {
return new ImageView(
new Image(
)
);
}

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

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

11
11/11/2013 11:55:51 AM

Not in 2D world. But you can imitate card flip using two `ScaleTransition`s:

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