JAVAFX Text Animation From Array - arrays

Question

This is very much a work in progress so I apologize for my code needing to be cleaned up, but I thought it best to include everything I have so far.
I'm trying to figure how to animate text by looping through an array of images. My code loops through the array and displays just the last image. I need to display one image at a time and repeat to give the desired animation effect. What am I doing wrong or not doing?
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.stage.Stage;
import javafx.util.Duration;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.event.EventHandler;
import javafx.animation.Animation;
import javafx.animation.KeyFrame;
public class ImageAnimatorWithAudio extends Application {
private final static int NUMBER_OF_SLIDES = 10;
#Override // Override the start method in the Application class
public void start(Stage primaryStage) {
Image[] images = new Image[NUMBER_OF_SLIDES];
Timeline animation = new Timeline(new KeyFrame(Duration.millis(5000)));
animation.setCycleCount(Timeline.INDEFINITE);
animation.play();
HBox hBox = new HBox();
hBox.setSpacing(10);
hBox.setAlignment(Pos.TOP_RIGHT);
Button btStartPause = new Button("Start Animation");
hBox.getChildren().add(btStartPause);
//Create border pane
BorderPane borderPane = new BorderPane();
borderPane.setTop(hBox); //Add hBox to borderPane
BorderPane.setAlignment(hBox, Pos.TOP_RIGHT); //Align hBox
btStartPause.setOnAction(e -> {
if (btStartPause.getText().equals("Start Animation")) {
btStartPause.setText("Pause Animation");
animation.play();
} else {
btStartPause.setText("Start Animation");
animation.pause();
}
});
GridPane pane = new GridPane();
pane.setPadding(new Insets(5,5,5,5));
for (int i = 0; i < NUMBER_OF_SLIDES; i++) {
images[i] = new Image("image_path" + i + ".png"); //file names are numerically named(i)
pane.getChildren().add(new ImageView(images[i]));
}
pane.getChildren().add(borderPane);
Scene scene = new Scene(pane, 450, 450);
primaryStage.setTitle("TextAnimation"); //Set the stage title
primaryStage.setScene(scene); //Place the scene in the stage
primaryStage.show(); //Display the stage
}
public static void main(String[] args){
Application.launch(args);
}
}
Any help is appreciated.

Answer 1

Here is an app that demonstrates how to add Images to an ArrayList(similar approach for an Array). It also demonstrates how to load those Images into an ImageView and change them using Timeline.
Main
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
/**
*
* #author Sedrick
*/
public class JavaFXApplication1 extends Application {
#Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
FXML
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane id="AnchorPane" prefHeight="371.0" prefWidth="607.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.60" fx:controller="javafxapplication1.FXMLDocumentController">
<children>
<Button fx:id="btnMain" layoutX="263.0" layoutY="326.0" onAction="#handleButtonAction" text="Click Me!" />
<Label fx:id="lblMain" layoutX="269.0" layoutY="28.0" minHeight="16" minWidth="69" />
<ImageView fx:id="ivMain" fitHeight="201.0" fitWidth="278.0" layoutX="165.0" layoutY="85.0" pickOnBounds="true" preserveRatio="true" />
</children>
</AnchorPane>
Controller
import java.net.URISyntaxException;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;
import java.util.ResourceBundle;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Platform;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.util.Duration;
/**
*
* #author Sedrick
*/
public class FXMLDocumentController implements Initializable {
#FXML private Label lblMain;
#FXML private ImageView ivMain;
#FXML private Button btnMain;
Timeline timeline;
List<Image> imageContainer;
int currentImageBeingDisplayed;
#FXML
private void handleButtonAction(ActionEvent event) {
lblMain.setText("Animation started!");
currentImageBeingDisplayed = 0;
timeline.play();
}
#Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
//Load images
imageContainer = new ArrayList();
for(int i = 1; i <= 12; i++)
{
try
{
System.out.println("/images/Slide" + i + ".PNG");
imageContainer.add(new Image(getClass().getResource("/images/Slide" + i + ".PNG").toURI().toString()));
} catch (URISyntaxException ex) {
System.out.println(ex.toString());
}
}
//Change the image every second
timeline = new Timeline(
new KeyFrame(
Duration.seconds(1),
new EventHandler<ActionEvent>() {
#Override public void handle(ActionEvent actionEvent) {
Platform.runLater(()->{
ivMain.setImage(imageContainer.get(currentImageBeingDisplayed++));
});
}
}
)
);
timeline.setCycleCount(12);
}
}
Output:(looks similar to below)