JavaFX时间线播放滑块在异步时间点触发事件

Question

我试图实现一个自定义滑块，上面有一个矩形条，线条表示特定时间点的事件，如下图所示。它基本上是滑块上方的时间线，该事件被描述为垂直线。

该图显示了滑块的开始(t=0)和结束(t=x)之间的14条垂直线。每一行对应一个带有一些上下文信息的任意事件。

滑块将实时播放，即拇指将以实时速度沿着其轨道移动。当滑块超过事件的指定时间时，它将在文本区域中打印事件的上下文信息。使用该关系图，当前正在显示14秒的事件信息。

谢谢你。

Answer 1

您可以使用动画API中的时间线来完成此操作。

简言之：

public class TimelineEvent {
    private final Duration time ;
    private final String info ;
    public TimelineEvent(Duration time, String info) {
        this.time = time ;
        this.info = info ;
    }
    public Duration getTime() {
        return time ;
    }
    public String getInfo() {
        return info ;
    }
}

int maxSeconds = ... ;
TimelineEvent[] events = ... ; // populate array of events...
Slider slider = new Slider(0, maxSeconds, 0);
TextArea textArea = new TextArea();

// ...

Timeline timeline = new Timeline();
for (TimelineEvent event : events) {
    timeline.getKeyFrames().add(new KeyFrame(event.getTime(), 
        e -> textArea.setText(event.getInfo());
}

// make slider value change with timeline:
timeline.getKeyFrames().add(new KeyFrame(Duration.ZERO, 
    new KeyValue(slider.valueProperty(), 0)));
timeline.getKeyFrames().add(new KeyFrame(Duration.seconds(maxSeconds), 
    new KeyValue(slider.valueProperty(), maxSeconds)));

timeline.play();

如果用户“用手”移动滑块（以及对其进行动画），另一种可能更方便的选择是使用动画来移动滑块，然后在滑块的值上使用监听器或绑定：

int maxSeconds = ... ;
Slider slider = new Slider(0, maxSeconds, 0);
TextArea textArea = new TextArea();

Timeline timeline = new Timeline(
    new KeyFrame(Duration.ZERO, new KeyValue(slider.valueProperty(),0)),
    new KeyFrame(Duration.seconds(maxSeconds), new KeyValue(slider.valueProperty(),maxSeconds)));

textArea.textProperty().bind(Bindings.createStringBinding(
    () -> findInfoForTimepoint(slider.getValue()),
    slider.valueProperty()));

private String findInfoForTimepoint(double seconds) {
    // figure and return correct "info" for given time in seconds...
}