SequentialTransition .stop() doesn't wait until the transition end its cycle

Question

I made a Sequential Transition in javafx to fade in/out between two cycles.

My problem is when i call .stop() for the sequential transition, it stop the transition, but it don't wait the transition until it finish it's transition cycle, so it stop the transition sometimes during the half of fading process! How i make it stop the sequential transition after fading cycle finished? so to able me when i recall .play() or .playfromStart() then it play again correctly?

Example of my code:

import javafx.animation.*;
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Transitions extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage) throws Exception {
        Rectangle circle1 = RectangleBuilder.create()
                .arcHeight(300)
                .arcWidth(300)
                .height(30)
                .width(40)
                .opacity(0.6)
                .translateY(30)
                .style("-fx-fill: linear-gradient(#82d24f,#398907); -fx-stroke: #4a4a4a; -fx-stroke-width: 2")
                .build();

        Rectangle circle2 = RectangleBuilder.create()
                .arcHeight(300)
                .arcWidth(300)
                .height(40)
                .width(50)
                .opacity(0.7)
                .translateX(10)
                .translateY(70)
                .style("-fx-fill: linear-gradient(#82d24f,#398907); -fx-stroke: #4a4a4a; -fx-stroke-width: 2.5")
                .build();

        FadeTransition fade1 = FadeTransitionBuilder.create()
                .duration(Duration.millis(200))
                .node(circle1)
                .toValue(0.3)
                .cycleCount(2)
                .autoReverse(true)
                .build();

        FadeTransition fade2 = FadeTransitionBuilder.create()
                .duration(Duration.millis(100))
                .node(circle2)
                .toValue(0.3)
                .cycleCount(2)
                .autoReverse(true)
                .build();

        SequentialTransition ChildBalloonFade = SequentialTransitionBuilder.create()
                .children(fade1,fade2)
                .cycleCount(Timeline.INDEFINITE)
                .build();

        stage.setScene(new Scene(new Group(circle1, circle2)));
        stage.show();
        ChildBalloonFade .play();
    }
}

Answer 1

Here is something tricky to solve your problem, you have to take some flag to check if it is required to finish the transaction or to continue it. Here in my code I have used ToggleButton for that,

public class Transitions extends Application {
public static void main(String[] args) {
    launch(args);
}

@Override
public void start(Stage stage) throws Exception {
    Rectangle circle1 = RectangleBuilder.create()
            .arcHeight(300)
            .arcWidth(300)
            .height(30)
            .width(40)
            .opacity(0.6)
            .translateY(30)
            .style("-fx-fill: linear-gradient(#82d24f,#398907); -fx-stroke: #4a4a4a; -fx-stroke-width: 2")
            .build();

    Rectangle circle2 = RectangleBuilder.create()
            .arcHeight(300)
            .arcWidth(300)
            .height(40)
            .width(50)
            .opacity(0.7)
            .translateX(10)
            .translateY(70)
            .style("-fx-fill: linear-gradient(#82d24f,#398907); -fx-stroke: #4a4a4a; -fx-stroke-width: 2.5")
            .build();

    FadeTransition fade1 = FadeTransitionBuilder.create()
            .duration(Duration.millis(200))
            .node(circle1)
            .toValue(0.3)
            .cycleCount(2)
            .autoReverse(true)
            .build();

    FadeTransition fade2 = FadeTransitionBuilder.create()
            .duration(Duration.millis(100))
            .node(circle2)
            .toValue(0.3)
            .cycleCount(2)
            .autoReverse(true)
            .build();

    SequentialTransition ChildBalloonFade = SequentialTransitionBuilder.create()
            .children(fade1,fade2)
            .cycleCount(Timeline.INDEFINITE)
            .build();

    final ToggleButton button = new ToggleButton("Stop");

    fade2.setOnFinished(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent event) {
            if (button.isSelected()) {
                ChildBalloonFade.stop();
            }
        }
    });

    button.setOnAction(new EventHandler<ActionEvent>() {

        @Override
        public void handle(ActionEvent event) {
            if (!button.isSelected()) {
                ChildBalloonFade.play();
            }
        }
    });

    VBox vBox = new VBox();
    vBox.getChildren().addAll(circle1, circle2, button);
    stage.setScene(new Scene(vBox));
    stage.show();
    ChildBalloonFade.play();
}}