JavaFX ProgressBar：如何添加动画？

我创建了一个进度条并更改了进度条颜色。

是否可以像 bootstrap 动画进度条一样向进度条添加动画？

这是示例：链接在这里 http://getbootstrap.com/components/#progress-animated

实际上，我找到了一种解决方案，但这不是一个好的解决方案。

css

.progress-bar-1 > .bar {
-fx-background-color: linear-gradient(
    from 0em 0.75em to 0.75em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-2 > .bar {
-fx-background-color: linear-gradient(
    from 0.25em 0.75em to 1em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-3 > .bar {
-fx-background-color: linear-gradient(
    from 0.5em 0.75em to 1.25em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-4 > .bar {
-fx-background-color: linear-gradient(
    from 0.75em 0.75em to 1.5em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-5 > .bar {
-fx-background-color: linear-gradient(
    from 1em 0.75em to 1.75em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-6 > .bar {
-fx-background-color: linear-gradient(
    from 1.25em 0.75em to 2em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-7 > .bar {
-fx-background-color: linear-gradient(
    from 1.5em 0.75em to 2.25em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-8 > .bar {
-fx-background-color: linear-gradient(
    from 1.75em 0.75em to 2.5em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-9 > .bar {
-fx-background-color: linear-gradient(
    from 2em 0.75em to 2.75em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-10 > .bar {
-fx-background-color: linear-gradient(
    from 2.25em 0.75em to 3em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-11 > .bar {
-fx-background-color: linear-gradient(
    from 2.5em 0.75em to 3.25em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-12 > .bar {
-fx-background-color: linear-gradient(
    from 2.75em 0.75em to 3.5em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

我创建了 12 个 css。并使用AnimationTimer循环这12个css。

Like:

    String str = "progress-bar-%d";
    progress.getStyleClass().add(String.format(str, i));
    AnimationTimer timer = new AnimationTimer(){
        @Override
        public void handle(long l){
            if(j != 10) {j++; return;}
            j = 0;
            progress.getStyleClass().removeAll(String.format(str, i));
            i++;
            if(i == 13){
                i = 1;
            }
            progress.getStyleClass().add(String.format(str, i));
        }
    };
    timer.start();

fxml

<ProgressBar fx:id="progress" prefWidth="200"  progress="0.5"  />

我通过以下代码实现了这一点：

// Set the max status
int maxStatus = 12;
// Create the Property that holds the current status count
IntegerProperty statusCountProperty = new SimpleIntegerProperty(1);
// Create the timeline that loops the statusCount till the maxStatus
Timeline timelineBar = new Timeline(
        new KeyFrame(
                // Set this value for the speed of the animation
                Duration.millis(300),
                new KeyValue(statusCountProperty, maxStatus)
        )
);
// The animation should be infinite
timelineBar.setCycleCount(Timeline.INDEFINITE);
timelineBar.play();
// Add a listener to the statusproperty
statusCountProperty.addListener((ov, statusOld, statusNewNumber) -> {
    int statusNew = statusNewNumber.intValue();
    // Remove old status pseudo from progress-bar
    bar.pseudoClassStateChanged(PseudoClass.getPseudoClass("status" + statusOld.intValue()), false);
    // Add current status pseudo from progress-bar
    bar.pseudoClassStateChanged(PseudoClass.getPseudoClass("status" + statusNew), true);
});

所有这些都无需进行查找（不推荐），也无需更改CSS（如果您经常这样做，这实际上是“耗时/内存消耗”）。

你的 CSS 看起来会是这样的：

.progress-bar > .bar {
    ...
}
.progress-bar:status1 > .bar {
    ...
}

.progress-bar:status2 > .bar {
    ...
}
...

你也可以使用 css-classes 来代替洞伪的东西，但这是你的选择。

快乐编码，
Kalasch