[Java] 화면 전환, 애니메이션 (Hangman5)

 

START 페이지를 만들고 애니메이션을 넣은 화면 전환을 구현하였다.

 

 

 

 

화면 전환은 StackPane 을 사용하였다.

씬빌더를 사용해서 시작 화면을 만들었고 시작화면과 연결되는 controller인

StartPageController에 화면 전환을 넣었다.

 

 

public class startPageController implements Initializable {

	@FXML private Button startBtn;
	@FXML private Text mainText;

	@Override
	public void initialize(URL location, ResourceBundle resources) {
	}

	@FXML
	public void gameStart(ActionEvent event) {
		
		startBtn.setDisable(true);
		startBtn.setVisible(false);
		mainText.setVisible(false);
		
		System.out.println("Start button clicked");

		try {
			Parent start = FXMLLoader.load(getClass().getResource("hangman.fxml"));
			StackPane root = (StackPane) startBtn.getScene().getRoot();
			root.getChildren().add(start);
			root.getStylesheets().add("application/application.css");
				
		} catch (Exception e) {
			// TODO
		}

	}
}

 

 

gameStart 버튼을 누르면 게임 화면 fxml 인 hangman.fxml 을 불러오고

현재 화면의 stackpane에 hangman.fxml 을 넣어준다.

 

 

 

public class startPageController implements Initializable {

	@FXML private Button startBtn;
	@FXML private Text mainText;

	@Override
	public void initialize(URL location, ResourceBundle resources) {
	}

	@FXML
	public void gameStart(ActionEvent event) {
		
		startBtn.setDisable(true);
		startBtn.setVisible(false);
		mainText.setVisible(false);
		
		System.out.println("Start button clicked");

		try {
			
			Parent start = FXMLLoader.load(getClass().getResource("hangman.fxml"));
			StackPane root = (StackPane) startBtn.getScene().getRoot();
			root.getChildren().add(start);
			root.getStylesheets().add("application/application.css");
			
			//animation
			start.setTranslateX(400);
			Timeline timeline = new Timeline();
			KeyValue keyvalue = new KeyValue(start.translateXProperty(),0);
			KeyFrame keyfame = new KeyFrame(Duration.millis(500),keyvalue);
			timeline.getKeyFrames().add(keyfame);
			timeline.play();
			
		} catch (Exception e) {
			// TODO
		}

	}
}

 

 

그리고 타임라인을 통해 화면이 옆으로 넘어가는 화면 전환 애니메이션을 넣었다.

 

 

시연 영상: