Как прокручивать два фона в javaFX

Question

У меня есть два VBox'а на панели с шириной 450 и 300 и высотой 450 соответственно. У каждого из них одно и то же изображение gif, но разного цвета, называемого зеленым и белым соответственно (оба имеют ширину 750 и высоту 450, что соответствует узлу панели). Дело в том, что я хочу передать первый VBox (с этого момента VB1) для оси X + 300, пока он «скользит» по его фону, а второй VBox (VB2) исчезнет и снова появится на оси X - 450 (то же самое со скользящим фоном, но он просто появится там). Проблема, с которой я столкнулся, заключается в том, что если я установлю gif в качестве фонового изображения, если я передаю узел, фон скользит, если я передаю элементы VB1, фон и узел останутся там, где они были. Я пробовал ImageView, но он выходит за пределы VB1 и охватывает весь VB2. Вот наглядный пример:

Вот код, который у меня есть (я установил фоновое изображение VB2 как фон панели, а VB2 имеет прозрачный фон для отображения белой части gif)

sample.f xml:

<Pane fx:id="loginPlatform" maxHeight="450.0" maxWidth="750.0" minHeight="450.0" minWidth="750.0" prefHeight="450.0" prefWidth="750.0" style="-fx-background-image: url('sample/white.gif');" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <children>
      <VBox fx:id="ChangingVBox" maxWidth="450" prefHeight="450.0" prefWidth="450.0" style="-fx-background-image: url('sample/green.gif')">
         <fx:include fx:id="login" source="logIn.fxml" />
         <fx:include fx:id="signup" managed="false" source="signUp.fxml" visible="false" />
         <fx:include fx:id="forgot" managed="false" source="forgotPassword.fxml" visible="false" />
      </VBox>
      <VBox fx:id="SliderVBox" layoutX="450.0" prefHeight="450.0" prefWidth="300.0" styleClass="Slider" stylesheets="@styles.css">
         <children>
            <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
               <children>
                  <Label alignment="CENTER" contentDisplay="CENTER" text="What's next?" HBox.hgrow="ALWAYS">
                     <font>
                        <Font name="Century Gothic" size="22.0" />
                     </font>
                     <padding>
                        <Insets bottom="10.0" left="20.0" right="20.0" top="10.0" />
                     </padding>
                  </Label>
               </children>
            </HBox>
            <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
               <children>
                  <Button fx:id="signUpButton" mnemonicParsing="false" prefHeight="70.0" prefWidth="250.0" style="-fx-border-color: pink;" text="Sign-Up?">
                     <font>
                        <Font name="Century Gothic" size="20.0" />
                     </font>
                  </Button>
               </children>
            </HBox>
            <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
               <children>
                  <Button fx:id="forgotPasswordButton" mnemonicParsing="false" prefHeight="70.0" prefWidth="250.0" style="-fx-border-color: yellow;" text="Forgot Password?">
                     <font>
                        <Font name="Century Gothic" size="20.0" />
                     </font>
                  </Button>
               </children>
            </HBox>
         </children></VBox>
   </children>
</Pane>

Это logIn.f xml:

<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="450.0" prefWidth="450.0" stylesheets="@styles.css" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <HBox prefHeight="450.0" prefWidth="450.0">
         <children>
            <ImageView fitHeight="450.0" fitWidth="450.0" managed="false" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@green.gif" />
               </image></ImageView>
            <VBox fx:id="login" prefHeight="450.0" prefWidth="450.0">
               <children>
                  <HBox alignment="BOTTOM_CENTER" prefHeight="100.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
                     <children>
                        <TextField prefHeight="50.0" prefWidth="300.0" promptText="E-mail or Nickname" style="-fx-border-color: green;">
                           <font>
                              <Font name="Century Gothic" size="20.0" />
                           </font>
                        </TextField>
                     </children>
                  </HBox>
                  <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
                     <children>
                        <PasswordField prefHeight="50.0" prefWidth="300.0" promptText="Password" style="-fx-border-color: green;">
                           <font>
                              <Font name="Century Gothic" size="20.0" />
                           </font>
                        </PasswordField>
                     </children>
                  </HBox>
                  <HBox alignment="TOP_CENTER" prefHeight="100.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
                     <children>
                        <Button mnemonicParsing="false" prefHeight="70.0" prefWidth="150.0" text="Log-In">
                           <HBox.margin>
                              <Insets />
                           </HBox.margin>
                           <font>
                              <Font name="Century Gothic" size="20.0" />
                           </font>
                        </Button>
                     </children>
                  </HBox>
               </children>
            </VBox>
         </children>
      </HBox>
   </children>
</VBox>

И мой контроллер:

public Pane loginPlatform;
public VBox ChangingVBox;
public VBox SliderVBox, login, signup, forgot;

//where's VBox
private boolean isChangingVBoxLeft = true;

@FXML
void initialize() {
    Button btnOptions = (Button) SliderVBox.lookup("#signUpButton");
    btnOptions.setOnAction(this::goToSignUp);
}

private void goToSignUp(ActionEvent actionEvent){
    //remove VB2
    FadeTransition fo = new FadeTransition(Duration.millis(650), SliderVBox);
    fo.setFromValue(1);
    fo.setToValue(0);
    fo.play();

    if(isChangingVBoxLeft == true){
        //slide VB1
        TranslateTransition changePlace = new TranslateTransition(Duration.seconds(5), login);
        changePlace.setToX(SliderVBox.getPrefWidth());
        changePlace.play();
    }
}

Я все еще нахожусь на этапе тестирования, поэтому код не совсем завершен (впоследствии придется поменять местами сцены), но основная задача - скользить по фону, чтобы дать ему эффект анимации.

Другая идея заключалась в том, чтобы заставить белый фон переместиться на ось X - 450 и сделать основной фон зеленым, но, не знаю как ...