Javafx : swap rectangle shapes along with sawping array elements

Question

I\'m working on sorting algorithm simulation using JavaFx. At the time of sorting array elements I wanted to show the swap of Rectangles. But there is a problem

Answer 1

In your code the sorting code runs on the application thread. This means all the swap animations will be created before any animation has finished or even started running. This means every animation runs at the same time.

The solution to your problem would be saving the data about the swaps and later retrieve that data to do the animation.

Note: the following example only uses the translation properties for positioning for simplicity:

private static class AnimationElements {

    private final PathTransition transition;
    private final MoveTo start;
    private final LineTo horizontalMove;

    public AnimationElements(double height) {
        this.start = new MoveTo();
        this.horizontalMove = new LineTo();
        horizontalMove.setAbsolute(false);

        LineTo l1 = new LineTo(0, height);
        l1.setAbsolute(false);
        LineTo l2 = new LineTo(0, -height);
        l2.setAbsolute(false);

        this.transition = new PathTransition(Duration.seconds(4), new Path(start, l1, horizontalMove, l2));
    }

    public void init(Node movedNode, Node moveEnd) {
        // init animation according to positions of the Nodes to move
        double sx = movedNode.getTranslateX();
        double dx = moveEnd.getTranslateX() - sx;
        start.setX(sx + movedNode.getLayoutBounds().getWidth() / 2);
        start.setY(movedNode.getTranslateY() + movedNode.getLayoutBounds().getHeight() / 2);
        horizontalMove.setX(dx/*+movedNode.getLayoutBounds().getWidth()/2*/);
        transition.setNode(movedNode);
    }

    public PathTransition getTransition() {
        return transition;
    }

}

private static class Swap {

    private final int index1;
    private final int index2;

    public Swap(int index1, int index2) {
        this.index1 = index1;
        this.index2 = index2;
    }

    public void init(AnimationElements animation1, AnimationElements animation2, Node[] sortNodes) {
        // initialize both positions
        Node n1 = sortNodes[index1];
        Node n2 = sortNodes[index2];
        animation1.init(n1, n2);
        animation2.init(n2, n1);

        // swap order to be correct for the next swap
        sortNodes[index2] = n1;
        sortNodes[index1] = n2;
    }
}

@Override
public void start(Stage primaryStage) {
    // create list of swaps to execute; could be generated by sorting algorithm
    List swaps = Arrays.asList(new Swap(0, 1), new Swap(1, 2), new Swap(3, 4), new Swap(0, 4));

    AnimationElements animationElements1 = new AnimationElements(100);
    AnimationElements animationElements2 = new AnimationElements(-100);

    // both swap animations happen simultaniously
    ParallelTransition animation = new ParallelTransition(animationElements1.getTransition(), animationElements2.getTransition());

    Color[] colors = new Color[]{
        Color.RED,
        Color.BLUE,
        Color.LIME,
        Color.YELLOW,
        Color.ORANGE
    };
    Node[] nodes = new Node[5];
    for (int i = 0; i < nodes.length; i++) {
        Rectangle rect = new Rectangle(100, 20, colors[i]);
        rect.setTranslateY(200);
        rect.setTranslateX(i * 100);
        nodes[i] = rect;
    }

    Iterator iterator = swaps.iterator();
    animation.setOnFinished(evt -> {
        if (iterator.hasNext()) {
            // continue with next swap
            iterator.next().init(animationElements1, animationElements2, nodes);
            animation.play();
        }
    });
    if (iterator.hasNext()) {
        // execute first swap
        iterator.next().init(animationElements1, animationElements2, nodes);
        animation.play();
    }

    Pane root = new Pane(nodes);

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

    primaryStage.setScene(scene);
    primaryStage.show();
}