JavaFX Transition - 悬停时变暗按钮

时间:2015-04-26 14:39:34

标签: button javafx hover transitions

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

}

编辑:代码中的部分&#34;新的FadeTransition(dimDuration,this);&#34;应该是&#34;新的FadeTransition(dimDuration,dimRectangle);&#34;。这只是我正在测试的东西。

EDIT2:我认为&#34; dimRectangle = new Rectangle(this.getWidth(),this.getHeight(),dimColor);&#34;是不是真的有效,但我还没有找到一种方法,如何使矩形填充按钮尺寸。

1 个答案:

答案 0 :(得分:1)

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

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