如何用动画“关闭”制作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(); 
    } 
}