[Swift] ViewController 전환 효과 애니메이션 - UIModalTransitionStyle, UIModalPresentationStyle

안녕하세요😄😄

어느정도(?) 앱을 개발하다보면 이제 화면이 밋밋하다는 걸 가끔 느끼시지 않나욥??!

 

앱스토어에 있는 앱들을 보면 막 화려하고 현란한 애니메이션으로 신기한 효과를 주는 앱들이 요즘 많더라구요!!

그래서 애니메이션에 관심을 갖게되어서 글을 한번 작성해보려고해요!!

 

var transSet: [UIModalTransitionStyle] = [.coverVertical, .crossDissolve, .flipHorizontal, .partialCurl]
    
var presentSet: [UIModalPresentationStyle] = [.currentContext, .fullScreen, .overCurrentContext, .overFullScreen, .formSheet, .pageSheet, .popover]

 

 

뷰가 전환될 때 적용되는 애니메이션에는

UIModalTransitionStyle, UIModalPresentationStyle 이 있어요

 

 

이러한 뷰를 만들어주고 다음화면은 뒤로가기 버튼만 존재하는 회색바탕의 뷰가 존재해요

 

이제부터 속성을 비교해 볼게요

 

차이를 좀더 분명하게 하기위해서 뷰에 알파값을 줘서 비교했어요

 

 

@IBAction func nextVCButtonClick(_ sender: Any) {
    guard let nextVC = self.storyboard?.instantiateViewController(identifier: "nextVC") else {return}
        
    nextVC.modalPresentationStyle = presentSet[present]
    nextVC.modalTransitionStyle = transSet[trans]
        
    nextVC.view.alpha = 0.5
        
    self.present(nextVC, animated: true)
}

 

 

 

PresentationStyle

뷰를 띄울때 어떻게 띄울지 속성

뷰의 형태

 

 

 

 

 

 

 

currentContext

fullScreen

 

뷰가 투명해지지 않았어요!!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

overCurrentContext

overFullScreen

 

뷰가 투명해 졌어요!!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

formSheet

pageSheet

popover

 

꽉차지 않은 뷰가 투명해졌네요!!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

.

.

.

.

차이가 느껴지시나요..?!

 

FullScreen은 말그대로 화면 전체를 채워주고

CurrentContext는 현재 뷰의 크기에따라 대응되서 띄워주는 거라고 하네요

 

 

PageSheet, FormSheet의 차이는 아래와 같아요!!

 

 

overFullScreen은 아래에 기존의 뷰가 보이면서 위에 새로운 화면이 뜬효과 잖아요?!?

생각해보면 이효과를 이용해서

뷰를 내리면 그 뷰가 꺼지면서 그 전 화면이 보이도록 할 수 있는 효과를 줄 수 있어요!!!

 

	// UIApplication.shared.statusBarOrientation.isPortrait 
        // iOS13이후 아래와 같이 접근
        // 세로모드일때만 적용되도록함
	if let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene {
            if windowScene.interfaceOrientation.isPortrait {
                let trans = gesture.translation(in: self.view)
                if trans.y > 0 {
                    self.view.transform = CGAffineTransform(translationX: 0, y: trans.y)
                }
                
                if gesture.state == .ended {
                    //   1/3지점까지는 원위치로
                    if self.view.frame.midY < self.view.frame.height * 2/3 {
                        self.view.transform = .identity
                    }else{
                        self.dismiss(animated: true)
                    }
                }
            }
        }

 

 

 

 

TransitionStyle

화면 전환시 뷰의 움직임 스타일

coverVertical

아래에서 위로올라오는 기본적인 애니메이션

 

 

crossDissolve

뷰가 점점 투명해지면서 자연스럽게 넘어가는 애니메이션

 

 

flipHorizontal

수직축을 기준으로 돌아가는 애니메이션

partialCurl

페이지를 넘기는 것처럼 넘어가는 애니메이션