按钮悬停时的 JavaFX 动画

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：

一种方式，通过代码：

我的应用程序

@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文件：

样式文件

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

现在：

我的应用程序

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

在这两种情况下，当您运行应用程序时，您的按钮动画都会起作用：

场景生成器

如果您现在将常规 JavaFX 添加Button到 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类：

我的按钮

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-> Add Library/FXML from file system。找到您的 jar，然后单击Import Component：

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

文件格式

<?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，您将能够看到动画。