如何用動畫「關閉」製作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(); 
    } 
}