使用JavaFX的ImageView精灵动画
我试图在登录窗口(stage)中创建一个sprite动画,使用JavaFX在用户获得登录和密码信息后播放。我试图使用Michael Heinrichs在其关于的博客文章中发布的类,但我无法使其工作,主要是因为我不知道如何在ImageView中创建动画,而不使用start方法(在我的情况下也不起作用) 这是我在FXML文件中用于登录阶段的代码:使用JavaFX的ImageView精灵动画,java,animation,javafx-2,Java,Animation,Javafx 2,我试图在登录窗口(stage)中创建一个sprite动画,使用JavaFX在用户获得登录和密码信息后播放。我试图使用Michael Heinrichs在其关于的博客文章中发布的类,但我无法使其工作,主要是因为我不知道如何在ImageView中创建动画,而不使用start方法(在我的情况下也不起作用) 这是我在FXML文件中用于登录阶段的代码: <GridPane alignment="CENTER" hgap="10.0" vgap="10.0" xmlns="http://javafx.
<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>
最后,以下是常量声明:
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创建这种效果,或者我只是在浪费时间?我做到了,我可以使用JavaFX制作这个简单的动画,如果你想完成类似的事情,我想与你分享 (YouTube) 首先,我用这段代码为登录阶段创建了FXML文件(请记住,您必须为控制器类和映像文件设置正确的位置)
就这样,您不需要做任何其他事情就可以为任何JavaFX应用程序创建这个简单的动画。享受吧 看。有两种方法使用与您提到的链接类似的视口,ans using clip.SpriteAnimation使用ImageView setViewport()来处理不同的精灵,经过一些实验后,我发现使用单独的图像(setImage())比setViewport具有更好的性能>100%。
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;
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<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">
<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="@route/to/shop-sprite.png" />
</image>
<viewport>
<Rectangle2D minX="0" minY="0" height="130.0" width="130.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>
public class MainController {
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 = 130;
private static final int HEIGHT = 130;
@FXML private ImageView loginAnimationImageView;
@FXML private TextField loginTextField;
@FXML private PasswordField passwordTextField;
@FXML private Button loginButton;
@FXML protected void onEnterTextFieldAction(ActionEvent actionEvent) {
}
@FXML protected void onEnterPasswordFieldAction(ActionEvent actionEvent) {
}
@FXML protected void loginButtonAction(ActionEvent actionEvent) {
final Animation animation = new SpriteAnimation(
loginAnimationImageView,
Duration.millis(400.0),
COUNT, COLUMNS,
OFFSET_X, OFFSET_Y,
WIDTH, HEIGHT
);
animation.setCycleCount(1);
animation.play();
}
}