使用 JavaFX 的 ImageView Sprite 动画

Question

我正在尝试使用 JavaFX 在登录窗口（舞台）内创建一个精灵动画，一旦用户获得登录和密码信息，就会播放该动画。我尝试使用 Michael Heinrichs 在他关于使用 JavaFX 精灵动画的博客文章中发布的类，但我无法让它工作，主要是因为我不明白如何在不使用 start 方法的情况下在 ImageView 中创建这个动画（在我的情况下也不起作用）。

这是我在登录阶段的 FXML 文件中的代码：

<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">
    <padding>
        <Insets bottom="25.0" left="25.0" right="25.0" top="25.0" />
    </padding>
    <children>
        <ImageView fx:id="loginAnimationImageView" GridPane.columnIndex="0" GridPane.halignment="CENTER" GridPane.columnSpan="2" GridPane.rowIndex="0">
            <image>
                <Image url="@../assets/shop-sprite.png" />
            </image>
        <viewport>
            <Rectangle2D height="130.0" width="131.0" />
        </viewport>
        </ImageView>
        <Label text="Usuario" GridPane.columnIndex="0" GridPane.halignment="RIGHT" GridPane.rowIndex="2" />
        <TextField fx:id="loginTextField" onAction="#onEnterTextFieldAction" GridPane.columnIndex="1" GridPane.rowIndex="2" />
        <Label text="Contraseña" GridPane.columnIndex="0" GridPane.rowIndex="3" />
        <PasswordField fx:id="passwordTextField" onAction="#onEnterPasswordFieldAction" GridPane.columnIndex="1" GridPane.rowIndex="3" />
        <Button fx:id="loginButton" onAction="#loginButtonAction" text="Ingresar" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.halignment="CENTER" GridPane.rowIndex="5" />
    </children>
</GridPane>

在控制器类中，我尝试创建一个启动方法，但首先，我不知道如何在舞台打开的同时启动它，其次，当我尝试从按钮调用该方法时，它会尝试渲染图像（修改图像所需的空间）但它什么也没显示。

这是代码：

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

最后，这里是常量声明：

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;

这就是登录阶段现在的样子，我想为我的徽标设置动画：

你们能帮我理解如何在这种情况下使用图像视图吗？

有什么变化我可以使用 ImageView 来创建这种效果，或者我只是在浪费时间？

Answer 1

我成功了，我可以使用这个 sprite 图像使这个简单的动画与 JavaFX 一起工作使这个简单的动画与 JavaFX 一起工作，我想与您分享，以防您想要完成类似的事情

\n\n

这是结果（YouTube）

\n\n

首先，我使用此代码为登录阶段创建了 FXML 文件（请记住，您必须为控制器类和图像文件设置正确的位置）

\n\n

<?xml version="1.0" encoding="UTF-8"?>\n\n<?import java.lang.*?>\n<?import javafx.geometry.*?>\n<?import javafx.scene.control.*?>\n<?import javafx.scene.image.*?>\n<?import javafx.scene.layout.*?>\n\n<GridPane alignment="CENTER" hgap="10.0" vgap="10.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="package.Controller">\n    <padding>\n        <Insets bottom="25.0" left="25.0" right="25.0" top="25.0" />\n    </padding>\n    <children>\n        <ImageView fx:id="loginAnimationImageView" GridPane.columnIndex="0" GridPane.halignment="CENTER" GridPane.columnSpan="2" GridPane.rowIndex="0">\n            <image>\n                <Image url="@route/to/shop-sprite.png" />\n            </image>\n        <viewport>\n            <Rectangle2D minX="0" minY="0" height="130.0" width="130.0" />\n        </viewport>\n        </ImageView>\n        <Label text="Usuario" GridPane.columnIndex="0" GridPane.halignment="RIGHT" GridPane.rowIndex="2" />\n        <TextField fx:id="loginTextField" onAction="#onEnterTextFieldAction" GridPane.columnIndex="1" GridPane.rowIndex="2" />\n        <Label text="Contrase\xc3\xb1a" GridPane.columnIndex="0" GridPane.rowIndex="3" />\n        <PasswordField fx:id="passwordTextField" onAction="#onEnterPasswordFieldAction" GridPane.columnIndex="1" GridPane.rowIndex="3" />\n        <Button fx:id="loginButton" onAction="#loginButtonAction" text="Ingresar" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.halignment="CENTER" GridPane.rowIndex="5" />\n    </children>\n</GridPane>\n

\n\n

现在我们必须使用Michael Heinrichs创建的动画类来设置控制器创建的动画类来设置控制器，我在上面的问题中链接了该类。

\n\n

笔记：一旦登录和密码信息得到验证，该动画将通过登录按钮启动，因此您必须在自己的应用程序中设置代码来完成此操作。

\n\n

这是控制器的代码：

\n\n

public class MainController {\n    private static final int COLUMNS  = 4;\n    private static final int COUNT    = 12;\n    private static final int OFFSET_X = 0;\n    private static final int OFFSET_Y = 0;\n    private static final int WIDTH    = 130;\n    private static final int HEIGHT   = 130;\n    @FXML private ImageView loginAnimationImageView;\n    @FXML private TextField loginTextField;\n    @FXML private PasswordField passwordTextField;\n    @FXML private Button loginButton;\n\n    @FXML protected void onEnterTextFieldAction(ActionEvent actionEvent) {\n}\n\n    @FXML protected void onEnterPasswordFieldAction(ActionEvent actionEvent) {\n}\n\n    @FXML protected void loginButtonAction(ActionEvent actionEvent) {\n        final Animation animation = new SpriteAnimation(\n                loginAnimationImageView,\n                Duration.millis(400.0),\n                COUNT, COLUMNS,\n                OFFSET_X, OFFSET_Y,\n                WIDTH, HEIGHT\n        );\n\n        animation.setCycleCount(1);\n        animation.play();\n    }\n}\n

\n\n

就是这样，您无需执行任何其他操作即可为任何 JavaFX 应用程序创建这个简单的动画。好好享受！

\n