ProgressBar Animated Javafx

Интересно, возможно ли создать панель прогресса с внешним видом, «progressbar Animated bootstrap». С полосами, идущими вбок.ProgressBar Animated Javafx

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

источник

2013-08-30 Giovane

Вы возможно, как в «есть ли существующая реализация, которую я могу использовать» или возможно как «могу ли я заставить мой компонент выглядеть так с некоторой дополнительной работой»? Ответ на первый вопрос - нет, но это возможно с некоторой настройкой. – sarcan

ProgressBar с статическим Stripes

Вот JavaFX ProgressBar, который выглядит как статический бар полосатого прогресса от Bootstrap.

striped

Градиент полоса устанавливается полностью на 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(); 
    } 
}

ProgressBar с анимированными Stripes

JavaFX имеет хорошую animation facilities, который будет разрешить т. е. градиент в строке выполнения, если хотите.

Один из способов сделать это, чтобы сделать поиск узла на панели после того, как бар был на экране и изменить свойства стиля бара в Timeline, подобно технике применяется в: How to make an animation with CSS in JavaFX?

Лично я нахожу анимированные полосы на индикаторах прогресса раздражающими.

Написание фактического кода для этого оставлено как упражнение для читателя.

источник

2013-08-31 00:22:09 jewelsea

Большое спасибо, мне очень помогли! – Giovane

В другом answer Я объяснил, как это сделать. Как сказал jewelsea, я анимировал индикатор хода с временной шкалой. Но без поиска или изменения стиля во время выполнения (на самом деле это не рекомендуется).

Вы должны написать немного больше css, но затем он работает плавно и без большого использования ЦП.

Здесь отредактированный код из 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% 
     ); 
}

источник

2014-12-18 08:35:46 Kalaschni

Это не дает ответа на вопрос.Чтобы критиковать или просить разъяснения у автора, оставьте комментарий ниже их сообщения. - [Из обзора] (/ review/low-quality-posts/10915118) – MWiesner

Я отредактировал свой ответ, чтобы он соответствовал точкам критики у рецензентов. @MWiesner: Это дает ответ на этот вопрос, если вы посмотрели на ссылку: -/лучше, чем «принято», на мой взгляд. теперь я думаю, что он не зарабатывает downvote :-( – Kalaschni

ProgressBar Animated Javafx

ответ

Смежные вопросы