Animated transitions between views in Flow

[Robert Ross]

Has anyone had any luck adding JavaFX transitions between views in a DataFX Flow?  Is this even possible?

[Hendrik Ebbers]

Hi,
you can do this by implementing your own FlowContaine instead of using the DefaultFlowContainer. A additional implementation with CSS definable Animations is planned for the DataFX 8 release this summer. Sadly the sources are not documented until now...

See https://bitbucket.org/datafx/datafx/src/196844514a39b24d7ecef60fecbb260166ddb4c1/datafx-flow/src/main/java/org/datafx/controller/flow/FlowContainer.java?at=default

[Hendrik Ebbers]

I created an issue: https://bitbucket.org/datafx/datafx/issue/23/flowcontainer-implementation-with

[Jason Pollastrini]

public class FadeFlowContainer implements FlowContainer<StackPane>{

    private Timeline timeline;
    private final StackPane root;
    private final Duration fadeTime;

    public FadeFlowContainer(StackPane root, Duration dur) {
        this.root = root;
        this.fadeTime = dur;
    }
   
   
    @Override
    public <U> void setViewContext(ViewContext<U> context) {
        if(timeline != null){
            timeline.stop();
        }
        timeline = new Timeline();
        timeline.getKeyFrames().addAll(
                //start fade out
                new KeyFrame(Duration.ZERO, new KeyValue(root.opacityProperty(), 1.0, Interpolator.EASE_BOTH)),
                new KeyFrame(fadeTime.divide(2), e ->{
                    root.getChildren().clear();
                    root.getChildren().add(context.getRootNode());
                }, new KeyValue(root.opacityProperty(), 0.0, Interpolator.EASE_BOTH)),
                //start fade in
                new KeyFrame(fadeTime, new KeyValue(root.opacityProperty(), 0.0, Interpolator.EASE_BOTH)),
                new KeyFrame(fadeTime.multiply(2), new KeyValue(root.opacityProperty(), 1.0, Interpolator.EASE_BOTH))
        );
        timeline.play();
    }

    @Override
    public StackPane getView() {
        return root;

[Hendrik Ebbers]

Hi,

i added a comment to the issue at Bitbucket (https://bitbucket.org/datafx/datafx/issue/23/flowcontainer-implementation-with):

Hi Jason,

thanks for the code. Currently I see one problem with your solution: Once the setViewContext method will be called the old view must disapear from screen. The @PreDestroy annotated method of the view controller is called and that can result in strange issues if a user clicks a button on the old view while it fades out. I think it's a better idea to use an image of the old view instead of the real view. The workflow should be like this: - create a snapshot of the old view - replace old view with snapshot - fade out snapshot By doing so the nodes of the old view aren't on screen any more and a user can't interact with them. If you are interessted in doing this you can create a pull request :)