JavaFX ProgressBar：如何添加動畫？

我創建了一個進度條並更改了條的顏色。JavaFX ProgressBar：如何添加動畫？

是否可以將動畫添加到進度條，如引導動畫進度條？

這裏是例子： link here

其實，我找到一個解決方案，但它不是一個很好的一個。

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。

像：

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

來源

2014-03-30 Michael

你能告訴我們你的代碼，請 – Mathias

當然，我更新我的代碼。謝謝！ – Michael

按照[這個答案]（http://stackoverflow.com/questions/18539642/progressbar-animated-javafx/18543205#18543205）。在那裏你會找到作者的另一個答案的鏈接，其中CSS屬性隨着動畫而改變。也就是說，通過查找獲取進度條的.bar選擇器，然後構建一個字符串可觀察值，其中「線性梯度」的「from」部分綁定到其他數字可觀察值，並將字符串observable值綁定到bar的樣式。 –

我有如下因素代碼來實現這一點：

// 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（這是真正的「時間/記憶consumi如果你真的經常這樣做）。

你的CSS將是這個樣子：

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

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

你也可以使用CSS類，而不是孔僞的事情，但是這是你的選擇。

編碼快樂，
Kalasch

來源

2014-12-17 19:53:36 Kalaschni

JavaFX ProgressBar：如何添加動畫？

回答

相關問題