Question

我想知道是否可以制作带有外观的进度条，“progressbar Animated bootstrap”。条纹横着走。

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

Answer 1

带有静态条纹的ProgressBar

这是一个JavaFX ProgressBar，看起来像Bootstrap的静态条带进度条。

striped

条带渐变完全在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具有良好的animation facilities，如果您愿意，可以在进度条中为渐变设置动画。

一种方法是在屏幕上显示条形图后在条形图上进行节点查找，并在Timeline中修改条形图的样式属性，类似于以下应用的技术：{ {3}}

就个人而言，我发现进度条上的动画条纹很烦人。

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

Answer 2

在另一个answer我解释了如何做到这一点。就像珠宝说的那样，我用时间线为洞进度棒制作了动画。但是在运行时没有查找或样式更改（两者都不是真的推荐）。

你必须多写一点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%
        );
}

ProgressBar动画Javafx

2 个答案: