Question

我正在创建动画按钮，但是有一个严重的问题-事件OnMouseExited不能正常工作。

当我将鼠标悬停在按钮上的速度不是很快时-一切正常。但是，当我快速悬停时，OnMouseExited事件不会触发。您可以在下面的视频中看到这种奇怪的行为。 https://youtu.be/Uz0vgIK21RU

这是我的代码：

public class MenuButton extends JFXButton {
    private final int ICON_SIZE_MAX = 50;
    private final int ICON_SIZE_MIN = 40;
    private final int BUTTON_SIZE = 130;
    private final int BUTTON_PANE_WIDTH = 114;
    private final int BUTTON_PANE_HEIGHT = 122;

    JFXButton btn = new JFXButton();
    Pane p = new Pane();
    GlyphIcon icon = null;
    Label text = new Label();

    public MenuButton(String name, FontAwesomeIcon fa_icon, EmojiOne eo_icon, String color, String rippler, VENTO.GUI gui) {
        btn.setPrefWidth(BUTTON_SIZE);
        btn.setPrefHeight(BUTTON_SIZE);
        btn.setStyle("-fx-background-color: " + color + ";");
        btn.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
        btn.setRipplerFill(Paint.valueOf(rippler));
        btn.setCursor(Cursor.HAND);

        p.setPrefWidth(BUTTON_PANE_WIDTH);
        p.setPrefHeight(BUTTON_PANE_HEIGHT);

        if (fa_icon != null) {
            icon = new FontAwesomeIconView(fa_icon);
        } else if (eo_icon != null) {
            icon = new EmojiOneView(eo_icon);
        }
        if (icon != null) {
            icon.setGlyphSize(ICON_SIZE_MAX);
            icon.setFill(Paint.valueOf("#ffffff"));
            icon.setLayoutX(p.getPrefWidth() / 2 - icon.getGlyphSize().intValue() / 2);
            icon.setLayoutY(p.getPrefHeight() / 2 - icon.getGlyphSize().intValue() / 2 + 43);
        }

        text.setText(name);
        text.setFont(Font.font("System", FontWeight.BOLD, 18));
        text.setTextFill(Paint.valueOf("#ffffff"));
        text.setPrefWidth(p.getPrefWidth());
        text.setLayoutX(0);
        text.setLayoutY(75);
        text.setAlignment(Pos.CENTER);
        text.setOpacity(0);

        p.getChildren().setAll(icon, text);
        btn.setGraphic(p);

        GlyphIcon finalIcon = icon;

        btn.setOnMouseEntered(e -> {
            if (finalIcon.getGlyphSize().intValue() != ICON_SIZE_MAX) {
                return;
            }
            showMenuButton();
        });

        btn.setOnMouseExited(e -> {
            if (finalIcon.getGlyphSize().intValue() != ICON_SIZE_MIN) {
                return;
            }
            hideMenuButton();
        });

        btn.setOnAction(e -> {
            //TODO
        });
    }

    private void showMenuButton() {
        Animation animation1 = new Timeline(new KeyFrame(Duration.millis(100), new KeyValue(icon.glyphSizeProperty(), ICON_SIZE_MIN)));
        animation1.play();

        Animation animation2 = new Timeline(new KeyFrame(Duration.millis(100), new KeyValue(icon.layoutXProperty(), p.getPrefWidth() / 2 - ICON_SIZE_MIN / 2)));
        animation2.play();

        Animation animation3 = new Timeline(new KeyFrame(Duration.millis(100), new KeyValue(icon.layoutYProperty(), p.getPrefHeight() / 2 - ICON_SIZE_MIN / 2 + 43 - 20)));
        animation3.play();

        Animation animation4 = new Timeline(new KeyFrame(Duration.millis(100), new KeyValue(text.opacityProperty(), 1.0)));
        animation4.setDelay(Duration.millis(50));
        animation4.play();
    }

    private void hideMenuButton() {
        Animation animation4 = new Timeline(new KeyFrame(Duration.millis(50), new KeyValue(text.opacityProperty(), 0.0)));
        animation4.play();

        Animation animation3 = new Timeline(new KeyFrame(Duration.millis(50), new KeyValue(icon.layoutYProperty(), p.getPrefHeight() / 2 - ICON_SIZE_MAX / 2 + 43)));
        animation3.setDelay(Duration.millis(25));
        animation3.play();

        Animation animation2 = new Timeline(new KeyFrame(Duration.millis(50), new KeyValue(icon.layoutXProperty(), p.getPrefWidth() / 2 - ICON_SIZE_MAX / 2)));
        animation2.setDelay(Duration.millis(25));
        animation2.play();

        Animation animation1 = new Timeline(new KeyFrame(Duration.millis(50), new KeyValue(icon.glyphSizeProperty(), ICON_SIZE_MAX)));
        animation1.setDelay(Duration.millis(25));
        animation1.play();
    }
}

我不知道该怎么办...希望，有人可以帮助我。谢谢你。

Answer 1

我认为这是因为在完成动画之前，当鼠标离开时，您的动画会混乱。解决此问题的一种方法是将动画存储在本地并进行相应的修改。例如

protected Animation animation;

protected void initAnimation()
{
    this.animation = new ParallelTransition(
                new Timeline(new KeyFrame(Duration.millis(100), new KeyValue(icon.glyphSizeProperty(), ICON_SIZE_MIN))),
                new Timeline(new KeyFrame(Duration.millis(100), new KeyValue(icon.layoutXProperty(), p.getPrefWidth() / 2 - ICON_SIZE_MIN / 2))),
                new Timeline(new KeyFrame(Duration.millis(100), new KeyValue(icon.layoutYProperty(), p.getPrefHeight() / 2 - ICON_SIZE_MIN / 2 + 43 - 20))),
                new Timeline(new KeyFrame(Duration.millis(50)), new KeyFrame(Duration.millis(100), new KeyValue(text.opacityProperty(), 1.0))));
}

private void showMenuButtons()
{
    // set animation to go foreward
    this.animation.setRate(1.0);

    // play from start when not running
    if(this.animation.getStatus() != Animation.Status.RUNNING)
        this.animation.playFromStart();
}

private void hideMenuButtons()
{
    // set animation to go backwards
    this.animation.setRate(-1.0);

    // play from end when not running
    if(this.animation.getStatus() != Animation.Status.RUNNING)
        animation.playFrom(animation.getCycleDuration());
}

Answer 2

我找到了解决方法。

我已经制作了Animation的全局变量。
我更改了方法“ hideMenuButton（）”：检查动画是否正在运行-停止动画，然后运行隐藏按钮的动画。

php artisan clear-compiled

谢谢大家对我的帮助：）

JavaFX：事件OnMouseExited不能正常工作

2 个答案: