动画布局JavaFX [英] Animating Layouts JavaFX

问题描述

我只是想知道在JavaFx中是否有任何简单的动画布局方式，比如VBox和HBox。我希望我的应用程序在指定的时间后更改我的VBox的背景颜色。但我意识到FillTransition没有类似的东西，我可以使用VBox或HBox来做到这一点。关于如何做到这一点的任何建议？

I just want to find out if there is any simple way of animating layouts in JavaFx, such as the VBox and HBox. I would like my application to change the background color of my VBox after a specified time. But I realized that there is nothing similar to FillTransition that I could use to do this using a VBox or an HBox. Any advice on how I could do this?

推荐答案

2.0-SNAPSHOT版本的ReactFX ：

ObjectProperty<Color> color = new SimpleObjectProperty<>(Color.WHITE);
Val<Background> animBgr = Val.animate(color, Duration.ofMillis(500))
        .map(c -> new Background(new BackgroundFill(c, null, null)));
vbox.backgroundProperty().bind(animBgr);

现在每当你更新颜色时，背景 vbox 的颜色将在500毫秒内平滑过渡到新颜色。

Now whenever you update color, the background color of vbox will smoothly transition to the new color in 500 milliseconds.

如果你想每5个颜色改变颜色秒，您可以创建一个 EventStream 的颜色，每隔5秒发出一次颜色并使用该颜色设置颜色的颜色：

If you want to change color every 5 seconds, you can create an EventStream of colors that emits a color every 5 seconds and use that color to set the value of color:

private static final Color[] COLORS = new Color[] {
    Color.WHITE, Color.AQUA, Color.web("#FFDA8F"), Color.CORAL, Color.CYAN
};

private EventStream<Color> colorStream() {
    return EventStreams.ticks(Duration.ofSeconds(5))
            .accumulate(0, (n, t) -> (n + 1) % COLORS.length)
            .map(i -> COLORS[i]);
}

colorStream().feedTo(color);

完整的可运行演示如下所示：

A full runnable demo looks like this:

import java.time.Duration;

import javafx.application.Application;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.scene.Scene;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

import org.reactfx.EventStream;
import org.reactfx.EventStreams;
import org.reactfx.value.Val;


public class ChangingBackgroundColor extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    private static final Color[] COLORS = new Color[] {
        Color.WHITE, Color.AQUA, Color.web("#FFDA8F"), Color.CORAL, Color.CYAN
    };

    @Override
    public void start(Stage stage) throws Exception {
        VBox vbox = new VBox();

        ObjectProperty<Color> color = new SimpleObjectProperty<>(COLORS[0]);
        Val<Background> animBgr = Val.animate(color, Duration.ofMillis(500))
                .map(c -> new Background(new BackgroundFill(c, null, null)));
        vbox.backgroundProperty().bind(animBgr);

        colorStream().feedTo(color);

        stage.setScene(new Scene(vbox, 400, 400));
        stage.show();
    }

    private EventStream<Color> colorStream() {
        return EventStreams.ticks(Duration.ofSeconds(5))
                .accumulate(0, (n, t) -> (n + 1) % COLORS.length)
                .map(i -> COLORS[i]);
    }
}

停止动画。如果在应用程序退出之前从场景中删除了VBox，则应停止动画以防止内存和CPU泄漏。上面的 feedTo 方法返回 Subcription ，我在上面的示例代码中忽略了该方法。为了停止动画，你可以这样做：

Stopping the animation. If the VBox is removed from the scene before the application exits, the animation should be stopped in order to prevent memory and CPU leaks. The feedTo method above returns a Subcription, which I ignored in the sample code above. In order to stop the animation, you would do:

Subscription subscription = colorStream().feedTo(color);

// later
subscription.unsubscribe();

这篇关于动画布局JavaFX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！