如何在 javafx 中使用节点的宽度制作 animation/transition？

Question

我想用我节点的 "width" 制作动画。

在这种情况下，我的节点是 "AnchorPane"。

我尝试在 javafx 中制作导航抽屉。

没有属性"width Property ()"?

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

node.widthProperty().getValue() 未找到

我的代码：

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));
}

示例 "opacity" 属性:

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

我的 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();
    }

}

这是小米控制器：

将菜单向左移动（神秘学）

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

这里我想放上我的尺码"AnchorPane"。（设置我的宽度"anchorpane"）

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

Answer 1

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".

你的 AnchorPane 是一个子 class 或 Pane，让你的包装器或方法接受 Pane 或它们各自的 class

Answer 2

这是java 9 的工作示例。它同时更改了宽度和高度（如果不需要，只需删除高度线）

widthProperty 是只读的，因此您必须根据需要设置 maxWidth 或 minWidth 开关。时间轴上的延迟时长默认为0，无需设置，循环时长由关键帧时长计算

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 */
    });
}

如何在 javafx 中使用节点的宽度制作 animation/transition？

How to make an animation/transition with the width of a node in javafx?

java

animation

transition

javafx