javafx定制ui组件FadeTransition无法正常工作

Question

Fade transition doesn't working correctly

I created new javafx ui component and added FadeTransition, but unfortunately fade transition doesn't working. When I was entered JFXButton background color changed but fade transition doesn't working. How can I fixed it ?

Here my code

Launcher class

public class Main extends Application {

public static void main(String[] args) {
    launch(args);
}

@Override
public void start(Stage primaryStage) throws Exception {
    AnimationButton animationButton = new AnimationButton();
    Scene scene = new Scene(animationButton);
    scene.getStylesheets().add(getClass().getResource("btn.css").toExternalForm());
    primaryStage.setScene(scene);
    primaryStage.setTitle("Custom Control");
    primaryStage.setWidth(300);
    primaryStage.setHeight(200);
    primaryStage.show();
}

AnimationButton.java

public class AnimationButton extends AnchorPane{

    private Duration fadeDuration = Duration.millis(1000);
    private FadeTransition fadeTransition;

    @FXML
    private JFXButton animationButton;

    public AnimationButton() {


        FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("AnimationButton.fxml"));
        fxmlLoader.setRoot(new AnchorPane());
        fxmlLoader.setController(this);

        try {
            fxmlLoader.load();
        } catch (IOException exception) {
            throw new RuntimeException(exception);
        }

        animationButton.getStyleClass().add("animation-button");
        fadeDuration = new Duration(3000);
        fadeTransition = new FadeTransition(fadeDuration, animationButton);
        fadeTransition.setAutoReverse(true);
        fadeTransition.setFromValue(0);
        fadeTransition.setToValue(1);

    }

    @FXML
    public void mouseEntered(MouseEvent event) {
        fadeTransition.setCycleCount(1); // this way autoreverse wouldn't kick
        fadeTransition.playFromStart();
    }

    @FXML
    public void mouseExited(MouseEvent event) {

        fadeTransition.setCycleCount(2); // starting from autoreverse
        fadeTransition.playFrom(fadeDuration);
    }
    ...
}

Here my fxml file

<?xml version="1.0" encoding="UTF-8"?>

<?import com.jfoenix.controls.JFXButton?>
<?import javafx.scene.layout.*?>
<fx:root type="AnchorPane" xmlns="http://javafx.com/javafx/8.0.112" 
    xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <JFXButton text="Enjoy it!" id="animationButton" onMouseEntered="#mouseEntered" onMouseExited="#mouseExited"/>
    </children>
</fx:root>

Answer 1

It isn't completely clear what about your current code isn't working, but I'm assuming the following:

1. You want your button to fade in when the mouse enters and fade out when the mouse exits.
2. The fade functionality isn't working quite the way you want.
   • Trying something similar to your setup I noticed the node won't fade out if the mouse exits before the animation has finished.

---

Problem

In what appears to be an attempt to reverse the animation you are modifying the cycleCount property. That property does not affect the direction of play but rather how many cycles the animation plays before stopping:

Defines the number of cycles in this animation. The cycleCount may be INDEFINITE for animations that repeat indefinitely, but must otherwise be > 0 .

It is not possible to change the cycleCount of a running Animation . If the value of cycleCount is changed for a running Animation , the animation has to be stopped and started again to pick up the new value.

You combine setting cycleCount with seting autoReverse to true in the hopes that will reverse the animation when you set cycleCount to 2 . The autoReverse property:

Defines whether this Animation reverses direction on alternating cycles. If true , the Animation will proceed forward on the first cycle, then reverses on the second cycle, and so on. Otherwise, animation will loop such that each cycle proceeds forward from the start. It is not possible to change the autoReverse flag of a running Animation . If the value of autoReverse is changed for a running Animation , the animation has to be stopped and started again to pick up the new value.

This setup may be working somewhat, especially with the use of playFromStart() and playFrom(fadeDuration) , but is not the correct way to do what you want.

---

Solution

What you want is to modify the rate property based on whether the mouse has entered or exited. The rate property:

Defines the direction/speed at which the Animation is expected to be played.

The absolute value of rate indicates the speed at which the Animation is to be played, while the sign of rate indicates the direction. A positive value of rate indicates forward play, a negative value indicates backward play and 0.0 to stop a running Animation .

Rate 1.0 is normal play, 2.0 is 2 time normal, -1.0` is backwards, etc.

Inverting the rate of a running Animation will cause the Animation to reverse direction in place and play back over the portion of the Animation that has already elapsed.

Here's a small example. It uses Button instead of JFXButton because I didn't feel like pulling in the dependency. Also, it uses the hover property but is functionally equivalent to using mouse-entered/mouse-exited handlers.

import javafx.animation.FadeTransition;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        Button button = new Button("Click me!");
        button.setOnAction(event -> {
            event.consume();
            System.out.println("Button clicked!");
        });

        installAnimation(button);

        primaryStage.setScene(new Scene(new StackPane(button), 300.0, 150.0));
        primaryStage.setTitle("Animation Example");
        primaryStage.show();
    }

    private void installAnimation(Button button) {
        FadeTransition transition = new FadeTransition(Duration.millis(250.0), button);
        transition.setFromValue(0.2);
        transition.setToValue(1.0);

        button.hoverProperty().addListener((obs, wasHover, isHover) -> {
            transition.setRate(isHover ? 1.0 : -1.0);
            transition.play();
        });
        button.setOpacity(transition.getFromValue());
    }

}

Notice the following:

• The rate is set to 1.0 when the mouse is hovering (entered) and -1.0 when the mouse is not hovering (exited).
• The autoReverse flag remains false .
• The cycleCount is kept at 1 .

• I call play() , not playFromStart() or playFrom(Duration) . This is important because play :

  Plays Animation from current position in the direction indicated by rate . If the Animation is running, it has no effect.

  When rate > 0 (forward play), if an Animation is already positioned at the end, the first cycle will not be played, it is considered to have already finished. This also applies to a backward ( rate < 0 ) cycle if an Animation is positioned at the beginning. However, if the Animation has cycleCount > 1 , following cycle(s) will be played as usual.

  When the Animation reaches the end, the Animation is stopped and the play head remains at the end.