时间线不会渲染opacityProperty。瞬间消失而不是淡出。

Question

我已经偶然发现了一个非常奇怪的行为（在下面的代码中展示 - 只需复制粘贴，并且您准备好亲眼目睹它！）。 当按下播放按钮时，主菜单应该消失，应该出现选项菜单。按下“返回”按钮，主菜单再次出现！ 现在的问题：再次按下播放按钮..菜单并不像预期的那样消失，但它会立即消失，然后选项菜单按预期方式出现。 换句话说，第二次动画被触发时，它不会呈现正确！

为了演示的目的，我添加了一个“选项”按钮，其功能与播放按钮完全相同，但动画略有不同（而不是淡化缩小的主菜单）。此动画始终正常工作。

是否有任何javaFX 2专家能够解释这种异端行为？这是一个错误..或者我错过了什么？

预先感谢您！下面是代码..

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(); 
    } 


    } 

而在上面的代码中的主窗口类

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(); 
    } 

} 

Answer 1

我是不透明度设置为100（而不是1）。所以动画在1秒内将不透明度从100降低到0。该按钮从100到1的值是完全可见的，并且在该按钮的第1/10秒，该按钮被淡出。由于1/10秒太快，动画看起来像按钮在一秒钟后突然消失。