java - 如何对一条线进行动画着色，就像 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 来表示“信号”的位置，其值为 0 到 1 之间的值。

然后将线条的描边绑定(bind)到该属性，生成一个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);
    }
}