我想知道是否可以用外观制作进度条，“progressbar Animated bootstrap”。横着条纹。
问问题
17592 次
3 回答
15
带有静态条纹的进度条
这是一个 JavaFX ProgressBar，它看起来像来自 Bootstrap 的静态条纹进度条。
条纹渐变完全在 css 中设置，Java 代码只是一个测试工具。
文件：striped-progress.css
.progress-bar > .bar {
-fx-background-color: linear-gradient(
from 0px .75em to .75em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
文件：StripedProgress.java
import javafx.animation.*;
import javafx.application.Application;
import javafx.event.*;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;
/** Displays progress on a striped progress bar */
public class StripedProgress extends Application {
public static void main(String[] args) { launch(args); }
@Override public void start(final Stage stage) {
ProgressBar bar = new ProgressBar(0);
bar.setPrefSize(200, 24);
Timeline task = new Timeline(
new KeyFrame(
Duration.ZERO,
new KeyValue(bar.progressProperty(), 0)
),
new KeyFrame(
Duration.seconds(2),
new KeyValue(bar.progressProperty(), 1)
)
);
Button button = new Button("Go!");
button.setOnAction(new EventHandler<ActionEvent>() {
@Override public void handle(ActionEvent actionEvent) {
task.playFromStart();
}
});
VBox layout = new VBox(10);
layout.getChildren().setAll(
bar,
button
);
layout.setPadding(new Insets(10));
layout.setAlignment(Pos.CENTER);
layout.getStylesheets().add(
getClass().getResource(
"striped-progress.css"
).toExternalForm()
);
stage.setScene(new Scene(layout));
stage.show();
}
}
带有动画条纹的进度条
JavaFX 具有良好的动画功能，如果您愿意，可以让您在进度条内设置渐变动画。
一种方法是在 bar 显示在屏幕上之后在 bar 上进行节点查找，并在Timeline中修改 bar 的 style 属性，类似于应用在的技术：How to make an animation with CSS in JavaFX？
就个人而言，我发现进度条上的动画条纹很烦人。
为此编写实际代码留给读者作为练习。
于 2013-08-31T00:22:09.597 回答
3
在另一个答案中，我已经解释了如何做到这一点。就像珠宝海说的那样，我用时间线为洞进度条设置了动画。但是在运行时没有查找或样式更改（两者都不是真的推荐）。
您必须多写一点 css，但它会运行平稳且没有太多 CPU 使用率。
这是来自jewelsea的编辑代码：
文件：StripedProgress.java
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.css.PseudoClass;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ProgressBar;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;
/**
* Displays progress on a striped progress bar
*/
public class StripedProgress extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(final Stage stage) {
ProgressBar bar = new ProgressBar(0);
bar.setPrefSize(200, 24);
Timeline task = new Timeline(
new KeyFrame(
Duration.ZERO,
new KeyValue(bar.progressProperty(), 0)
),
new KeyFrame(
Duration.seconds(2),
new KeyValue(bar.progressProperty(), 1)
)
);
// 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);
});
Button button = new Button("Go!");
button.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent actionEvent) {
task.playFromStart();
}
});
VBox layout = new VBox(10);
layout.getChildren().setAll(
bar,
button
);
layout.setPadding(new Insets(10));
layout.setAlignment(Pos.CENTER);
layout.getStylesheets().add(
getClass().getResource(
"/styles/striped-progress.css"
).toExternalForm()
);
stage.setScene(new Scene(layout));
stage.show();
}
}
以及完整的 CSS：
文件：striped-progress.css
.progress-bar:status1 > .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:status2 > .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:status3 > .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:status4 > .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:status5 > .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:status6 > .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:status7 > .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:status8 > .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:status9 > .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:status10 > .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:status11 > .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:status12 > .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%
);
}
于 2014-12-18T08:35:46.080 回答
0
如果有人对@jewelsea 答案的动画版本感兴趣，请查看以下代码。
import javafx.animation.Animation;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ProgressBar;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;
/**
* Displays progress on a striped progress bar
*/
public class StripedProgress extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(final Stage stage) {
ObjectProperty<Node> node = new SimpleObjectProperty<>();
ProgressBar bar = new ProgressBar(0) {
@Override
protected void layoutChildren() {
super.layoutChildren();
if (node.get() == null) {
Node n = lookup(".bar");
node.set(n);
int stripWidth = 10;
IntegerProperty x = new SimpleIntegerProperty(0);
IntegerProperty y = new SimpleIntegerProperty(stripWidth);
Timeline timeline = new Timeline(new KeyFrame(Duration.millis(35), e -> {
x.set(x.get() + 1);
y.set(y.get() + 1);
String style = "-fx-background-color: linear-gradient(from " + x.get() + "px " + x.get() + "px to " + y.get() + "px " + y.get() + "px, repeat, -fx-accent 50%, derive(-fx-accent, 30%) 50%);";
n.setStyle(style);
if (x.get() >= stripWidth * 2) {
x.set(0);
y.set(stripWidth);
}
}));
timeline.setCycleCount(Animation.INDEFINITE);
progressProperty().addListener((obs, old, val) -> {
if (old.doubleValue() <= 0) {
timeline.playFromStart();
}
});
}
}
};
bar.setPrefSize(200, 24);
Timeline task = new Timeline(
new KeyFrame(
Duration.ZERO,
new KeyValue(bar.progressProperty(), 0)
),
new KeyFrame(
Duration.seconds(10),
new KeyValue(bar.progressProperty(), 1)
)
);
Button button = new Button("Go!");
button.setOnAction(actionEvent -> task.playFromStart());
VBox layout = new VBox(10);
layout.getChildren().setAll(bar, button);
layout.setPadding(new Insets(10));
layout.setAlignment(Pos.CENTER);
stage.setScene(new Scene(layout));
stage.show();
}
}
于 2021-12-20T01:36:01.460 回答