title: ImageView Sprite Animation with JavaFX
body: <p>I'm trying to create an sprite animation inside a login window (stage) with JavaFX that plays once the user get the login and password information. I tried to use the class publish by Michael Heinrichs in his blog post about <a href="http://blog.netopyr.com/2012/03/09/creating-a-sprite-animation-with-javafx/" rel="noreferrer">sprite animations with JavaFX</a> but I can't make it work, mostly because I don't understand how to create this animation inside an ImageView without using the start method (which doesn't work in my case either).</p>
  
  <p>This is the code I have in the FXML file for the Login Stage:</p>
  
  <pre><code>&lt;GridPane alignment="CENTER" hgap="10.0" vgap="10.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="crud.controller.MainController"&gt;
      &lt;padding&gt;
          &lt;Insets bottom="25.0" left="25.0" right="25.0" top="25.0" /&gt;
      &lt;/padding&gt;
      &lt;children&gt;
          &lt;ImageView fx:id="loginAnimationImageView" GridPane.columnIndex="0" GridPane.halignment="CENTER" GridPane.columnSpan="2" GridPane.rowIndex="0"&gt;
              &lt;image&gt;
                  &lt;Image url="@../assets/shop-sprite.png" /&gt;
              &lt;/image&gt;
          &lt;viewport&gt;
              &lt;Rectangle2D height="130.0" width="131.0" /&gt;
          &lt;/viewport&gt;
          &lt;/ImageView&gt;
          &lt;Label text="Usuario" GridPane.columnIndex="0" GridPane.halignment="RIGHT" GridPane.rowIndex="2" /&gt;
          &lt;TextField fx:id="loginTextField" onAction="#onEnterTextFieldAction" GridPane.columnIndex="1" GridPane.rowIndex="2" /&gt;
          &lt;Label text="Contraseña" GridPane.columnIndex="0" GridPane.rowIndex="3" /&gt;
          &lt;PasswordField fx:id="passwordTextField" onAction="#onEnterPasswordFieldAction" GridPane.columnIndex="1" GridPane.rowIndex="3" /&gt;
          &lt;Button fx:id="loginButton" onAction="#loginButtonAction" text="Ingresar" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.halignment="CENTER" GridPane.rowIndex="5" /&gt;
      &lt;/children&gt;
  &lt;/GridPane&gt;
  </code></pre>
  
  <p>Inside the controller class I tried to create a launching method but firt, I have not idea how to launch it at the same time the stage open itself, and second, when I try to call the method from a button it tries to render the image (modify the space need it for the image) but it show nothing.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>@FXML private void launchAnimation() {
      loginAnimationImageView = new ImageView(IMAGE);
      loginAnimationImageView.setViewport(new Rectangle2D(OFFSET_X, OFFSET_Y, WIDTH, HEIGHT));
  
      final Animation animacion = new SpriteAnimation(
              loginAnimationImageView,
              Duration.millis(1000.0),
              COUNT, COLUMNS,
              OFFSET_X, OFFSET_Y,
              WIDTH, HEIGHT
      );
  
      animacion.setCycleCount(Animation.INDEFINITE);
      animacion.play();
  }
  </code></pre>
  
  <p>Finally, here are the constant declarations:</p>
  
  <pre><code>private static final Image IMAGE = new Image("https://i.cloudup.com/1VA2FCnqY6-2000x2000.png");
  private static final int COLUMNS  = 4;
  private static final int COUNT    = 12;
  private static final int OFFSET_X = 0;
  private static final int OFFSET_Y = 0;
  private static final int WIDTH    = 131;
  private static final int HEIGHT   = 125;
  </code></pre>
  
  <p>This is how the login stage looks right now, and I want to animate the logo I have for it:</p>
  
  <p><img src="https://i.stack.imgur.com/EFeFX.png" alt="enter image description here"></p>
  
  <p>Can you guys help me to understand how to use the image view with this case?</p>
  
  <p>There's any change I can use ImageView to create this kind of effect or I'm just wasting my time?</p>