animation - アニメーション化された「クローズアップ」で 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();
    }
}