So I have a couple of `Rectangle` objects of different sizes, named `r1` and `r2`, that initially appear in the dead center of the screen. They have different colors (say one is red and the other blue) and the smaller one is placed on top of the larger one, so even when they are stacked in the center, the two are still distinguishable. I wanted them to move around and return to their original positions, and thus used `TranslateTransition` as follows:

```
tt1 = new TranslateTransition(Duration.millis(20000), button1);
tt1.setByX(100);   // moves 100 pixels to the right
tt1.setByY(-100);   // moves 100 pixels down
tt1.setCycleCount(20);   // oscillates 20 times
tt1.setAutoReverse(true);

tt2 = new TranslateTransition(Duration.millis(20000), button2);
tt2.setByX(-100);   // moves 100 pixels to the left
tt2.setByY(100);   // moves 100 pixels up
tt2.setCycleCount(20);   // oscillates 20 times
tt2.setAutoReverse(true);

```

During their movement, however, if any of `r1` and `r2` is pressed by a `MouseEvent`, I would like them to disappear for a few seconds (say 5 seconds) and come back alive again. Using the fact the background color is completely black, I used `FillTransition` to achieve that effect:

```
FillTransition ft1 = new FillTransition(Duration.millis(5000), r1, Color.BLACK, Color.BLACK);
FillTransition ft2 = new FillTransition(Duration.millis(5000), r2, Color.BLACK, Color.BLACK);

```

By converting the `Rectangle`s from `Color.BLACK` to `Color.BLACK` for 5 seconds, it gives an effect that the buttons have disappeared for 5 seconds. Also, I have the following `setOnMouseClicked` on `r1` and `r2` so they can disappear when a user input is made:

```
r1.setOnMouseClicked((MouseEvent t) -> {
    ft1.play();
});
r2.setOnMouseClicked((MouseEvent t) -> {
    ft2.play();
});

```

After the two objects have disappeared for 5 seconds, they must reappear in the center, as they did in the beginning, and repeat the same oscillating motion using `tt1` and `tt2`, which I achieved with `setOnFinished` on `ft1` and `ft2`:

```
ft1.setOnFinished((ActionEvent event) -> {
    r1.setFill(color1);   // restore the original color
    tt1.play();
});
ft2.setOnFinished((ActionEvent event) -> {
    r2.setFill(color2);   // restore the original color
    tt2.play();
});

```

The problem is, however, when `r1` and `r2` reappear, they are positioned not at the center, but rather at the location from which they last disappeared - in other words, the location of their rebirth is where they were at during the last `TranslateTransition` when a user's `MouseEvent` is detected. I have tried to modify this by using `r1.setX(centerX)` and `r1.setY(centerY)`, where `centerX` and `centerY` are the original center coordinates used in the beginning, but it could not fix the problem. In fact, when I used `r1.getX()`, the returned value equaled the original `centerX` value even when it was conspicuous that `r1` was not placed in the center. This gave me a suspicion that `TranslateTransition` performs its duty without altering the actual `getX()` values. I have also thought of using `ParallelTransition` somehow on `TranslateTransition` and `FillTransition`, so `tt1` could finish while `ft1` takes effect, but since then `ft1` would start running when `tt1` has already been running for some time, it would not provide a feasible solution.

So my question is, if an object's `TranslateTransition` is interrupted in the middle, how do I restore the object's "original" coordinate, not where the object was last left off when `TranslateTransition` was interrupted?

p.s. I want to avoid creating new `Rectangle` objects every time a `MouseEvent` is detected, because that means all `TranslateTransition` and `FillTransition` linked to `r1` and `r2` must be recreated as well.