View Controller Transitioning 에 대하여 - 3

View Controller Transitioning 에 대하여 - 1 

View Controller Transitioning 에 대하여 - 2 

View Controller Transitioning 에 대하여 - 3 (현재페이지)

저번 시간에 버튼으로 애니메이션이 열고 닫히도록 구현을 완성했다 

이번엔 마지막으로 열어진 B View의 상단바를 가지고 드래그와 닫기를 구현해보도록하자

뷰전체를 터치영역으로 잡아도 된다 그럴경우 b뷰에 만약 UIScrollView나 UITableView를 구현할경우 B뷰에서 별도 코딩이 필요하다

그래서 이번엔그냥 Top부분만 드래그 영역으로 잡아서 실행해 보도록하겠다 

먼저 B View의 탑부분(UINavigationBar) 를 IBOutlet 으로 잡아 주자

그리고 애니메이션 파일에 새로이 코드를 작성한다

var transitionContext: UIViewControllerContextTransitioning! var toView: UIView! var viewHeight: CGFloat = 0.0  

위의 코드는 재스처사용에 필요한 변수들을 전역으로 선언 한 것이다.

그리고 2편에서 사용한 코드에 몇가지를 수정해주자

func animateTransition(using transitionContext: UIViewControllerContextTransitioning) 에서

self.transitionContext = transitionContext

self.viewHeight = fromViewController.view.frame.height

를 추가해주자

그리고 새로운 함수도 추가해보자

func addGestureRecognizersToView(_ selfView: UIView, naviView: UIView) { self.toView = selfView let panGesture: UIPanGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(ModalTransition.pan(recognizer:))) naviView.addGestureRecognizer(panGesture) }

위의 함수는 채스처기능을 추가할 뷰를 지정하기 위한 함수이다

Sample앱에서는 B View가 이 함수를 호출 할 것이다.

이곳에서 재스처를 했을때 호출되는 함수를 완성해보자

func pan(recognizer: UIPanGestureRecognizer) { if recognizer.state == .began { recognizer.setTranslation(.zero, in: self.toView.superview) } if recognizer.translation(in: self.toView).y < 0.1 { return } let percentage = recognizer.translation(in: self.toView).y / self.toView.bounds.height let scaleFactor: CGFloat = self.NonModalViewMinScale + (1 - self.NonModalViewMinScale) * percentage let alphaVal: CGFloat = self.NonModalViewMinAlpha + (1 - self.NonModalViewMinAlpha) * percentage guard let fromViewController: UIViewController = self.transitionContext.viewController(forKey: .from) else { return } guard let toViewController: UIViewController = self.transitionContext.viewController(forKey: .to) else { return } fromViewController.view.transform = CGAffineTransform.identity.scaledBy(x: scaleFactor, y: scaleFactor) fromViewController.view.alpha = alphaVal var modalViewControllerFrame = toViewController.view.frame modalViewControllerFrame.origin.y = percentage * self.toView.frame.height + self.ModalViewYOffset toViewController.view.frame = modalViewControllerFrame if recognizer.state == .ended || recognizer.state == .cancelled { guard let recognizerView = recognizer.view else { return } let velocityY: CGFloat = recognizer.velocity(in: recognizerView.superview).y let cancelUp: Bool = (velocityY < 0) || (velocityY == 0 && recognizerView.frame.origin.y < self.toView.bounds.height / 2) let points: CGFloat = cancelUp ? recognizerView.frame.origin.y : self.toView.bounds.height - recognizerView.frame.origin.y var duration: TimeInterval = TimeInterval(points / velocityY) if duration < 0.2 { duration = 0.2 } else if duration > 0.4 { duration = 0.4 } if cancelUp == true { self.moveModalView(duration: duration) } else { toViewController.dismiss(animated: true, completion: nil) } } }

우선 B뷰의 위치에 따른 A뷰 그러니까 FromView의 상태와 B뷰 toView의 애니메이션을 퍼센테이지로 구현한다

그리고 손을 떼는 순간 현 상태를 체크하여 올릴것인가 닫을 것인가를 판단하여 올리면 올리는 애니메이션 닫아야 한다면 그냥 닫아버리는 동작을 하도록 구현을 했다

마지막함수는 self.moveModalView() 함수를 정의 해보자

func moveModalView(duration: TimeInterval) { guard let fromViewController: UIViewController = transitionContext.viewController(forKey: .from) else { return } guard let toViewController: UIViewController = transitionContext.viewController(forKey: .to) else { return } var modalViewControllerFrame: CGRect = toViewController.view.frame modalViewControllerFrame.origin.y = self.ModalViewYOffset let transformVal: CGAffineTransform = CGAffineTransform(scaleX: self.NonModalViewMinScale, y: self.NonModalViewMinScale) let alphaVal: CGFloat = self.NonModalViewMinAlpha UIView.animate(withDuration: duration, animations: { toViewController.view.frame = modalViewControllerFrame fromViewController.view.transform = transformVal fromViewController.view.alpha = alphaVal }) { (isFinishs) in } }

이 함수는 재스처를 진행하다가 손을 뗐을 때 그 상태값에 따라 만약 닫히는게 아닌 올렸을때 애니메이션을 처리하는 함수이다

다른거 없이 정해진 목적지를 향해 애니메이션을 지정하면 된다

이제 B뷰에서 다음의 코드를 작성해보자

override func viewDidLoad() { super.viewDidLoad() if let modalTransition = self.transitioningDelegate as? ModalTransition { modalTransition.addGestureRecognizersToView(self.view, naviView: self.bar) } }

3~5 라인만 작성하면된다

이제 모두 작성되었다 

실행해보자

good! 

지금까지 UIViewControllerContextTransitioniong 프로토콜을 알아보았다

Controller의 전환애니메이션은 기본도 훌륭하지만 

가끔 색다르게 전환 애니메이션을 꾸미고 싶을때 써먹으면 좋을 것 같다

Controller의 전환애니메이션은 이것외에 다른 것도 있으니 참고 하면 좋을것같다

끄읕!