iOS

[iOS] present를 push처럼, dismiss를 pop 처럼

나른한코딩 2022. 7. 11. 17:26

화면전환 시 애니메이션 방향은 다음과 같아요!

  • present : 아래 -> 위
  • dismiss : 위 -> 아래
  • push : 우 -> 좌
  • pop : 좌 -> 우

 

 

 

 

present 형식으로 화면을 보여주지만 push 와 같은 방향으로 애니메이션을 보여주고 싶을 때가 있습니다.

그럴 때 CATransition() 을 통해 커스텀 해줄 수 있습니다.

 

적용한 CATransition의 속성은 다음과 같습니다.

  • duration : 애니메이션 속도
  • type : 띄워줄 방식 (push, reveal, fade, moveIn)
  • subType : 띄우줄 방향

 

 

 

 

현재 나의 뷰의 윈도우에 지정한 속성을 가진 transition 객체를 추가한 후 present/dismiss 해주면 마치 push/pop 해준 것 같은 애니메이션과 함께 화면이 전환됩니다.

 

 

extension UIViewController {
    /// 애니메이션을 push 처럼 present 해주고 싶을 때 (NavigationController가 있는  새로운 뷰컨트롤러를 띄워주고 싶을 때)
    func presentLikePush(_ viewController: UIViewController, animated: Bool, pushing: Bool, comletion: (() -> Void)? = nil) {
        print(#function)
        if pushing {
            let transition = CATransition()
            transition.duration = 0.3
            transition.type = CATransitionType.push
            transition.subtype = CATransitionSubtype.fromRight
            transition.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
            view.window?.layer.add(transition, forKey: kCATransition)
            viewController.modalPresentationStyle = .fullScreen
            self.present(viewController, animated: false)
        } else {
            self.present(viewController, animated: animated)
        }
    }
    
    /// 애니메이션을 pop 처럼 dismiss 해주고 싶을 때
    func dismissLikePop(animated: Bool, completion: (() -> Void)? = nil) {
        print(#function)
        if animated {
            let transition = CATransition()
            transition.duration = 0.3
            transition.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
            transition.type = CATransitionType.push
            transition.subtype = CATransitionSubtype.fromLeft
            self.view.window!.layer.add(transition, forKey: nil)
            self.dismiss(animated: false, completion: completion)
        } else {
            self.dismiss(animated: animated, completion: completion)
        }
    }
}

 

 

 

+ 아마 위와 같은 코드를 사용하면 애니메이션이 조금 부자연스러워 보일 수도 있습니다.

그럴 때는 아래의 링크를 따라한다면 좀 더 push/pop 스럽게 구현할 수 있습니다. (단, 좀 더 번거롭다...)

 

https://github.com/keenkim1202/KEENs_TIL/blob/main/iOS/present_dismiss_transition_smooth.md

 

GitHub - keenkim1202/KEENs_TIL: KEEN의 Holy한 iOS 필수 개념 및 트러블슈팅 기록

KEEN의 Holy한 iOS 필수 개념 및 트러블슈팅 기록. Contribute to keenkim1202/KEENs_TIL development by creating an account on GitHub.

github.com

 

 

 

 

 

 

반응형