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

Question

淡入淡出过渡无法正常工作

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

这是我的代码

启动器类

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

这是我的 fxml 文件

<?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 属性(property)。该属性不会影响播放方向，而是影响动画在停止之前播放多少个周期:

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.

您组合设置cycleCount设置 autoReverse 至true希望当您设置 cycleCount 时能够反转动画至2 。 autoReverse属性:

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.

此设置可能有些作用，特别是在使用 playFromStart() 时和playFrom(fadeDuration) ，但这不是做你想做的事情的正确方法。

<小时/>

解决方案

你想要的是修改 rate 属性基于鼠标是否进入或退出。 rate属性:

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

这是一个小例子。它使用 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 :

  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.