ProgressBar动画Javafx

Question

我想知道是否可以使用"progressbar Animated bootstrap"创建一个带有进度条的进度条.条纹横着走.

http://getbootstrap.com/2.3.2/components.html#progress

Answer 1

带静态条纹的ProgressBar

这是一个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();
  }
}

带有动画条纹的ProgressBar

JavaFX具有良好的动画功能,如果您愿意,可以在进度条中为渐变设置动画.

一种方法是在屏幕上显示条形图后在条形图上执行节点查找,并在时间轴中修改条形图的样式属性,类似于以下技术:如何使用CSS制作动画JavaFX的？

就个人而言,我发现进度条上的动画条纹令人讨厌.

为此编写实际代码留给读者练习.