按钮悬停时的JavaFX动画

我想在悬停按钮时制作一个动画，但如果我使用CSS，则没有过渡，属性会立即更改。我试图扩展button类并设置OnMouseEnter属性，但如果我这样做，我就无法再使用SceneBuilder打开FXML文件，因为它不知道我的子类扩展button类。那么，我该怎么做才能让所有按钮在悬停或单击时都有一个过渡呢？

有几种方法可以实现这一点，甚至可以让它在场景生成器上工作

首先，我将对按钮皮肤进行子类化，您可以在其中添加带有动画的事件处理程序。在这种情况下，让我们制作一个淡入/淡出动画：

MyButtonSkin.java

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

按钮：

单程编码：

MyApplication.java

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

style.css

现在：

MyApplication.java

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


场景生成器

如果现在将常规JavaFX
按钮添加到FXML文件中：

FXML.FXML

现在构建您的项目。至少应该包含
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();
}

将项目导入场景生成器：


打开场景生成器，然后选择
JAR/FXML管理器
->
从文件系统添加库/FXML
。找到您的jar，然后单击导入组件
：


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

FXML.FXML


为什么不使用场景生成器添加鼠标单击或鼠标悬停侦听器
@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();
}

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

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

public class MyButton extends Button {

    public MyButton() {
        super();
    }

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

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

}

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

<?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>