I've tried to modelise a simple card in javafx with two faces. My goal is that, when clicked, the card does a little animation where it turns on itself. To do so, I've tried two unsuccessfull methods. I'll first explain the methods then i'll show my code.
The first one consists in a Group containing two ImageView (respectivelly the front and the back of the card).
front image
back image
When the Group is clicked, there is an animation asking the Group to turn around. But when the animation begins and the Group starts to turn, only the card on the top layer of the group is showing.
previewThe second one consists in using the Box class. with this code, I can definitly see the box turning around itself when I click it, the problem is that it seems that there is no way to put an Imageview or any Node in a specific face of the box, so I can't put the images on the box like I'd like to ...
Here is the code for both methods
- method 1 :
public void start(Stage stage) throws Exception {
ImageView front = new ImageView(new Image("cardImages/front.png"));
ImageView back = new ImageView(new Image("cardImages/back.png"));
Group images = new Group(back, front);
for (ImageView i : new ImageView[]{front, back}){
i.setFitWidth(400);
i.setPreserveRatio(true);
}
// Animation
RotateTransition flip = new RotateTransition(Duration.seconds(1), images);
flip.setFromAngle(0);
flip.setToAngle(360);
flip.setCycleCount(1);
flip.setAutoReverse(true);
// axis
flip.setAxis(Rotate.Y_AXIS);
images.setOnMouseClicked(event -> {
// turn the card
flip.play();
});
BorderPane root = new BorderPane();
root.setPrefSize(800, 700);
root.setCenter(images);
stage.setScene(new Scene(root));
stage.show();
}
- method 2 :
public void start(Stage stage) throws Exception {
//Drawing a Box
Box box = new Box();
//Setting the properties of the Box
box.setWidth(1080.0);
box.setHeight(1920.0);
box.setDepth(20.0);
// reducing box size
box.setScaleX(0.2);
box.setScaleY(0.2);
//Setting the material of the box
PhongMaterial material = new PhongMaterial();
material.setDiffuseColor(Color.BURLYWOOD);
//Setting the diffuse color material to box
box.setMaterial(material);
//Setting the rotation animation to the box
RotateTransition rotateTransition = new RotateTransition();
//Setting the duration for the transition
rotateTransition.setDuration(Duration.seconds(1));
//Setting the node for the transition
rotateTransition.setNode(box);
//Setting the axis of the rotation
rotateTransition.setAxis(Rotate.Y_AXIS);
//Setting the angle of the rotation
rotateTransition.setByAngle(180);
//Setting the cycle count for the transition
rotateTransition.setCycleCount(0);
//Setting auto reverse value to false
rotateTransition.setAutoReverse(false);
// play transion
box.setOnMouseClicked(e->{
rotateTransition.play();
});
//Creating a Group object
Group group = new Group(box);
BorderPane root = new BorderPane();
root.setCenter(group);
//Creating a scene object
Scene scene = new Scene(root, 800, 500);
//Setting title to the Stage
stage.setTitle("javafx box exemple");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}