I am working on the transition between scenes, the question is the following, in my program I plan to keep an animated background, and it occurred to me that for this, I could use a stack pane, put an imageview on it and load the gif in the latter, and then to make the transitions, simply change the anchor pane that is on the stack pane, that is, change the anchor pane keeping the same stack pane in all the scenes, this works when I change the mode nu (it's the scene that contains the stack pane with the background) to another scene, but when I want to do something inverse, for some reason it doesn't work, and it's probably that I just didn't know how to do it.
This is the code for the transition method from the menu scene to the configuration scene (it does work):
@FXML
private void loadconfig(ActionEvent event) throws IOException {
Parent root = FXMLLoader.load(getClass().getResource("config.fxml"));
Scene scene = myButton.getScene();
root.translateYProperty().set(scene.getHeight()); //aqui movemos el root (escena a cargar), en este caso la altura
myStPane.getChildren().add(root);
TranslateTransition translate = new TranslateTransition();
translate.setNode(root);
translate.setDuration(Duration.millis(150));
translate.setToY(0);
translate.setOnFinished(event1 -> {
myStPane.getChildren().remove(myAnchorPane);//Esto se ejecuta al finalizar la animacion
});
TranslateTransition translat2 = new TranslateTransition();
translat2.setNode(myAnchorPane);
translat2.setDuration(Duration.millis(200));
translat2.setToY(-500);
translate.playFromStart();
translat2.playFromStart();
}
And here is the attempted reverse animation:
@FXML///cambiar este metodo y checar temita con el stack pane flojo
private void loadmenu(ActionEvent event) throws IOException {
Parent root = FXMLLoader.load(getClass().getResource("menu.fxml")); //la escena raiz se carga, es decir toma como base esta desde la escena que se usara a continuacion
Scene scene = myButton.getScene();//se toma la escena desde un nodo, en este caso el boton que inicia la accion
root.translateYProperty().set(scene.getHeight()); //aqui movemos el root (escena a cargar), en este caso la altura
myStPane.getChildren().add(root);
TranslateTransition translate = new TranslateTransition();
translate.setNode(root);
translate.setDuration(Duration.millis(150));
translate.setToY(0);
translate.setOnFinished(event1 -> {
myStPane.getChildren().remove(myAnchorPane);//Esto se ejecuta al finalizar la animacion
});
TranslateTransition translat2 = new TranslateTransition();
translat2.setNode(myAnchorPane);
translat2.setDuration(Duration.millis(200));
translat2.setToY(-500);
translate.playFromStart();
translat2.playFromStart();
}
As you will notice, it is almost the same, maybe I have to change it more. But the question is that when using it I get an error because since the other scene does not contain any stack pane and this is used to change the anchor pane, a null stack pane is sent and the method does not work correctly.
In case you need it, here is the code for the fxml scenes "menu.fxml":
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.text.Font?>
<StackPane fx:id="myStPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.scenes.MenuCont">
<children>
<ImageView fitHeight="768.0" fitWidth="1366.0" pickOnBounds="true">
<image>
<Image url="@Images/Fondo2.gif" />
</image>
</ImageView>
<AnchorPane fx:id="myAnchorPane" prefHeight="200.0" prefWidth="200.0">
<children>
<ImageView fitHeight="262.0" fitWidth="502.0" layoutX="501.0" layoutY="99.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@Images/icon.png" />
</image>
</ImageView>
<Button fx:id="myButton" layoutX="570.0" layoutY="330.0" mnemonicParsing="false" onAction="#loadconfig" text="Configuracion">
<font>
<Font size="30.0" />
</font>
</Button>
</children>
</AnchorPane>
</children>
</StackPane>
And "config.fxml":
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>
<AnchorPane fx:id="myAnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.scenes.MenuCont">
<children>
<Label layoutX="579.0" layoutY="48.0" text="Opciones" textFill="WHITE">
<font>
<Font size="50.0" />
</font></Label>
<Button fx:id="myButton" layoutX="1217.0" layoutY="676.0" mnemonicParsing="false" onAction="#switchToScene1" text="Volver">
<font>
<Font size="30.0" />
</font></Button>
</children>
</AnchorPane>