CODEWITHSUNDEEP
javafx-2
C.LS
C.LS

Reputation: 1357

Timelines do not render correct the opacityProperty. Instant dissapear instead of fade out.

I have stumbled on to a very strange behavior (demonstrated in code below -just copy paste and and you are ready to witness it with your own eyes!). When pressing play button .. the main menu should fade away and the options menu should appear. Pressing the "back" button the main menu appears again! now the problem : Pressing again the play button.. the menu does not fade away as expected, but it instantly disappears, then the option menu appears as expected.. In other words the second time the animation is triggered it is not rendered correctly!!

For demonstrations purposes i have added an "options" button which does exactly the same thing as the play button but with a slightly different animation (instead of fade out the main menu it shrinks it). This animation always works correctly.

Is there any javaFX 2 expert able to explain this heretical behavior? is this a bug.. or something that i have missed?

Thank you in advance! Here is the code..

package strangeFx;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application{  

    @Override
    public void start(Stage stage) throws Exception {
        Scene scene = new Scene(new StartScreen());
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }


  }

And the main window class 

package strangeFx;

import javafx.animation.*;
import javafx.event.*;
import javafx.scene.Group;
import javafx.scene.control.Button;
import javafx.scene.layout.*;
import javafx.util.Duration;
import cls.island.utils.TimeLineExt;

public class StartScreen extends Group {

  private static final double ANIM_DURATION = 200D;

    VBox mainBtns =  new VBox();
VBox optionBtns =  new VBox();

     /**
 * Initializes two group of buttons. the "main" group and "options" group.
 * Initially only the menu group  is displayed. By pressing the "options" button
 * the menu group will be removed and replaced by the options with a small animation! 
 * When the "play" button is pressed the menu group will be removed and replaced by
 * the options button, using a different animation
 *
 */
public StartScreen() {
    mainBtns.setFillWidth(true);
    createOptionButtonGroup();
    createStartButton(mainBtns);
    createoptionsButton(mainBtns);
    createQuitButton(mainBtns);
    getChildren().add(mainBtns);
}

private void createOptionButtonGroup() {
    Button button = new Button("Back");
    button.setOnAction(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent event) {
            goToMain();
        }
    });
    button.setMaxWidth(Double.MAX_VALUE);
    optionBtns.getChildren().add(button);
}

private void createStartButton(Pane buttonGroup) {
    Button button = new Button("Play");
    button.setOnAction(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent event) {
            fadeAndGoToOptions();
        }
    });
    button.setMaxWidth(Double.MAX_VALUE);
    buttonGroup.getChildren().add(button);
}

private void createQuitButton(Pane buttonGroup) {
    Button button = new Button("Quit");
    button.setOnAction(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent event) {
            System.exit(0);
        }
    });
    button.setMaxWidth(Double.MAX_VALUE);
    buttonGroup.getChildren().add(button);
}

private void createoptionsButton(Pane buttonGroup) {
    Button button = new Button("Options");
    button.setOnAction(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent event) {
            goToOptions();
        }
    });
    button.setMaxWidth(Double.MAX_VALUE);
    buttonGroup.getChildren().add(button);
}

public void goToOptions() {
    Timeline timeline = new Timeline();
    timeline.getKeyFrames().add(new KeyFrame(new Duration(ANIM_DURATION), new KeyValue(mainBtns.scaleXProperty(), 0),
            new KeyValue(mainBtns.scaleYProperty(),0)));
    timeline.setOnFinished(new EventHandler<ActionEvent>() {

        @Override
        public void handle(ActionEvent event) {
            StartScreen.this.getChildren().remove(mainBtns);
            mainBtns.scaleXProperty().set(1);
            mainBtns.scaleYProperty().set(1);
            Timeline timeline = new Timeline();
            optionBtns.scaleXProperty().set(0);
            optionBtns.scaleYProperty().set(0);
            StartScreen.this.getChildren().add(optionBtns);
            timeline.getKeyFrames().add(new KeyFrame(new Duration(ANIM_DURATION), new KeyValue(optionBtns.scaleXProperty(), 1),
                    new KeyValue(optionBtns.scaleYProperty(),1)));
            timeline.play();

        }
    });
    timeline.play();

}

public void goToMain() {
    TimeLineExt timeline = new TimeLineExt();
    timeline.getKeyFrames().add(new KeyFrame(new Duration(ANIM_DURATION), new KeyValue(optionBtns.scaleXProperty(), 0),
            new KeyValue(optionBtns.scaleYProperty(),0)));
    timeline.setOnFinished(new EventHandler<ActionEvent>() {

        @Override
        public void handle(ActionEvent event) {
            StartScreen.this.getChildren().remove(optionBtns);
            optionBtns.scaleXProperty().set(1);
            optionBtns.scaleYProperty().set(1);
            Timeline timeline = new Timeline();
            mainBtns.scaleXProperty().set(0);
            mainBtns.scaleYProperty().set(0);
            StartScreen.this.getChildren().add(mainBtns);
            timeline.getKeyFrames().add(new KeyFrame(new Duration(ANIM_DURATION), new KeyValue(mainBtns.scaleXProperty(), 1),
                    new KeyValue(mainBtns.scaleYProperty(),1)));
            timeline.play();
        }
    });
    timeline.play();
}

/**
 * This is where the problematic behavior occurs, but only when this animation is triggered 
 * for second time! The first time this animation runs and animates properly!
 * The correct animation is to 1. 
 */
public void fadeAndGoToOptions() {
    Timeline timeline = new Timeline();
    timeline.getKeyFrames().add(new KeyFrame(new Duration(1000), new KeyValue(this.opacityProperty(),0)));
    timeline.setOnFinished(new EventHandler<ActionEvent>() {

        @Override
        public void handle(ActionEvent event) {
            getChildren().remove(mainBtns);
            StartScreen.this.opacityProperty().set(100);
            Timeline timeline = new Timeline();
            optionBtns.scaleXProperty().set(0);
            optionBtns.scaleYProperty().set(0);
            StartScreen.this.getChildren().add(optionBtns);
            timeline.getKeyFrames().add(new KeyFrame(new Duration(ANIM_DURATION), new KeyValue(optionBtns.scaleXProperty(), 1),
                    new KeyValue(optionBtns.scaleYProperty(),1)));
            timeline.play();
            }
        });
        timeline.play();
    }

}

Upvotes: 0

Views: 177

Answers (1)

C.LS
C.LS

Reputation: 1357

in the above code i was setting the opacity to 100 (instead of 1). So the animation was decreasing the opacity from 100 to 0 in 1 second. The button was full visible from values from 100 to 1 and in the rest 1/10 of the second the button was fading out. AS the 1/10 sec is too quick the animation seemed like the button was suddenly disappearing after one second.

Upvotes: 1

Related Questions