Плохое влияние на постепенное исчезновение / переход, когда мышь входит или уходит

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

}