问题：

ProgressBar动画Javafx

齐嘉庆

2023-03-14

我想知道是否有可能制作一个外观的进度条，“进度条动画引导”。条纹横向移动。

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

共有3个答案

燕璞

2023-03-14

如果有人对@jewelhai答案的动画版感兴趣，请检查下面的代码。

import javafx.animation.Animation;
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.ObjectProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Node;
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) {
        ObjectProperty<Node> node = new SimpleObjectProperty<>();
        ProgressBar bar = new ProgressBar(0) {
            @Override
            protected void layoutChildren() {
                super.layoutChildren();
                if (node.get() == null) {
                    Node n = lookup(".bar");
                    node.set(n);
                    int stripWidth = 10;
                    IntegerProperty x = new SimpleIntegerProperty(0);
                    IntegerProperty y = new SimpleIntegerProperty(stripWidth);
                    Timeline timeline = new Timeline(new KeyFrame(Duration.millis(35), e -> {
                        x.set(x.get() + 1);
                        y.set(y.get() + 1);
                        String style = "-fx-background-color: linear-gradient(from " + x.get() + "px " + x.get() + "px to " + y.get() + "px " + y.get() + "px, repeat, -fx-accent 50%, derive(-fx-accent, 30%) 50%);";
                        n.setStyle(style);
                        if (x.get() >= stripWidth * 2) {
                            x.set(0);
                            y.set(stripWidth);
                        }
                    }));
                    timeline.setCycleCount(Animation.INDEFINITE);
                    progressProperty().addListener((obs, old, val) -> {
                        if (old.doubleValue() <= 0) {
                            timeline.playFromStart();
                        }
                    });
                }
            }
        };
        bar.setPrefSize(200, 24);

        Timeline task = new Timeline(
                new KeyFrame(
                        Duration.ZERO,
                        new KeyValue(bar.progressProperty(), 0)
                ),
                new KeyFrame(
                        Duration.seconds(10),
                        new KeyValue(bar.progressProperty(), 1)
                )
        );

        Button button = new Button("Go!");
        button.setOnAction(actionEvent -> task.playFromStart());

        VBox layout = new VBox(10);
        layout.getChildren().setAll(bar, button);
        layout.setPadding(new Insets(10));
        layout.setAlignment(Pos.CENTER);
        
        stage.setScene(new Scene(layout));
        stage.show();
    }
}

山寒

2023-03-14

在另一个答案中，我解释了如何做到这一点。正如jewelsea所说，我用一个时间线为洞进度条设置了动画。但在运行时不进行查找或样式更改（不建议两者都进行）。

您必须编写更多的css，但它运行平稳，没有太多的CPU使用。

这里是来自jewelsea的编辑代码：

文件：StripeProgress.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：

文件：条带化进程。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%
        );
}

施彬彬

2023-03-14

带有静态条纹的ProgressBar

下面是一个JavaFX进度条，它看起来像是Bootstrap中的静态条带进度条。

条纹渐变完全在css中设置，Java代码只是一个测试工具。

文件：条带化进程。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%
    );
}

文件：StripeProgress.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有很好的动画功能，如果你愿意，可以在进度条中设置渐变动画。

一种方法是在栏显示在屏幕上后对栏进行节点查找，并在时间轴中修改栏的样式属性，类似于：如何在JavaFX中使用CSS制作动画？

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

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

类似资料：

JavaFX ProgressBar动画或过渡

我目前正在使用JavaFX进度条，使用设置进度。我想知道是否有一种方法可以使进程像过渡或类似的东西一样进行动画制作。我想给跳跃设置动画，比如从30%到90%。这可能吗？当前代码如下所示：
JavaFX ProgressBar：如何添加动画？

我创建了一个进度条，并更改了进度条的颜色。是否可以像引导动画进度条那样向进度条添加动画？这里是例子：链接在这里事实上，我找到了一个解决办法，但这不是一个好办法。 css 我创建了12个css。并使用AnimationTimer循环这12个css。比如： fxml
Android使用动画设置ProgressBar进度的方法

本文向大家介绍Android使用动画设置ProgressBar进度的方法，包括了Android使用动画设置ProgressBar进度的方法的使用技巧和注意事项，需要的朋友参考一下需求场景：当我们在使用ProgressBar的时候，希望有进度加载的效果，此时我们传统的做法是使用Thread线程来实现，下面我们用属性动画来实现，简单粗暴。。哈哈哈布局文件： Activity: 效果图：以上就是本
progressbar（滚动条）

有准确值的进度条有准确值的进度条会显示当前进度正处于整体进度的占比位置，用户可以更直观的预期完成时间；使用进度条控件，需要一个进度条控件容器，mui会自动识别该容器下是否有进度条控件，若没有，则自动创建。进度条控件DOM结构： <div id="demo1" class="mui-progressbar"> <span></span> </div> 初始化: mui(contai
Progressbar（Progressbar）

进度条表示操作或过程的完成百分比。我们可以将进度条分类为determinate progress bar和indeterminate progress bar 。 Determinate progress bar应仅用于系统可以准确更新当前状态的情况。确定的进度条不应该从左到右填充，然后循环回到空以进行单个进程。如果无法计算实际状态，则应使用indeterminate progress ba
ProgressBar 类（ProgressBar Class）

进度条用于向用户提供长时间运行过程的可视指示。 gtk.ProgressBar小部件可以在两种模式下使用 - 百分比模式和活动模式。当可以准确估计待完成的工作量有多少时，可以在百分比模式下使用进度条，用户可以看到显示已完成作业百分比的增量栏。另一方面，如果可以准确地确定要完成的工作量，则在活动模式中使用进度条，其中条通过显示来回移动的块来显示活动。以下构造函数初始化gtk.ProgressB

ProgressBar动画Javafx

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档