如何在JavaFX中为一条线着色，就像一个信号一样

Question

在JavaFX中，我试图实现一条线(更确切地说是多段线(的平滑动画，它看起来像是一个信号正在通过该线。线路为用某种颜色(比如黑色(着色，并连续地用新颜色(比如红色(重新着色。所以在开始的时候，这条线是黑色的，在结束的时候，那条线是红色的

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

动画的开始

动画期间

动画结束

请注意，方向很重要。

我尝试将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的值。

然后将该行的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);
}
}