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

Question

Fade transition doesn't working correctly

我创建了新的javafx ui组件并添加了FadeTransition，但遗憾的是淡入淡出过渡不起作用。当我输入JFXButton背景颜色改变但淡入淡出过渡不起作用。我该如何修理它？

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

目前的代码不起作用还不完全清楚，但我假设如下：

1. 您希望按钮在鼠标进入时淡入，在鼠标退出时淡出。
2. 淡入淡出功能无法以您想要的方式运行。 尝试类似于你的设置我注意到如果鼠标在动画结束前退出，节点将不会淡出。

---

问题

似乎是试图反转动画，你正在修改cycleCount属性。该属性不会影响游戏的方向，而是影响停止前动画播放的周期数：

定义此动画中的循环数。对于无限重复的动画，cycleCount可能是INDEFINITE，但必须是> 0。

无法改变正在运行的cycleCount的Animation。如果为正在运行的cycleCount更改了Animation的值，则必须停止动画并再次启动以获取新值。

你将cycleCount和autoReverse设置为true，希望在将cycleCount设置为2时可以反转动画。 autoReverse财产：

定义这个Animation是否在交替循环中反转方向。如果true，Animation将在第一个周期继续前进，然后在第二个周期反转，依此类推。否则，动画将循环，使得每个循环从开始向前进行。无法更改正在运行的autoReverse的Animation标志。如果为正在运行的autoReverse更改了Animation的值，则必须停止动画并再次启动以获取新值。

这个设置可能有点工作，特别是使用playFromStart()和playFrom(fadeDuration)，但不是正确的方法来做你想要的。

---

解

你想要的是根据鼠标是进入还是退出来修改rate属性。 rate财产：

定义Animation预期播放的方向/速度。

rate的绝对值表示Animation的播放速度，而rate的符号表示方向。 rate的正值表示向前游戏，负值表示向后游戏，0.0表示停止正在运行的Animation。

率1.0是正常游戏，2.0 is2time normal,-1.0`是向后等等。

反转正在运行的rate的Animation将导致Animation反转方向并回放已经过去的Animation部分。

这是一个小例子。它使用Button而不是JFXButton因为我不喜欢牵引依赖。此外，它使用hover属性，但在功能上等同于使用鼠标输入/鼠标退出处理程序。

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

}

请注意以下事项：

• 当鼠标悬停（进入）时，rate设置为1.0，当鼠标未悬停（退出）时，-1.0设置为autoReverse。
• false国旗仍然是cycleCount。
• 1保存在play()。
• 我叫playFromStart()，而不是playFrom(Duration)或play。这很重要，因为Animation： 从当前位置以rate指示的方向播放Animation。如果> 0正在运行，则无效。 当评价Animation（向前游戏）时，如果rate < 0已经定位在最后，第一个周期将不会被播放，它被认为已经完成。如果Animation位于开头，这也适用于向后（Animation）循环。但是，如果cycleCount > 1有Animation，则跟随周期将照常播放。 当Animation到达终点时，qazxswpoi停止并且游戏头保持在最后。