[CoreAnimation] Ch18. UINavigationController Custom Transition Animations

18장 UINavigationController Custom Transition Animations 

Intro 

UINavigationController에서는 화면을 stack으로 관리한다. 

push, pop을 하면서 일어나는 화면 전환을 커스텀하게 꾸밀 수 있다.

Custom navigation transitions 

UINavigationControllerDelegate에서 animator를 리턴해주는 작업이 필요하다. 

UINavigationController에서 push/pop이 일어날 때, UINavigationController은 delegate에 물어본다. 

  1. “delegate가 있나요?” 

  2. “있다면, animator를 리턴하고 있나요?” 

delegate가 nil이거나, animator가 nil일 경우 기본 트랜지션이 적용되어 push/pop을 하게 된다. 

이 때, animator는 이전 챕터에서 다룬 present애니메이션과 같이 UIViewControllerAnimatedTransitioning 를 구현하는 객체다. 

navigationController는 먼저 transitionDuration()을 호출하여 트랜지션의 시간을 알아낸 뒤, aniamteTransition()을 호출하여 애니메이션을 수행한다. 

** transitionDuration()은 UIKit내부에서 네비게이션바의 트랜지션, 탭바의 트랜지션 등에 사용한다. 즉, 커스텀 트랜지션의 duration과 일치해야 화면 전환이 자연스러워진다.

The navigation controller delegate 

class RevealAnimator: NSObject, UIViewControllerAnimatedTransitioning { }

위와 같이 UIViewControllerAnimatedTransitioning를 구현하는 객체를 animator로 사용할 수 있다. 

UINavigationControllerDelegate의 아래 메소드를 구현하여 animator를 리턴해주면 커스텀 트랜지션을 사용할 수 있다. 

func navigationController(_ navigationController: UINavigationController, 

   animationControllerFor operation: UINavigationControllerOperation, 

   from fromVC: UIViewController, 

   to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning?

여기서 operation을 통해 push, pop 중 어떤 트랜지션인지 알 수 있다. 

Adding a custom reveal animation 

RW로고로 디테일화면을 mask하는 트랜지션을 구현해보자. 

layer애니메이션이 끝난 뒤에 completeTransition()을 호출해주기 위해서 CALayerAnimationDelegate를 구현해준다. (이전엔 UIView.animate를 사용했기 때문에 complete블락에서 호출할 수 있었지만 layer애니메이션이라..) 

finalFrame: 이 viewController가 최종적으로 가지게 될 frame 예제의 경우 origin이 (0,64)으로 설정됨 

Taking care of the rough edges 

animationDidStop()에서 completeTransition()을 호출하여 애니메이션을 마무리 지을 수 있다. 

completeTransition()뿐만 아닌 나머지 애니메이션 후처리를 해준다. Ex) layer.removeAllAnimations() 

Challenges1. Fade in the new view controller 

mask애니메이션에 fade애니메이션을 추가해주자. toView.layer의 opacity를 0->1로 조정하여 구현 

Challenges2. Add pop transition 

fromVC.view의 scale조정을 통해서 pop애니메이션 구현. 

scale을 0.01로 조정하지 않고 0.0으로 조정하면 어떻게 될까? -> 애니메이션 없이 바로 0으로 변경됨(뷰가 사라짐)