在关键帧JavaFx之间绑定和解除绑定

Question

我正在创建一个应用程序，作为其中的一部分，我正在这样做。我有三个节点说40,45,50

我必须动画才能到达

要做到这一点，我有一个中间位置

我已将此作为两个动画的一部分实现。为了保持连接节点的线条完好无损，我正在使用DoubleProperty.bind()。但我想把它作为一部动画的一部分。在这里，我必须能够在动画中间使用DoubleProperty.bind()。有没有人有任何想法要做到这一点？

这是我为实现它而编写的代码。

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package Visual;

import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.stage.Stage;
import javafx.util.Duration;

/**
 *
 * @author apple
 */
public class BindIt extends Application {

    @Override
    public void start(Stage primaryStage) {
        Line line1 = new Line(200, 50, 100, 100);
        Line line2 = new Line(100, 100, 200, 200);

        Circle c1 = new Circle(25);
        c1.setCenterX(200);
        c1.setCenterY(50);
        line1.startXProperty().bind(c1.centerXProperty());
        line1.startYProperty().bind(c1.centerYProperty());

        Circle c2 = new Circle(25);
        c2.setCenterX(100);
        c2.setCenterY(100);
    //    line1.endXProperty().bind(c2.centerXProperty());
     //   line1.endYProperty().bind(c2.centerYProperty());

        line2.startXProperty().bind(c2.centerXProperty());
        line2.startYProperty().bind(c2.centerYProperty());

        Circle c3 = new Circle(25);
        c3.setCenterX(200);
        c3.setCenterY(200);
        line2.endXProperty().bind(c3.centerXProperty());
        line2.endYProperty().bind(c3.centerYProperty());

        Group root = new Group();
        root.getChildren().add(line1);
        root.getChildren().add(line2);

        root.getChildren().add(c1);
        root.getChildren().add(c2);
        root.getChildren().add(c3);

        Scene scene = new Scene(root, 500, 500);

        primaryStage.setTitle("Bind the line!");
        primaryStage.setScene(scene);
        final Timeline timeline1 = new Timeline();
        timeline1.getKeyFrames().addAll(new KeyFrame(Duration.millis(0)), 
            new KeyFrame(Duration.millis(3000), 
                new KeyValue(c2.centerYProperty(), 200), 
                new KeyValue(c2.centerXProperty(), 50), 
                new KeyValue(c3.centerYProperty(), 100), 
                new KeyValue(c3.centerXProperty(), 100)));

        timeline1.play();
        final Timeline timeline2 = new Timeline();
        timeline2.getKeyFrames().addAll(new KeyFrame(Duration.millis(0)), 
            new KeyFrame(Duration.millis(3000), 
                new KeyValue(c3.centerXProperty(), 200), 
                new KeyValue(c3.centerYProperty(), 50), 
                new KeyValue(c1.centerXProperty(), 250), 
                new KeyValue(c1.centerYProperty(), 100), 
                new KeyValue(c2.centerXProperty(), 100), 
                new KeyValue(c2.centerYProperty(), 100)));

        timeline1.setOnFinished(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent event) {
                line1.endXProperty().bind(c3.centerXProperty());
                line1.endYProperty().bind(c3.centerYProperty());
                timeline2.play();

            }
        });

        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

在这里，我不想使用两个时间轴，只有一个时间轴。

Answer 1

您可以使用KeyFrame constructor that takes an event handler在该关键帧执行操作（在这种情况下，建立其他绑定）：

    final Timeline timeline = new Timeline();
    timeline.getKeyFrames().addAll(
        new KeyFrame(Duration.millis(0)),
        new KeyFrame(Duration.millis(3000),
            event -> {
                line1.endXProperty().bind(c3.centerXProperty());
                line1.endYProperty().bind(c3.centerYProperty());
            },
            new KeyValue(c2.centerYProperty(), 200), 
            new KeyValue(c2.centerXProperty(), 50), 
            new KeyValue(c3.centerYProperty(), 100), 
            new KeyValue(c3.centerXProperty(), 100)),
        new KeyFrame(Duration.millis(6000),
            new KeyValue(c3.centerXProperty(), 200), 
            new KeyValue(c3.centerYProperty(), 50), 
            new KeyValue(c1.centerXProperty(), 250), 
            new KeyValue(c1.centerYProperty(), 100), 
            new KeyValue(c2.centerXProperty(), 100), 
            new KeyValue(c2.centerYProperty(), 100)));