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屋！