JavaFX: how to create slide in animation effect for a pane (inside a transparent stage)

前端未结

关注

 2  560

不要未来只要你来 2020-12-13 11:33

I would like some guidelines on how to implement a slide in transition for a pane when user presses a button, just like Material Design does it for sliding menus.

2条回答

难免孤独 (楼主)

2020-12-13 11:45

Finally, I get it done.

They key features are:

Set the shadow effect on the root pane using a custom pane that drows a shadow outside its layout bounds and crops its inside content, so it has a transparent content.
The root pane can be anything else than AnchorPane.
Clip the pane that holds the main content to its inside bounds.

Below is a snippet of the source code that controls these effects:

@Override
public void initialize(URL url, ResourceBundle rb) {  
    ...

    Rectangle clip = new Rectangle(rootPaneWidth, rootPaneHeight);
    rootPane.setClip(clip);
    rootPane.getChildren().add(setupShadowPane());
}

private Pane setupShadowPane() {
    Pane shadowPane = new Pane();
    shadowPane.setStyle(
        "-fx-background-color: white;" +
        "-fx-effect: dropshadow(gaussian, black, " + shadowSize + ", 0, 0, 0);" +
        "-fx-background-insets: " + shadowSize + ";"
    );

    Rectangle innerBounds = new Rectangle();
    Rectangle outerBounds = new Rectangle();
    shadowPane.layoutBoundsProperty().addListener((observable, oldBounds, newBounds) -> {
        innerBounds.relocate(newBounds.getMinX() + shadowSize, newBounds.getMinY() + shadowSize);
        innerBounds.setWidth(newBounds.getWidth() - shadowSize * 2);
        innerBounds.setHeight(newBounds.getHeight() - shadowSize * 2);
        outerBounds.setWidth(newBounds.getWidth());
        outerBounds.setHeight(newBounds.getHeight());

        Shape clip = Shape.subtract(outerBounds, innerBounds);
        shadowPane.setClip(clip);
    });

    return shadowPane;
}