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

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

尚不清楚您当前的代码不起作用，但我假设以下内容：

您希望按钮在鼠标进入时淡入并在鼠标退出时淡出。
淡入淡出功能无法完全按照您想要的方式工作。
- 尝试类似于您的设置的操作，我发现如果在动画完成之前退出鼠标，节点将不会消失。

问题

在试图反转动画的过程中，您正在修改cycleCount属性。该属性不会影响播放的方向，而是会影响动画在停止之前播放多少个周期：

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

无法更改正在运行的cycleCount的{{1}}。如果为运行中的Animation更改了cycleCount的值，则必须停止动画并再次开始以拾取新值。

您将设置Animation与设置autoReverse设置为cycleCount结合起来，希望将true设置为cycleCount时可以反转动画。 2属性：

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

此设置可能会在某种程度上起作用，尤其是在使用autoReverse和Animation的情况下，但这不是执行所需操作的正确方法。

解决方案

您要根据鼠标是进入还是退出来修改rate属性。 playFromStart()属性：

定义playFrom(fadeDuration)播放的方向/速度。

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

费率0.0是正常播放，Animation 2 1.0-1.0`是倒数，等等。

将正在运行的2.0 is的{{1}}倒置将导致time normal,沿原地反转，并在rate的已经过去的部分上播放。 / p>

这是一个小例子。它使用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()。这很重要，因为play：


从当前位置按playFromStart()指示的方向播放playFrom(Duration)。如果Animation正在运行，则无效。

当速率为rate（向前播放）时，如果Animation已定位在末尾，则不会播放第一个循环，它被认为已经结束。如果> 0位于开头，则这也适用于后退（Animation）循环。但是，如果rate < 0有Animation，则随后的循环将照常播放。

Animation到达结尾时，cycleCount > 1停止，播放头保持结尾。

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

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

这是我的代码

发射器类

AnimationButton.java

这是我的fxml文件

1 个答案:

问题

解决方案