JavaFX 过渡 - 悬停时变暗按钮

Posted 2023-05-08

【中文标题】JavaFX 过渡 - 悬停时变暗按钮

【英文标题】：JavaFX Transition - Darken button on hover

【发布时间】：2015-07-04 22:03:45

【问题描述】：

我是 JavaFX 的初学者。我正在尝试创建自己的 Button 子类，该子类将具有鼠标进入和鼠标退出的动画。我试图实现的动画是一个简单的“变暗”或“暗淡”过渡，当用户将鼠标悬停在按钮上时，按钮背景的颜色会变暗，并且当鼠标退出按钮时会动画回到正常状态。

首先我认为我可以使用 FillTransition 来实现这一点，但为此我需要按钮的特定较暗颜色，这取决于按钮颜色。 所以现在我试图基本上淡入和淡出按钮顶部的低不透明度黑色矩形，但矩形似乎根本没有出现。

这是我的按钮的代码：

public class FlatButton extends Button 

    private Rectangle dimRectangle;
    private Duration dimDuration = Duration.millis(250);
    private Color dimColor = new Color(0,0,0,0.11);

    public FlatButton(String text) 
        super(text);

        getStyleClass().addAll("flat-button-style");
        createEffect();
    

    private void createEffect() 
    
        dimRectangle = new Rectangle(this.getWidth(), this.getHeight(), dimColor);
        dimRectangle.setOpacity(1.0);
        dimRectangle.setX(this.get);


        FadeTransition enterTransition = new FadeTransition(dimDuration, this);
        enterTransition.setInterpolator(Interpolator.EASE_OUT);
        enterTransition.setFromValue(0.0);
        enterTransition.setToValue(1.0);

        FadeTransition exitTransition = new FadeTransition(dimDuration, this);
        exitTransition.setInterpolator(Interpolator.EASE_OUT);
        exitTransition.setFromValue(1.0);
        exitTransition.setToValue(0.0);


        this.setOnMouseEntered(new EventHandler<MouseEvent>()

            public void handle(MouseEvent mouseEvent)
                enterTransition.play();
            
        );

        this.setOnMouseExited(new EventHandler<MouseEvent>()

            public void handle(MouseEvent mouseEvent)
                exitTransition.play();
            
        );
    

编辑： 代码中的部分“new FadeTransition(dimDuration, this);”应该是“新的 FadeTransition(dimDuration, dimRectangle);”。这只是我正在测试的东西。

EDIT2：我认为“dimRectangle = new Rectangle(this.getWidth(), this.getHeight(), dimColor);”并没有真正起作用，但我还没有找到一种方法如何使矩形填充按钮尺寸。

【问题讨论】：

除非它在此代码之外，否则您似乎实际上并未在场景图的任何位置添加dimRectangle？

不，它不在代码之外。我可以以某种方式直接在这个按钮类中添加它吗？我有点关注这个材质波纹效果代码：github.com/nonameplum/md-button-fx-sample/blob/master/src/main/… 它似乎也没有添加到场景图中。

我也看不出它是如何添加到该代码中的场景图中的。我要走的路线是将 Button 和 StackPane 添加到 StackPane，然后您应该能够在矩形上添加 setMouseTransparent() 并以相同的方式淡入淡出。

【参考方案1】：

您可以使用ColorAdjust 效果并使用Timeline 更改它的brightness 属性。

public class ButtonFadeDemo extends Application 

    @Override
    public void start(Stage primaryStage) 

        try 

            Pane root = new Pane();

            Button button = new Button("Click me!");

            ColorAdjust colorAdjust = new ColorAdjust();
            colorAdjust.setBrightness(0.0);

            button.setEffect(colorAdjust);

            button.setOnMouseEntered(e -> 

                Timeline fadeInTimeline = new Timeline(
                        new KeyFrame(Duration.seconds(0), 
                                new KeyValue(colorAdjust.brightnessProperty(), colorAdjust.brightnessProperty().getValue(), Interpolator.LINEAR)), 
                                new KeyFrame(Duration.seconds(1), new KeyValue(colorAdjust.brightnessProperty(), -1, Interpolator.LINEAR)
                                ));
                fadeInTimeline.setCycleCount(1);
                fadeInTimeline.setAutoReverse(false);
                fadeInTimeline.play();

            );

            button.setOnMouseExited(e -> 

                Timeline fadeOutTimeline = new Timeline(
                        new KeyFrame(Duration.seconds(0), 
                                new KeyValue(colorAdjust.brightnessProperty(), colorAdjust.brightnessProperty().getValue(), Interpolator.LINEAR)), 
                                new KeyFrame(Duration.seconds(1), new KeyValue(colorAdjust.brightnessProperty(), 0, Interpolator.LINEAR)
                                ));
                fadeOutTimeline.setCycleCount(1);
                fadeOutTimeline.setAutoReverse(false);
                fadeOutTimeline.play();

            );

            root.getChildren().addAll(button);

            Scene scene = new Scene(root, 800, 400);
            primaryStage.setScene(scene);
            primaryStage.show();

         catch (Exception e) 
            e.printStackTrace();
        
    


    public static void main(String[] args) 
        launch(args);
    

【讨论】：

谢谢！它工作正常，虽然有什么方法可以不将效果应用于按钮文本？