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

动画布局JavaFX

1 个答案: