如何在 JavaFX 中为一条线设置动画，就像信号通过一样

Question

在 JavaFX 中，我试图实现一条线（更确切地说是一条多段线）的平滑动画，它看起来像是一个信号穿过那条线。行是用某种颜色（例如，黑色）着色，并不断用新颜色（例如，红色）重新着色。所以开始的时候线是黑色的，最后的线是红色的。

我怎样才能做到这一点？下面图片中的示例。

Beginning of animation

During animation

End of animation

请注意，方向很重要。

我尝试结合使用 StrokeTransition 和 PathTransition，但不知道如何正确地做到这一点：

  PathTransition pt = new PathTransition(Duration.seconds(5), MWFsignal);
  StrokeTransition st = new StrokeTransition(Duration.ZERO);

  SequentialTransition seq = new SequentialTransition(pt, st);
  seq.play();

我的逻辑是这样的：首先穿过多段线，然后随着你的移动，对您到目前为止已经走过的部分应用笔触过渡。

Answer 1

您可以创建一个 DoubleProperty 表示 "signal" 的位置，作为从 0 到 1 的值。

然后将行的stroke绑定到那个属性，生成一个LinearGradient，在该位置的值处从红色变为黑色。然后，您可以使用任何标准动画为信号位置设置动画：

    DoubleProperty signalPosition = new SimpleDoubleProperty(0);
    line.strokeProperty().bind(Bindings.createObjectBinding(() -> 
        new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, 
                new Stop(0, Color.CORAL),
                new Stop(signalPosition.get(), Color.CORAL),
                new Stop(signalPosition.get(), Color.BLACK),
                new Stop(1, Color.BLACK)), 
        signalPosition));

    Timeline animation = new Timeline(
            new KeyFrame(Duration.ZERO,       new KeyValue(signalPosition, 0)),
            new KeyFrame(Duration.seconds(5), new KeyValue(signalPosition, 1))
    );

这是一个完整的例子：

import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.Polyline;
import javafx.stage.Stage;
import javafx.util.Duration;

public class AnimatedPolylineStroke extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        Pane root = new Pane();
        Polyline line = new Polyline(new double[] {
            100.0, 300.0,
            300.0, 100.0,
            500.0, 300.0
        });
        line.setStrokeWidth(4);
        root.getChildren().add(line);

        DoubleProperty signalPosition = new SimpleDoubleProperty(0);
        line.strokeProperty().bind(Bindings.createObjectBinding(() -> 
            new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, 
                    new Stop(0, Color.CORAL),
                    new Stop(signalPosition.get(), Color.CORAL),
                    new Stop(signalPosition.get(), Color.BLACK),
                    new Stop(1, Color.BLACK)), 
            signalPosition));

        Timeline animation = new Timeline(
                new KeyFrame(Duration.ZERO,       new KeyValue(signalPosition, 0)),
                new KeyFrame(Duration.seconds(5), new KeyValue(signalPosition, 1))
        );

        root.setOnMouseClicked(e -> animation.playFromStart());

        Scene scene = new Scene(root, 600, 600);
        primaryStage.setScene(scene);
        primaryStage.show();
        animation.play();
    }

    public static void main(String[] args) {
        Application.launch(args);
    }
}

如何在 JavaFX 中为一条线设置动画，就像信号通过一样

How to animate coloring a line like a signal passing through in JavaFX

java

animation

javafx

line

stroke