Animation 如何使用动画“创建VBox”；特写镜头；？

我构建了一个表单，它在

VBox

的内部有一个

VBox

。我想让内部的

VBox

从底部过渡到顶部“关闭”

之后，外部

VBox

中的下一个元素应该向上移动以填充空白，就像从

VBox

中删除项目一样

---

如何实现这一点？

您可以尝试下一种方法：使用剪辑隐藏“正在消失”的内容，并在动画期间控制内部

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

public类ShrinkingVBox扩展应用程序{
私有静态类SmartVBox扩展区域{
私有矩形clipRect=新矩形（）；
私有VBox内容=新VBox（）；
公共SmartVBox（）{
setClip（clipRect）；
getChildren（）.add（内容）；
}
//我们需要下一步的方法来调整我们的剪辑到内部vbox内容
@凌驾
受保护的void setWidth（双值）{
super.setWidth（值）；
clipRect.setWidth（值）；
}
@凌驾
受保护的空隙设置高度（双倍值）{
super.setHeight（值）；
clipRect.设置高度（值）；
}
//在这里，我们将做所有的动画
公共空间特写（）{
setMaxHeight（getHeight（））；
//动画通过将内容移出剪裁区域来隐藏内容
//同时降低控制高度
时间线动画=TimelineBuilder.create（）.cycleCount（1）.关键帧(
新关键帧（持续时间。秒（1），
新的键值（content.translateYProperty（），-getHeight（）），
新的键值（maxHeightProperty（），0）））.build（）；
动画。播放（）；
}
受保护的可观察列表getContent（）{
返回content.getChildren（）；
}
}
@凌驾
公共无效开始（阶段primaryStage）{
VBox outer=新的VBox（）；
最终SmartVBox内部=新的SmartVBox（）；
//内部vbox的一些随机内容
内部.getContent（）.addAll(
CircleBuilder.create（）.radius（25）.fill（颜色.黄色）.build（），
CircleBuilder.create（）.radius（25.fill（Color.PINK.build（））；
//外部vbox的内容，包括内部vbox和运行动画的按钮
outer.getChildren（）.addAll(
矩形生成器.create（）.width（50）.height（50）.fill（Color.GRAY）.build（），
内部的
矩形生成器.create（）.width（50）.height（50）.fill（Color.RED）.build（），
矩形生成器.create（）.width（50）.height（50）.fill（Color.BLUE）.build（），
ButtonBuilder.create（）.text（“go”）.onAction（新事件处理程序（）{
@凌驾
公共无效句柄（ActionEvent t）{
内部特写（）；
}
}).build（））；
初级阶段。设置场景（新场景（新组（外部））；
primaryStage.show（）；
}
公共静态void main（字符串[]args）{
发射（）；
}
}

对不起，我没有得到你的答案。我不想删除或添加内部VBox，我想让它消失，并使以下元素向上移动。你想为此制作动画吗？我想制作一个内部VBox的动画，从下到上。我成功地将其缩放为0，但我更喜欢类似窗口的动画。在缩放之后，空的空间并没有消失。