如何在javafx中使用节点的宽度制作动画/过渡？

Question

I want to make an animation with the "width" of my node.

In this case my node is a "AnchorPane".

I try to make a navigation drawer in javafx.

there is no property "width Property ()"?

new Key Value (node.width Property (), 1, WEB_EASE)

node.widthProperty().getValue( ) not found

My code:

public void changeWidth(final Node node, double width) {
    this.node = node;
    this.timeline = TimelineBuilder.create()
        .keyFrames(
            new KeyFrame(Duration.millis(20),    
                new KeyValue(    going here?   , width, WEB_EASE)
            )
        )
        .build();

    setCycleDuration(Duration.seconds(5));
    setDelay(Duration.seconds(0));
}

Example with "opacity" property:

new KeyValue(node.opacityProperty(), 1, WEB_EASE)

My class ConfigAnimationViewPane:

public class ConfigAnimationViewPane extends Transition {
    protected static final Interpolator WEB_EASE = Interpolator.EASE_BOTH;
    protected AnchorPane node;
    protected Timeline timeline;
    private boolean oldCache = false;
    private CacheHint oldCacheHint = CacheHint.DEFAULT;
    private final boolean useCache = true;



    /**
     * Called when the animation is starting
     */
    protected void starting() {
        if (useCache) {
            oldCache = node.isCache();
            oldCacheHint = node.getCacheHint();
            node.setCache(true);
            node.setCacheHint(CacheHint.SPEED);
        }
    }

    /**
     * Called when the animation is stopping
     */
    protected void stopping() {
        if (useCache) {
            node.setCache(oldCache);
            node.setCacheHint(oldCacheHint);
        }
    }

    @Override protected void interpolate(double d) {
        timeline.playFrom(Duration.seconds(d));
        timeline.stop();
    }

}

This is mi controller:

Move the menu to the left (the occult)

LeftTransition leftTransition = new LeftTransition();
                leftTransition.OpenMenu(list1);
                leftTransition.play();

Here I want to put my size "AnchorPane". (Set the width of my "anchorpane")

 /*ViewPaneTransition paneTransition = new ViewPaneTransition();
            paneTransition.CloseMenu(viewPane, width );
            paneTransition.play();*/

Answer 1

Here is a working example for java 9. It changes both the width and the height (just remove the height line if you don't need it)

The widthProperty is readOnly so yo have to set either maxWidth or minWidth switch the case you need. the delay duration on timeline is 0 by default, no need to set it, and the cycleduration is computed from the keyframes durations.

public void changeSize(final Pane pane, double width, double height) {
    Duration cycleDuration = Duration.millis(500);
    Timeline timeline = new Timeline(
            new KeyFrame(cycleDuration,
                    new KeyValue(pane.maxWidthProperty(),width,Interpolator.EASE_BOTH)),
            new KeyFrame(cycleDuration,
                    new KeyValue(pane.maxHeightProperty(),height,Interpolator.EASE_BOTH))
            );

    timeline.play();
    timeline.setOnFinished(event->{
       /* insert code here if you need */
    });
}

Answer 2

public void changeWidth(final Pane/*Region*/ node, double width) {//its a Pane or Regions
    this.node = node;
    this.timeline = TimelineBuilder.create()
        .keyFrames(
            new KeyFrame(Duration.millis(20),    
                new KeyValue(    going here?   , width, WEB_EASE)
            )
        )
        .build();

    setCycleDuration(Duration.seconds(5));
    setDelay(Duration.seconds(0));
}

In this case my node is a "AnchorPane".

your AnchorPane is a subclass or Pane , let your wrappers or methods take in Pane or their respective class