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：如何添加动画？

回答

相关问题