ProgressBar動畫Javafx

Question

我不知道是否有可能使外觀進度條，「progressbar Animated bootstrap」。條紋橫着。

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

Answer 1

進度與靜態條紋

這裏有一個JavaFX的進度，它看起來像從引導靜態條紋進度條。

條紋梯度完全在CSS設置，Java代碼只是測試線束。

文件：條紋-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的具有良好​​這將讓你生氣如果您願意，可以在進度條中使用漸變。 How to make an animation with CSS in JavaFX?

：做

一種方法是做了吧上的一個節點查找欄已經顯示在屏幕上後，並修改欄的樣式屬性在Timeline，類似的技術在應用

個人而言，我發現進度條上的動畫條紋令人討厭。

爲此編寫實際代碼僅作爲讀者的練習。

Answer 2

在另一個answer我已經解釋瞭如何做到這一點。 就像jewelsea說的，我用時間線爲洞穴進度條帶來了動畫。但是如果在運行時沒有查找或樣式更改（兩者都不是真的推薦）。

你必須多寫一點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：

文件：條紋-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% 
     ); 
}