iOS 自定義轉(zhuǎn)場動畫

簡介

在日常開發(fā)中動畫是必不可少的，蘋果也為iOS開發(fā)提供了很多好的動畫效果，作為iOS開發(fā)者自然需要對動畫有所了解。在這些動畫中，有一種動畫是用于一個場景轉(zhuǎn)換到另一個場景的過渡動畫，我們稱之為轉(zhuǎn)場動畫，本文主要內(nèi)容是關于轉(zhuǎn)場動畫的。

轉(zhuǎn)場，顧名思義是場景的轉(zhuǎn)換，即界面由一個場景轉(zhuǎn)換到另一個場景。在iOS中可以分為視圖控制器轉(zhuǎn)換和視圖的轉(zhuǎn)換兩個層次，本文的主要結(jié)構如下：

  • 轉(zhuǎn)場動畫簡介
  • 視圖控制器轉(zhuǎn)場的實現(xiàn)機制 -- 五大協(xié)議
  • 視圖轉(zhuǎn)場的實現(xiàn) -- CATransition

視圖控制器轉(zhuǎn)場 -- View Controller Transition

在iOS 7之前，系統(tǒng)已經(jīng)提供了一些默認的視圖控制器轉(zhuǎn)場動畫，但是這些動畫是完全由系統(tǒng)實現(xiàn)的，不能進行自定義。在iOS 7的時候，系統(tǒng)開放了部分API，使得自定義轉(zhuǎn)場動畫成為現(xiàn)實。

自定義轉(zhuǎn)場動畫相關的API主要包括五個協(xié)議，下面分別介紹下：

  • 轉(zhuǎn)場代理
  • 轉(zhuǎn)場上下文環(huán)境協(xié)議
  • 動畫控制器協(xié)議
  • 交互控制器協(xié)議
  • 轉(zhuǎn)場協(xié)調(diào)器協(xié)議

1、轉(zhuǎn)場代理

視圖控制器中的視圖顯示在屏幕上有兩種方式：1、內(nèi)嵌在容器中，例如UINavigationController、UITabBarController、 2、模態(tài)彈出，即Present/dismiss

對于這些方式，系統(tǒng)在對應的代理協(xié)議中都提供了關于轉(zhuǎn)場動畫的相關方法，下面逐個分析下：

1.1 導航欄代理 - UINavigationControllerDelegate

