数组中的 JAVAFX 文本动画

Question

这是一项正在进行中的工作，因此对于需要清理我的代码，我深表歉意，但我认为最好包含我目前拥有的所有内容。

我试图弄清楚如何通过循环遍历一组图像来为文本设置动画。我的代码循环遍历数组并仅显示最后一张图像。我需要一次显示一张图像并重复以提供所需的动画效果。我做错了什么或没有做什么？

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);

}
}

感谢任何帮助。

Answer 1

这是一个演示如何将Images 添加到ArrayList 的应用程序（Array 的类似方法）。它还演示了如何将这些Images 加载到ImageView 并使用Timeline 更改它们。

主要

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>

控制器

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);   
    }    

}

输出：（如下所示）