JavaFX ProgressBar:如何添加动画? [英] JavaFX ProgressBar: how to add an animation?
问题描述
我创建了一个进度条并更改了条形颜色。
I created a progress bar and changed the bar color.
是否可以将动画添加到进度条,例如bootstrap动画进度条?
Is it possible to add an animation to the progress bar like bootstrap animated progress bar?
以下是示例:
此处链接
实际上,我找到了一个解决方案,但它不是一个好的解决方案。
Actually, I find a solution, but It's not a nice one.
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。
I create 12 css. And use AnimationTimer to loop this 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" />
推荐答案
我已经通过以下代码实现了这一点:
I have realized this with the folowing code:
// 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(由如果你真的经常这样做的话,真正的时间/内存消耗。
All without making a lookup(what is not recommended), nor changing the CSS(which is by the way really "time/memory consuming" if you make it really often).
你的CSS看起来像这样:
You CSS will look something like this:
.progress-bar > .bar {
...
}
.progress-bar:status1 > .bar {
...
}
.progress-bar:status2 > .bar {
...
}
...
您也可以使用css-classes而不是伪伪的东西,但这是您的选择。
You could also use css-classes instead of the hole pseudo thing, but that is you choice.
快乐编码,
Kalasch
Happy Coding,
Kalasch
这篇关于JavaFX ProgressBar:如何添加动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!