Question

当我快速进入或离开节点时，淡入淡出会重新开始或类似的事情使效果看起来很差。我为此寻找了一些解决方案，但找不到任何东西。您知道当鼠标进入或离开节点而没有在动画上重新启动时如何淡入和淡出效果吗？

    //Fade In configuration
    fadeIn = new FadeTransition(Duration.millis(200));
    fadeIn.setFromValue(1);
    fadeIn.setToValue(0.5);
    fadeIn.setCycleCount(1);
    fadeIn.setAutoReverse(true);

    //Fade Out configurqation
    fadeOut = new FadeTransition(Duration.millis(100));
    fadeOut.setFromValue(0.5);
    fadeOut.setToValue(1);
    fadeOut.setCycleCount(1);
    fadeOut.setAutoReverse(true);

当我使用鼠标进入或离开节点时，动画看起来很糟糕。我想要平滑的淡入/淡出。

Answer 1

您将要为淡入和淡出动画使用相同的FadeTransition。当鼠标退出Node时，您需要通过将rate属性设置为负数来反转动画。如果要以相同的速度反转，则将值设置为-1.0；但是，由于您希望淡入淡出的时间是淡入淡出时间的一半，因此应将值设置为-2.0。这是一个示例：

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

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        Rectangle rect = new Rectangle(100.0, 100.0);
        rect.setOpacity(0.5);

        FadeTransition animation = new FadeTransition(Duration.millis(200.0), rect);
        animation.setFromValue(0.5);
        animation.setToValue(1.0);

        rect.setOnMouseEntered(event -> {
            animation.setRate(1.0);
            animation.play();
        });
        rect.setOnMouseExited(event -> {
            animation.setRate(-2.0);
            animation.play();
        });

        primaryStage.setScene(new Scene(new StackPane(rect), 500.0, 300.0));
        primaryStage.show();
    }

}

当鼠标进入或离开时，对淡入/淡出过渡效果不佳

1 个答案: