View Controller Transitioning 에 대하여 - 1

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

View Controller Transitioning 에 대하여 - 2

View Controller Transitioning 에 대하여 - 3

 

iOS App은 기본 애니메이션만으로 충분히 이쁜 앱을 구현 할수 있다

하지만 새로운 경험을 선보이고 싶은 개발자와 색다른 앱을 사용하고 싶은 사용자의 니즈는 점점 증가 하고 있는 추세다

더구나 요즘 디자인 트렌드가 심플심플 하게 가다 보니 UI요소 요소에 새로운 애니메이션을 추가해 개발자는 사용자에게 새로운 경험을 주고 사용자는 앱을 이용할때 심심하지 않고 즐겁게 앱을 이용할수 있게 한다.

 

이번에 알아볼 녀석은 UIViewControllerContextTransitioning 프로토콜이다 이는 일반적인 애니메이션에 쓰이는게 아닌 UIViewController간의 화면전환이 이루어질때(Push, Modal) 사용하는 애니메이션이다

Push는 오른쪽에서 왼쪽으로 차오르는 애니메이션, Modal은 디폴트는 아래에서 위로 튀어 나오는 애니메이션 그외 페이징하듯이 또는 화면이 회전하듯 등등의 옵션이 기본 제공 되고 있다 

이는 매우 훌륭하지만 때때로 자신이 진행하고자 하는 프로젝트와 성격이 맞지 않거나 다른 방법으로 애미메이션효과를 주고 싶을때가 있다 그럴때UIViewControllerContextTransitioning 프로토콜을 이용하면 된다

많은 애니메이션 오픈소스가 있고 예제들이 있지만 애니메이션라이브러리의 특성상 범용성이 떨어지고 재사용성이 매우 낮다는 단점이 있다 UIViewControllerContextTransitioning 관련 라이브러리도 github이나 다른 블로그에 자료를 많이 찾을 수 는 있지만 자신의 프로젝트에 어울리는 라이브러리를 찾기는 어려웠다.

 

그래서 이번에는 UIViewControllerContextTransitioning의 구현 방법과 사용법을 통해 직접 만들어서 사용해 보고자 한다

 

개발환경

xCode 8.2.1, Swift 3.0.1, SDK 10.2,  macOS Sierra 10.12.3

 

 우선 single View Application으로 프로젝트를 생성하고 

storyboard에 기본적인 네비게이션과 버튼을 눌렀을때 B뷰로 푸시 되도록 구성을 하자

 

이 상태로 실행을 해보면 다들 알고 있는 기본적인 애니메이션이 작동한다

 

 

이제 UIViewControllerContextTransitioning를 구성해보자

Cmd+N을 하거나 xCode메뉴 File -> New -> File...을 눌러 Cocoa Touch Class의 파일을 선택 후 Subclass NSObject 인 클래스를 하나 생성해보자 파일명은 대충 정하면 된다

 

생성된 파일에 UIViewControllerContextTransitioning의 속성을사용해야 하니 NSObject옆에 UIViewControllerContextTransitioning을 타이핑 하자

그러면 이런 에러가 뜬다

 

별거 없다 그냥 UIViewControllerContextTransitioning프로토콜을 쓸꺼면 프로토콜을 정의 해라 정도로 생각 하면 된다

Cmd+ UIViewControllerContextTransitioning클릭을 통해 안으로 들어가보자

음 보니까 필수 사용 함수가 두개 옵션 사용 함수가 두개 있다(그중 1개는 iOS10이상 사용)

필수사용 함수 는 각각 사용할 애니메이션을 정의 하는 함수, 애니메이션의 Duration값을 정의하는 함수이다.

 

필수 사용 함수 두개를 가져와 서 다음의 코드를입력하자

class SampleAnimationTransitioning: NSObject, UIViewControllerAnimatedTransitioning { func animateTransition(using transitionContext: UIViewControllerContextTransitioning) { let fromViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from)! let toViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to)! let container = transitionContext.containerView toViewController.view.alpha = 0.0 container.addSubview(toViewController.view) UIView.animate(withDuration: 0.5, animations: { toViewController.view.alpha = 1.0 }) { (isFinish) in fromViewController.view.removeFromSuperview() transitionContext.completeTransition(isFinish) } } func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval { return 0.5 } }

 

이제 이 클래스를 사용하기 위해 A ViewController로 이동하여 다음을 정의해보자

import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() self.navigationController?.delegate = self } } // MARK: - UINavigationControllerDelegate extension ViewController: UINavigationControllerDelegate { func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationControllerOperation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? { return SampleAnimationTransitioning() } }

 

위의 코드를 설명하자면  func animateTransition(...)의 함수로 애니메이션할 대상과 동작을 정의 하는것인데 필자는 일단 알파값으로 뷰가 스멀스멀 나타나도록 구현해놨다 

여기서  fromViewController는 푸시할땐 A View, 팝할땐 B View, toViewController는 푸시할땐 B View, 팝할땐 A뷰이다 각각 기준과 대상이 되는 애니메이션이 누구냐에 따라 From과 to가달라지는것이다

container는 실제 애니메이션이 동작 하게 되는 View 라고 생각 하면 된다 앞으로 모든 애니메이션은 이곳에 붙여서 실행할 것 이다.

 

그리고 그 구현시간은 func transitionDuration (...) 에서 0.5초로로 정의했다

 

그리고 ViewController에서 navigationController dlegate를 받아서 Animaition컨트롤러를 위에 정의한 클래스로 잡아준다

실행 하면 다음처럼 보여진다

 

 

지금까지 UIViewControllerContextTransitioning의 기초를 알아봤다 다음포스팅은 이를 가지고 좀더 복잡하고 화려한 에니메이션을 구현해 보도록하겠다.