Как анимировать окраску линии, как сигнал, проходящий через JavaFX

В 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();

Моя логика была такова: сначала пройдите через полилинию и по мере движения применяйте переход обводки к той части, которую вы прошли до сих пор.


java animation javafx stroke line
person Cat-Lord    schedule 10.05.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете создать 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);
    }
}
person James_D    schedule 10.05.2020