动画布局JavaFX

Question

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

Answer 1

2.0-SNAPSHOT version of 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);

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

如果你想每 5 秒改变一次颜色，你可以创建一个 EventStream 颜色，每 5 秒发射一种颜色，并使用该颜色来设置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);

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

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，我在上面的示例代码中忽略了它。为了停止动画，你会这样做：

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

// later
subscription.unsubscribe();