animation - 如何制作带有动画 "close up"的 VBox ？

Question

我已经构建了一个在 VBox 内部有一个 VBox 的表单。我想让内部VBox从底部到顶部过渡地“关闭”。

之后，外部 VBox 中的下一个元素应该向上移动以填充空白空间，就像从 VBox 中删除项目时一样。

我怎样才能实现这个目标？

Answer 1

您可以尝试下一种方法:在动画过程中使用剪辑来隐藏“消失”的内容并控制内部VBox的高度:

public class ShrinkingVBox extends Application {

    private static class SmartVBox extends Region {

        private Rectangle clipRect = new Rectangle();
        private VBox content = new VBox();

        public SmartVBox() {
            setClip(clipRect);
            getChildren().add(content);
        }

        // we need next methods to adjust our clipping to inner vbox content
        @Override
        protected void setWidth(double value) {
            super.setWidth(value);
            clipRect.setWidth(value);
        }

        @Override
        protected void setHeight(double value) {
            super.setHeight(value);
            clipRect.setHeight(value);
        }

        // here we will do all animation
        public void closeup() {
            setMaxHeight(getHeight());
            // animation hides content by moving it out of clipped area
            // and reduces control height simultaneously
            Timeline animation = TimelineBuilder.create().cycleCount(1).keyFrames(
                new KeyFrame(Duration.seconds(1),
                    new KeyValue(content.translateYProperty(), -getHeight()),
                    new KeyValue(maxHeightProperty(), 0))).build();
            animation.play();

        }

        protected ObservableList<Node> getContent() {
            return content.getChildren();
        }
    }

    @Override
    public void start(Stage primaryStage) {
        VBox outer = new VBox();
        final SmartVBox inner = new SmartVBox();

        //some random content for inner vbox
        inner.getContent().addAll(
                CircleBuilder.create().radius(25).fill(Color.YELLOW).build(),
                CircleBuilder.create().radius(25).fill(Color.PINK).build());

        // content for outer vbox, including inner vbox and button to run animation
        outer.getChildren().addAll(
                RectangleBuilder.create().width(50).height(50).fill(Color.GRAY).build(),
                inner,
                RectangleBuilder.create().width(50).height(50).fill(Color.RED).build(),
                RectangleBuilder.create().width(50).height(50).fill(Color.BLUE).build(),
                ButtonBuilder.create().text("go").onAction(new EventHandler<ActionEvent>() {
                    @Override
                    public void handle(ActionEvent t) {
                        inner.closeup();
                    }
                }).build());

        primaryStage.setScene(new Scene(new Group(outer)));
        primaryStage.show();
    }

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