Question

我想在我悬停按钮时制作动画，但如果我使用CSS，则没有过渡，属性会立即改变。我试图扩展按钮类并设置onMouseEntered属性但是如果我这样做，我就不能再用SceneBuilder打开FXML文件，因为它不知道我的子类扩展了Button类。那么，如何让所有按钮在悬停或点击时都有转换？

Answer 1

有几种方法可以实现这一点，甚至可以让它在Scene Builder上运行。

我从子类化按钮皮肤开始，您可以在其中添加动画的事件处理程序。在这种情况下，让我们有一个淡入/淡出动画：

MyButtonSkin.java

public class MyButtonSkin extends ButtonSkin {

    public MyButtonSkin(Button control) {
        super(control);

        final FadeTransition fadeIn = new FadeTransition(Duration.millis(100));
        fadeIn.setNode(control);
        fadeIn.setToValue(1);
        control.setOnMouseEntered(e -> fadeIn.playFromStart());

        final FadeTransition fadeOut = new FadeTransition(Duration.millis(100));
        fadeOut.setNode(control);
        fadeOut.setToValue(0.5);
        control.setOnMouseExited(e -> fadeOut.playFromStart());

        control.setOpacity(0.5);
    }

}

现在，您可以将此自定义外观应用于常规JavaFX Button：

单向，按代码：

MyApplication.java

@Override
public void start(Stage primaryStage) throws IOException {
    Button btn = new Button("Button");
    btn.setSkin(new MyButtonSkin(btn));
    StackPane root = new StackPane(btn);
    Scene scene = new Scene(root, 300, 250);
    primaryStage.setScene(scene);
    primaryStage.show();
}

另一个选择是通过css，让我们添加一个style.css文件：

的style.css

.button {
    -fx-skin: 'your.package.name.MyButtonSkin';
}

现在：

MyApplication.java

@Override
public void start(Stage primaryStage) throws IOException {
    Button btn = new Button("Button");
    StackPane root = new StackPane(btn);
    Scene scene = new Scene(root, 300, 250);
    scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());        
    primaryStage.setScene(scene);
    primaryStage.show();
}

在这两种情况下，您都可以在运行应用程序时使用按钮动画：

Scene Builder

如果您现在将常规JavaFX Button添加到FXML文件：

FXML.fxml

<AnchorPane id="AnchorPane" prefWidth="300" prefHeight="250" stylesheets="@style.css" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" fx:controller="your.package.name.FXMLController">
   <children>
      <Button layoutX="100" layoutY="100" text="Button" />
   </children>
</AnchorPane>

Scene Builder不会知道自定义皮肤（无论是通过代码还是通过css应用），它都不会显示或预览。

在这种情况下，这个解决方案已经足够了，因为毕竟Scene Builder只是一个设计器工具，并且在运行应用程序时动画将起作用。

但是如果你真的想要从Scene Builder中预览动画，你仍然可以这样做，但为此你需要：

子类Button和
将此类（jar）导入Scene Builder

所以让我们创建MyButton类：

MyButton.java

public class MyButton extends Button {

    public MyButton() {
        super();
    }

    public MyButton(String text) {
        super(text);
    }

    @Override
    protected Skin<?> createDefaultSkin() {
        return new MyButtonSkin(this);
    }

}

现在构建您的项目。至少应包含MyButton和MyButtonSkin），但它可以包含一个演示应用程序类来测试它：

@Override
public void start(Stage primaryStage) throws IOException {
    MyButton btn = new MyButton("Button");
    StackPane root = new StackPane(btn);
    Scene scene = new Scene(root, 300, 250);
    primaryStage.setScene(scene);
    primaryStage.show();
}

将项目导入Scene Builder：

打开Scene Builder，然后选择JAR/FXML Manager - ＆gt; Add Library/FXML from file system。找到您的jar，然后点击Import Component：

现在，您可以将MyButton控件从“自定义”面板拖到左上角。

FXML.fxml

<?import javafx.scene.layout.AnchorPane?>
<?import your.package.name.MyButton?>

<AnchorPane prefHeight="250.0" prefWidth="300.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <MyButton layoutX="100" layoutY="100" text="Button" />
   </children>
</AnchorPane>

最后，当您点击Preview -> Show Preview in Window时，您将能够看到动画。

按钮上的JavaFX动画悬停

1 个答案: