added animation when switching scenes

master
Cemal Odabasioglu 2022-05-21 14:21:32 +02:00
parent 6ca85066db
commit d207ebff19
2 changed files with 46 additions and 17 deletions

View File

@ -1,13 +1,19 @@
package latice.controller; package latice.controller;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Platform; import javafx.application.Platform;
import javafx.fxml.FXML; import javafx.fxml.FXML;
import javafx.scene.Node; import javafx.scene.Node;
import javafx.scene.Scene; import javafx.scene.Scene;
import javafx.scene.input.MouseEvent; import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane; import javafx.scene.layout.StackPane;
import javafx.scene.shape.Rectangle; import javafx.scene.shape.Rectangle;
import javafx.stage.Stage; import javafx.stage.Stage;
import javafx.util.Duration;
import latice.application.LaticeApplicationWindow; import latice.application.LaticeApplicationWindow;
public class MainScreenController extends LaticeApplicationWindow{ public class MainScreenController extends LaticeApplicationWindow{
@ -17,6 +23,10 @@ public class MainScreenController extends LaticeApplicationWindow{
private Rectangle rulesButton; private Rectangle rulesButton;
@FXML @FXML
private Rectangle exitButton; private Rectangle exitButton;
@FXML
private StackPane parentStackPane;
@FXML
private BorderPane menuBorderPane;
// Event Listener on Rectangle[#playButton].onMouseClicked // Event Listener on Rectangle[#playButton].onMouseClicked
@FXML @FXML
@ -24,8 +34,20 @@ public class MainScreenController extends LaticeApplicationWindow{
System.out.println("playButtonClicked"); System.out.println("playButtonClicked");
Stage stage = (Stage) ((Node) event.getTarget()).getScene().getWindow(); Stage stage = (Stage) ((Node) event.getTarget()).getScene().getWindow();
StackPane root = getRootLayout(); StackPane root = getRootLayout();
Scene scene = new Scene(root, 1280, 720); root.translateYProperty().set(stage.getHeight());
stage.setScene(scene); parentStackPane.getChildren().add(root);
//parameters of the animation
Timeline timeline = new Timeline();
KeyValue kv = new KeyValue(root.translateYProperty(), 0, Interpolator.EASE_IN);
KeyFrame kf = new KeyFrame(Duration.seconds(1), kv);
timeline.getKeyFrames().add(kf);
//when the animation is finished we're removing the main screen
timeline.setOnFinished(t -> {
parentStackPane.getChildren().remove(menuBorderPane);
});
timeline.play();
} }
// Event Listener on Rectangle[#rulesButton].onMouseClicked // Event Listener on Rectangle[#rulesButton].onMouseClicked
@FXML @FXML

View File

@ -4,20 +4,27 @@
<?import javafx.scene.image.ImageView?> <?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?> <?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.Pane?> <?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.shape.Rectangle?> <?import javafx.scene.shape.Rectangle?>
<BorderPane prefHeight="720.0" prefWidth="1280.0" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="latice.controller.MainScreenController">
<center> <StackPane fx:id="parentStackPane" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="latice.controller.MainScreenController">
<Pane prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER"> <children>
<children> <BorderPane fx:id="menuBorderPane" prefHeight="720.0" prefWidth="1280.0">
<ImageView fitHeight="720.0" fitWidth="1280.0" pickOnBounds="true" preserveRatio="true"> <center>
<image> <Pane prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<Image url="@/mainScreen.png" /> <children>
</image> <ImageView fitHeight="720.0" fitWidth="1280.0" pickOnBounds="true" preserveRatio="true">
</ImageView> <image>
<Rectangle fx:id="playButton" arcHeight="5.0" arcWidth="5.0" fill="TRANSPARENT" height="151.0" layoutX="345.0" layoutY="175.0" onMouseClicked="#playButtonClicked" stroke="TRANSPARENT" strokeType="INSIDE" width="582.0" /> <Image url="@/mainScreen.png" />
<Rectangle fx:id="rulesButton" arcHeight="5.0" arcWidth="5.0" fill="#1f93ff00" height="152.0" layoutX="346.0" layoutY="355.0" onMouseClicked="#rulesButtonClicked" stroke="TRANSPARENT" strokeType="INSIDE" width="585.0" /> </image>
<Rectangle fx:id="exitButton" arcHeight="5.0" arcWidth="5.0" fill="#1f93ff00" height="152.0" layoutX="348.0" layoutY="535.0" onMouseClicked="#exitButtonClicked" stroke="TRANSPARENT" strokeType="INSIDE" width="583.0" /> </ImageView>
</children></Pane> <Rectangle fx:id="playButton" arcHeight="5.0" arcWidth="5.0" fill="TRANSPARENT" height="151.0" layoutX="345.0" layoutY="175.0" onMouseClicked="#playButtonClicked" stroke="TRANSPARENT" strokeType="INSIDE" width="582.0" />
</center> <Rectangle fx:id="rulesButton" arcHeight="5.0" arcWidth="5.0" fill="#1f93ff00" height="152.0" layoutX="346.0" layoutY="355.0" onMouseClicked="#rulesButtonClicked" stroke="TRANSPARENT" strokeType="INSIDE" width="585.0" />
</BorderPane> <Rectangle fx:id="exitButton" arcHeight="5.0" arcWidth="5.0" fill="#1f93ff00" height="152.0" layoutX="348.0" layoutY="535.0" onMouseClicked="#exitButtonClicked" stroke="TRANSPARENT" strokeType="INSIDE" width="583.0" />
</children>
</Pane>
</center>
</BorderPane>
</children>
</StackPane>