optional func navigationController(_ navigationController: UINavigationController, 
            animationControllerFor operation: UINavigationController.Operation, 
                              from fromVC: UIViewController, 
                                to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning?

該方法返回一個遵守UIViewControllerAnimatedTransitioning協(xié)議的可選對象，該協(xié)議即為動畫控制器協(xié)議，在后文會專門介紹，這里先做個簡介。我們可以在遵守該協(xié)議的類中進行轉(zhuǎn)場動畫的設計，如果返回的對象為nil，則保持系統(tǒng)動畫，不會使用自定義動畫。

參數(shù)中，operation是一個枚舉類型，其case為 .none、.push、.pop；fromVC表示push/pop動作發(fā)生時顯示的ViewController，即動畫之前的ViewController，toVC表示動畫結(jié)束后的ViewController，例如push動作由 A -> B，則fromVC為A，toVC為B，當發(fā)生pop動作 B -> A時，fromVC為B，toVC為A。

optional func navigationController(_ navigationController: UINavigationController, 
          interactionControllerFor animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?

該方法返回一個遵守UIViewControllerInteractiveTransitioning協(xié)議的可選對象，該協(xié)議對象為一個可交互的轉(zhuǎn)場對象，即交互控制協(xié)議對象，該對象定義了轉(zhuǎn)場動畫的交互行為。

1.2 模態(tài)的代理 - UIViewControllerTransitioningDelegate

optional func animationController(forPresented presented: UIViewController, 
                       presenting: UIViewController, 
                           source: UIViewController) -> UIViewControllerAnimatedTransitioning?

optional func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning?

這兩個方法均返回一個遵守UIViewControllerAnimatedTransitioning協(xié)議的可選對象，用于在模態(tài)彈出時，返回自定義轉(zhuǎn)場動畫的對象。與導航欄有所不同的是，模態(tài)彈出分為了 present 和 dismiss 兩個方法。

在present方法中，presented表示被present的ViewController，source表示調(diào)用方法的ViewController，presenting可以與source相同，也可以不相同，當source作為一個childViewController時，presenting為source的父控制器，否則presenting與source相同。

optional func interactionControllerForPresentation(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?

optional func interactionControllerForDismissal(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?

與設置動畫控制器的方法一樣，在設置交互控制器時，模態(tài)方式也分為了 present 和 dismiss 兩個方法，分別用來設置present 和 dismiss時的交互行為。

1.3 tabbar的轉(zhuǎn)場代理

optional func tabBarController(_ tabBarController: UITabBarController, 
animationControllerForTransitionFrom fromVC: UIViewController, 
                            to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning?

optional func tabBarController(_ tabBarController: UITabBarController, 
      interactionControllerFor animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?

與上文所述一致，這兩個方法分別返回動畫控制器和交互控制器。

2、轉(zhuǎn)場上下文

轉(zhuǎn)場上下文是一個遵守UIViewControllerContextTransitioning協(xié)議的對象，該對象由系統(tǒng)自動創(chuàng)建，無需我們進行管理。UIViewControllerContextTransitioning協(xié)議包含如下API:

@available(iOS 2.0, *) var containerView: UIView { get }

containerView是一個容器，轉(zhuǎn)場動畫前后的View以及要添加的動畫視圖都是添加在這個容器中的。事實上，該容器的類型是UIViewControllerWrapperView，無論是自定義轉(zhuǎn)場，還是系統(tǒng)定義的轉(zhuǎn)場，最終都是添加在該view上，并且作為一個全局的上下文，該view只存在一份，因此需要合理管理其子視圖。

@available(iOS 2.0, *) func viewController(forKey key: UITransitionContextViewControllerKey) -> UIViewController?

根據(jù)UITransitionContextViewControllerKey的from和to獲取轉(zhuǎn)場前后的ViewController，并且與上文所述fromVC和toVC一致，轉(zhuǎn)場前后的ViewController是可逆的。例如push時 A -> B，則A是 fromVC, B是 toVC；在pop回去是二者的位置則發(fā)生了對調(diào)。

@available(iOS 8.0, *) func view(forKey key: UITransitionContextViewKey) -> UIView?

在iOS 7及之前，我們只能通過獲取到轉(zhuǎn)場前后的ViewController，進而獲取其view來獲取轉(zhuǎn)場前后的視圖，但是在iOS 8及以后，我們可以直接獲取轉(zhuǎn)場前后的View。

var transitionWasCancelled: Bool { get }

該屬性為一個只讀的計算屬性，表示轉(zhuǎn)場是否被取消。當轉(zhuǎn)場動畫為一個可交互式動畫時，動畫進行過程中可以手動觸發(fā)取消，如果取消了則該屬性為true，而如果沒有取消，則為false，對于一個非交互式動畫，則該值一直為false。

func completeTransition(_ didComplete: Bool)

當轉(zhuǎn)場動畫完成或者被取消時，調(diào)用該方法。

3、動畫控制器

動畫控制器協(xié)議定義了一系列API，用以配置實現(xiàn)轉(zhuǎn)場動畫。我們創(chuàng)建一個自己的類，并遵守該協(xié)議，然后通過轉(zhuǎn)場代理將自定義動畫的Trasnsition返回給系統(tǒng)。

動畫控制器中有兩個主要的API，分別為：

func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval

該方法返回一個時長，在該方法中定義轉(zhuǎn)場動畫持續(xù)的時間

func animateTransition(using transitionContext: UIViewControllerContextTransitioning)

在該方法中，定義轉(zhuǎn)場要做的動畫。

4、交互控制器

交互控制器協(xié)議是用來配置轉(zhuǎn)場動畫的交互事件的，實際的動畫依然由動畫控制器來完成。系統(tǒng)定義了UIViewControllerInteractiveTransitioning協(xié)議，但是在實際使用時，我們不會直接遵守該協(xié)議，而是繼承UIPercentDrivenInteractiveTransition類。

UIPercentDrivenInteractiveTransition是系統(tǒng)提供的類，根據(jù)蘋果官方文檔的解釋，創(chuàng)建一個交互式動畫對象最簡單的方式就是繼承該類，如下圖所示。

圖片

該類的API主要有如下幾個：

open var duration: CGFloat { get } // 動畫時長，根據(jù)transitionDuration:的返回值確定

open var percentComplete: CGFloat { get }  // 完成百分比

open func update(_ percentComplete: CGFloat)  // 更新動畫完成百分比

open func cancel()  // 取消動畫

open func finish()  // 完成動畫

// 上訴三個方法對應UIViewControllerContextTransitioning協(xié)議中的 updateInteractiveTransition、cancelInteractiveTransition()、finishInteractiveTransition()方法

5、轉(zhuǎn)場協(xié)調(diào)器

轉(zhuǎn)場協(xié)調(diào)器用于幫助做一些輔助動畫，由系統(tǒng)進行創(chuàng)建，我們通過UIViewController的分類中的屬性即可獲取，代碼如圖：

圖片

在UIViewControllerTransitionCoordinator中定義了如下API

func animate(alongsideTransition animation: ((UIViewControllerTransitionCoordinatorContext) -> Void)?, completion: ((UIViewControllerTransitionCoordinatorContext) -> Void)? = nil) -> Bool

在該方法中添加動畫，當轉(zhuǎn)場動畫執(zhí)行完畢后，會繼續(xù)執(zhí)行animation閉包中的動畫，而如果使用UIView.animate(withDuration的方式添加動畫，則會在轉(zhuǎn)場動畫執(zhí)行時，動畫就已經(jīng)執(zhí)行完畢。

CATransition

上文介紹了ViewController間的轉(zhuǎn)場實現(xiàn)機制，在CoreAnimation框架中，還有一個動畫類用來做layer級的轉(zhuǎn)場，即CATransition。CATransition是作用于CALayer上的，因此需要將CATransition添加到view的layer屬性上。

CATransition是繼承自CAAnimation的類，其自己所包含的屬性由：

open var type: CATransitionType
圖片

該屬性表示轉(zhuǎn)場的類型，例如 fade、push、moveIn等，具體效果可參考CATransitionDemo[1]

open var subtype: CATransitionSubtype?
圖片

該屬性表示轉(zhuǎn)場的方向，但是對于fade這種與方向無關的轉(zhuǎn)場，該屬性是沒有效果的。

/* The amount of progress through to the transition at which to begin
     * and end execution. Legal values are numbers in the range [0,1].
     * `endProgress' must be greater than or equal to `startProgress'.
     * Default values are 0 and 1 respectively. */

open var startProgress: Float

open var endProgress: Float

這兩個屬性分別表示開始時的進度和結(jié)束時的進度，結(jié)合父類的duration屬性，可以控制動畫的開始和結(jié)束為止。需要注意的是，這兩個屬性的值為[0, 1]，并且 startProgress要小于 endProgress。

總結(jié)

本文主要介紹了轉(zhuǎn)場動畫的實現(xiàn)流程，主要有如下兩部分內(nèi)容：

  • 1、ViewController的轉(zhuǎn)場

  • 2、View的轉(zhuǎn)場

分別對應轉(zhuǎn)場的五大協(xié)議和CATransition。本文只是介紹了相關的API使用，具體Demo可參照網(wǎng)上的CATransitionDemo[2]和VCTransitionsLibrary[3]。

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容