JavaFX animation on button hover - javafx

Question

I would like to make an animation when I hover a button but if I use CSS, there is no transitions, the properties change instantly. I tried to extend the button class and set the onMouseEntered property but if I do that, I can't open the FXML file with SceneBuilder anymore because it doesn't know my subclass extends the Button class. So what can I do to have all of the buttons have a transition on hover or click ?

Answer 1

There are several ways you can accomplish this, and even let it work on Scene Builder.
I'd start by subclassing the button skin, where you can add the event handlers with your animations. In this case let's have a fade in/fade out animation:
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);
}
}
Now you can apply this custom skin to a regular JavaFX Button:
One way, by code:
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();
}
Another option is via css, let's add a style.css file:
style.css
.button {
-fx-skin: 'your.package.name.MyButtonSkin';
}
and now:
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();
}
In both cases, you will have the button animations working when you run your application:
Scene Builder
If you add now a regular JavaFX Button to an FXML file:
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 won't know about the custom skin (whether it was applied by code or via css), and it won't display or preview it.
In this case, this solution is good enough, since after all Scene Builder is just a designer tool, and the animation will work when you run your application.
But if you really want to preview the animation from Scene Builder, you still can do it, but for this you need to:
Subclass Button, and
Import this class (jar) into Scene Builder
So let's create MyButton class:
MyButton.java
public class MyButton extends Button {
public MyButton() {
super();
}
public MyButton(String text) {
super(text);
}
#Override
protected Skin<?> createDefaultSkin() {
return new MyButtonSkin(this);
}
}
Now build your project. At least should contain MyButton and MyButtonSkin), but it can contain a demo application class to test it:
#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 the project into Scene Builder:
Open Scene Builder, and select JAR/FXML Manager -> Add Library/FXML from file system. Locate your jar, and click Import Component:
Now you'll be able to drag a MyButton control from the Custom panel to the top left.
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>
Finally, when you click Preview -> Show Preview in Window, you will be able to see the animation.