ProgressBar 动画 Javafx [英] ProgressBar Animated Javafx

问题描述

我想知道是否可以制作一个外观为progressbar Animated bootstrap"的进度条.横着条纹.

如果您愿意，可以在进度条中设置渐变动画.

一种方法是在栏显示在屏幕上后在栏上进行节点查找，并在 时间线，类似于以下应用的技术:如何在JavaFX中使用CSS制作动画?

就我个人而言，我觉得进度条上的动画条纹很烦人.

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

I wonder if it is possible to make a progressbar with the appearance,"progressbar Animated bootstrap". With stripes going sideways.

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

解决方案

ProgressBar with Static Stripes

Here is a JavaFX ProgressBar which looks like a static striped progress bar from Bootstrap.

The stripe gradient is set entirely in css, the Java code is just a test harness.

File: 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%
    );
}

File: 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 with Animated Stripes

JavaFX has good animation facilities which will allow you to animate the gradient within the progress bar if you wish.

One way to do that is to do a node lookup on the bar after the bar has been displayed on the screen and modify the style property of the bar in a Timeline, similar to the technique applied in: How to make an animation with CSS in JavaFX?

Personally, I find animated stripes on progress bars annoying.

Writing the actual code for this is left as an exercise for the reader.

这篇关于ProgressBar 动画 Javafx的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！