Prototype of solution for https://stackoverflow.com/questions/50893669/avoiding-short-stutter-in-animation-when-loading-in-displaying-fxml

Main.java

package game;

import game.java.controller.MasterController;
import game.java.model.Model;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundImage;
import javafx.scene.layout.BackgroundPosition;
import javafx.scene.layout.BackgroundRepeat;
import javafx.scene.layout.BackgroundSize;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application
{

  @Override
  public void start( final Stage primaryStage ) throws Exception
  {
    final Model model = new Model();
    model.init();

    final StackPane root = new StackPane();
    final BorderPane mainUI = new BorderPane();
    final Pane overLay = new Pane();
    overLay.setPickOnBounds( false );
    root.getChildren().addAll( mainUI, overLay );

    MasterController.setModel( model );
    MasterController.setOverLay( overLay );
    MasterController.setMainUI( mainUI );

    final StackPane views = new StackPane();
    MasterController.getMainUI().setCenter( views );
    final String[] viewNames = new String[]{"character"}; //TODO put all views here
    for ( final String name : viewNames )
    {
      final Node view = FXMLLoader.load( getClass().getResource( "/view/" + name + ".fxml" ) );
      view.setVisible( false );
      view.setId( name );
      views.getChildren().add( view );
    }

    MasterController.getMainUI().setBackground( getBackground( 1366, 768 ) );

    MasterController.getMainUI().setPrefWidth( 1366 );
    MasterController.getMainUI().setMinWidth( 1366 );
    MasterController.getMainUI().setPrefHeight( 768 );
    MasterController.getMainUI().setMinHeight( 768 );


    // Init loaders and controllers
    final FXMLLoader headerLoader = new FXMLLoader( getClass().getResource( "/view/header.fxml" ) );
    final Parent headerRoot = headerLoader.load();

    final FXMLLoader navigationLoader = new FXMLLoader( getClass().getResource( "/view/navigation.fxml" ) );
    final Parent navigationRoot = navigationLoader.load();


    MasterController.getMainUI().setTop( headerRoot );
    MasterController.getMainUI().setLeft( navigationRoot );


    final Scene scene = new Scene( root );
    //    scene.getStylesheets().add( getClass().getResource( "/css/main.css" ).toExternalForm() );

    primaryStage.setScene( scene );
    primaryStage.show();
  }

  private Background getBackground( final double width, final double height )
  {
    final Image image = new Image( Main.class.getResource( "/images/bg.png" ).toExternalForm() );
    final BackgroundSize backgroundSize = new BackgroundSize( width, height, false, false, true, true );
    final BackgroundImage backgroundImage = new BackgroundImage( image, BackgroundRepeat.NO_REPEAT,
        BackgroundRepeat.NO_REPEAT, BackgroundPosition.CENTER, backgroundSize );
    final Background background = new Background( backgroundImage );
    return background;
  }

  public static void main( final String[] args )
  {
    launch( args );
  }
}

MasterController.java

package game.java.controller;

import game.java.model.Model;
Ýimport javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.CacheHint;
import javafx.scene.Node;
import javafx.scene.control.ToggleButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.text.Text;
import javafx.util.Duration;

public class MasterController
{
  private static Model       model;
  private static Pane        overLay;
  private static BorderPane  mainUI;
  private static ToggleGroup toggleGroup = new ToggleGroup();

  //FIXME(26.06.2018): This variable 'fxmls' should not be shared with write-capabilities,
  //because it gets modified by a task in another thread.

  @FXML
  public void handleChangeView( final ActionEvent event )
  {
    final String changeButtonID = ((Node) event.getSource()).getId();
    final StackPane views = (StackPane) getMainUI().getCenter();
    for ( final Node view : views.getChildren() )
    {
      System.out.println( view.getId() );
      System.out.println( changeButtonID );
      //show view from button id. hide rest.
      view.setVisible( changeButtonID.equals( view.getId() ) );
    }
  }

  public void cannotSelfUntoggle( final ToggleButton tb )
  {
    tb.addEventFilter( MouseEvent.MOUSE_PRESSED, event ->
    {
      if ( tb.isSelected() )
      {
        event.consume();
      }
    } );
  }

  public static void popXPMessage( final double xp )
  {

    final Text text = new Text( "+" + xp );
    text.setPickOnBounds( false );
    text.setStyle( "" +
        "-fx-fill: rgb(0,255,0);" +
        "-fx-font-weight: bold" );
    text.setLayoutX( 100 );
    text.setLayoutY( 100 );
    text.setCache( true );
    text.setCacheHint( CacheHint.SPEED );
    getOverLay().getChildren().add( text );
    final Timeline timeline = new Timeline();
    timeline.getKeyFrames().addAll(
        new KeyFrame( new Duration( 1000 ),
            new KeyValue( text.layoutYProperty(), 0, Interpolator.EASE_BOTH ),
            new KeyValue( text.opacityProperty(), 0, Interpolator.EASE_OUT ) ) );
    timeline.play();
  }


  public static void addXP( final double xp )
  {
    getModel().addCurrentXP( xp );
    popXPMessage( xp );
  }

  public void addPoints( final int points )
  {
    getModel().setPoints( getModel().getPoints() + points );
  }

  public static Pane getOverLay()
  {
    return overLay;
  }

  public static void setOverLay( final Pane overLay )
  {
    MasterController.overLay = overLay;
  }


  public static Model getModel()
  {
    return model;
  }

  public static void setModel( final Model model )
  {
    MasterController.model = model;
  }


  public static BorderPane getMainUI()
  {
    return mainUI;
  }

  public static void setMainUI( final BorderPane mainUI )
  {
    MasterController.mainUI = mainUI;
  }

  public static ToggleGroup getToggleGroup()
  {
    return toggleGroup;
  }
}