iOS 自定義頁面的切換動畫與交互動畫 By Swift

iOS7之前,開發者爲了尋求自定義Navigation Controller的Push/Pop動畫,只能受限於子類化一個UINavigationController,或是用自定義的動畫去覆蓋它。但是隨着iOS7的到來,Apple針對開發者推出了新的工具,以更靈活地方式管理UIViewController切換。


我把最終的Demo稍做修改,算是找了一個合適的應用場景,另外配上幾張美圖,拉拉人氣偷笑

雖然是Swift的Demo,但是轉成Objective-C相當容易。


最終效果預覽:


自定義導航欄的Push/Pop動畫

爲了在基於UINavigationController下做自定義的動畫切換,先建立一個簡單的工程,這個工程的rootViewController是一個UINavigationController,UINavigationController的rootViewController是一個簡單的UIViewController(稱之爲主頁面),通過這個UIViewController上的一個Button能進入到下一個UIViewController中(稱之爲詳情頁面),我們先在主頁面的ViewController上實現兩個協議:UINavigationControllerDelegate和UIViewControllerAnimatedTransitioning,然後在ViewDidLoad裏面把navigationController的delegate設爲self,這樣在導航欄Push和Pop的時候我們就知道了,然後用一個屬性記下是Push還是Pop,就像這樣:

func navigationController(navigationController: UINavigationController!, animationControllerForOperation operation: UINavigationControllerOperation, fromViewController fromVC: UIViewController!, toViewController toVC: UIViewController!) -> UIViewControllerAnimatedTransitioning! {

    navigationOperation = operation

    return self

}

這是iOS7的新方法,這個方法需要你提供一個UIViewControllerAnimatedTransitioning,那UIViewControllerAnimatedTransitioning到底是什麼呢?

UIViewControllerAnimatedTransitioning是蘋果新增加的一個協議,其目的是在需要使用自定義動畫的同時,又不影響視圖的其他屬性,讓你把焦點集中在動畫實現的本身上,然後通過在這個協議的回調裏編寫自定義的動畫代碼,即“切換中應該會發生什麼”,負責切換的具體內容,任何實現了這一協議的對象被稱之爲動畫控制器。你可以藉助協議能被任何對象實現的這一特性,從而把各種動畫效果封裝到不同的類中,只要方便使用和管理,你可以發揮一切手段。我在這裏讓主頁面實現動畫控制器也是可以的,因爲它是導航欄的rootViewController,會一直存在,我只要在裏面編寫自定義的Push和Pop動畫代碼就可以了:

//UIViewControllerTransitioningDelegate

func transitionDuration(transitionContext: UIViewControllerContextTransitioning!) -> NSTimeInterval {

    return 0.4

}


func animateTransition(transitionContext: UIViewControllerContextTransitioning!) {

    let containerView = transitionContext.containerView()

    let toViewController = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)

    let fromViewController = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)

    

    var destView: UIView!

    var destTransform: CGAffineTransform!

    if navigationOperation == UINavigationControllerOperation.Push {

        containerView.insertSubview(toViewController.view, aboveSubview: fromViewController.view)

        destView = toViewController.view

        destView.transform = CGAffineTransformMakeScale(0.10.1)

        destTransform = CGAffineTransformMakeScale(11)

    } else if navigationOperation == UINavigationControllerOperation.Pop {

        containerView.insertSubview(toViewController.view, belowSubview: fromViewController.view)

        destView = fromViewController.view

        // 如果IDEXcode6 Beta4+iOS8SDK,那麼在此處設置爲0,動畫將不會被執行(不確定是哪裏的Bug)

        destTransform = CGAffineTransformMakeScale(0.10.1)

    }

    UIView.animateWithDuration(transitionDuration(transitionContext), animations: {

        destView.transform = destTransform

        }, completion: ({completed in

            transitionContext.completeTransition(true)

        }))

}

上面第一個方法返回動畫持續的時間,而下面這個方法纔是具體需要實現動畫的地方。UIViewControllerAnimatedTransitioning的協議都包含一個對象:transitionContext,通過這個對象能獲取到切換時的上下文信息,比如從哪個VC切換到哪個VC等。我們從transitionContext獲取containerView,這是一個特殊的容器,切換時的動畫將在這個容器中進行;UITransitionContextFromViewControllerKey和UITransitionContextToViewControllerKey就是從哪個VC切換到哪個VC,容易理解;除此之外,還有直接獲取view的UITransitionContextFromViewKey和UITransitionContextToViewKey等。

我按Push和Pop把動畫簡單的區分了一下,Push時scale由小變大,Pop時scale由大變小,不同的操作,toViewController的視圖層次也不一樣。最後,在動畫完成的時候調用completeTransition,告訴transitionContext你的動畫已經結束,這是非常重要的方法,必須調用。在動畫結束時沒有對containerView的子視圖進行清理(比如把fromViewController的view移除掉)是因爲transitionContext會自動清理,所以我們無須在額外處理。

注意一點,這樣一來會發現原來導航欄的交互式返回效果沒有了,如果你想用原來的交互式返回效果的話,在返回動畫控制器的delegate方法裏返回nil,如:

if operation == UINavigationControllerOperation.Push {

    navigationOperation = operation

    return self

}

return nil

然後在viewDidLoad裏,Objective-C直接self.navigationController.interactivePopGestureRecognizer.delegat = self就行了,Swift除了要navigationController.interactivePopGestureRecognizer.delegate = self之外,還要在self上聲明實現了UIGestureRecognizerDelegate這個協議,雖然實際上你並沒有實現。

一個簡單的自定義導航欄Push/Pop動畫就完成了。


自定義Modal的Present/Dismiss動畫

自定義Modal的Present與Dismiss動畫與之前類似,都需要提供一個動畫管理器,我們用詳情頁面來展示一個Modal頁面,詳情頁面就作爲動畫管理器:

func transitionDuration(transitionContext: UIViewControllerContextTransitioning!) -> NSTimeInterval {

    return 0.6

}


func animateTransition(transitionContext: UIViewControllerContextTransitioning!) {

    let containerView = transitionContext.containerView()

    

    let toViewController = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)

    let fromViewController = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)

    

    var destView: UIView!

    var destTransfrom = CGAffineTransformIdentity

    let screenHeight = UIScreen.mainScreen().bounds.size.height

    

    if modalPresentingType == ModalPresentingType.Present {

        destView = toViewController.view

        destView.transform = CGAffineTransformMakeTranslation(0, screenHeight)

        containerView.addSubview(toViewController.view)

    } else if modalPresentingType == ModalPresentingType.Dismiss {

        destView = fromViewController.view

        destTransfrom = CGAffineTransformMakeTranslation(0, screenHeight)

        containerView.insertSubview(toViewController.view, belowSubview: fromViewController.view)

    }

    

    UIView.animateWithDuration(transitionDuration(transitionContext), delay: 0, usingSpringWithDamping: 0.6, initialSpringVelocity: 0,

        options: UIViewAnimationOptions.CurveLinear, animations: {

            destView.transform = destTransfrom

        }, completion: {completed in

            transitionContext.completeTransition(true)

    })

}

動畫部分用了一個iOS7的彈簧動畫,usingSpringWithDamping的值設置得越小,彈的就越明顯,動畫的其他地方與之前類似,不一樣的是之前主頁面除了做動畫管理器之外,還實現了UINavigationControllerDelegate協議,因爲我們是自定義導航欄的動畫,而在這裏需要自定義Modal動畫就要實現另一個協議:UIViewControllerTransitioningDelegate,這個協議與之前的UINavigationControllerDelegate協議具有相似性,都是返回一個動畫管理器,iOS7的方法總共有四個,有兩個交互式的先不管,我們只需要實現另兩個即可:

func animationControllerForPresentedController(presented: UIViewController!, presentingController presenting: UIViewController!, sourceController source: UIViewController!) -> UIViewControllerAnimatedTransitioning! {

    modalPresentingType = ModalPresentingType.Present

    return self

}


func animationControllerForDismissedController(dismissed: UIViewController!) -> UIViewControllerAnimatedTransitioning! {

    modalPresentingType = ModalPresentingType.Dismiss

    return self

}

我同樣的用一個屬性記下是Present還是Dismiss,然後返回self。因爲我是用的Storyboard,所以需要在prepareForSegue方法裏設置一下transitionDelegate:

override func prepareForSegue(segue: UIStoryboardSegue!, sender: AnyObject!) {

    let modal = segue.destinationViewController as UIViewController

    modal.transitioningDelegate = self

}

對需要執行自定義動畫的VC設置transitionDelegate屬性即可。
如此一來,一個針對模態VC的自定義動畫也完成了。

自定義導航欄的交互式動畫

與動畫控制器類似,我們把實現了UIViewControllerInteractiveTransitioning協議的對象稱之爲交互控制器,最常用的就是把交互控制器應用到導航欄的Back手勢返回上,而如果要實現一個自定義的交互式動畫,我們有兩種方式來完成:實現一個交互控制器,或者使用iOS提供的UIPercentDrivenInteractiveTransition類作交互控制器。

使用UIPercentDrivenInteractiveTransition

我們這裏就用UIPercentDrivenInteractiveTransition來完成導航欄的交互式動畫。先看下UIPercentDrivenInteractiveTransition的定義:

實際上這個類就是實現了UIViewControllerInteractiveTransitioning協議的交互控制器,我們使用它就能夠輕鬆地爲動畫控制器添加一個交互動畫。調用updateInteractiveTransition:更新進度;調用cancelInteractiveTransition取消交互,返回到切換前的狀態;調用finishInteractiveTransition通知上下文交互已完成,同completeTransition一樣。我們把交互動畫應用到詳情頁面Back回主頁面的地方,由於之前的動畫管理器的角色是主頁面擔任的,Navigation Controller的delegate同一時間只能有一個,那在這裏交互控制器的角色也由主頁面來擔任。首先添加一個手勢識別器:

let popRecognizer = UIScreenEdgePanGestureRecognizer(target: self, action: Selector("handlePopRecognizer:"))

popRecognizer.edges = UIRectEdge.Left

self.navigationController.view.addGestureRecognizer(popRecognizer)

UIScreenEdgePanGestureRecognizer繼承於UIPanGestureRecognizer,能檢測從屏幕邊緣滑動的手勢,設置edges爲left檢測左邊即可。然後實現handlePopRecognizer:

func handlePopRecognizer(popRecognizer: UIScreenEdgePanGestureRecognizer) {

    var progress = popRecognizer.translationInView(navigationController.view).x / navigationController.view.bounds.size.width

    progress = min(1.0max(0.0, progress))

    

    println("\(progress)")

    if popRecognizer.state == UIGestureRecognizerState.Began {

        println("Began")

        self.interactivePopTransition = UIPercentDrivenInteractiveTransition()

        self.navigationController.popViewControllerAnimated(true)

    } else if popRecognizer.state == UIGestureRecognizerState.Changed {

        self.interactivePopTransition?.updateInteractiveTransition(progress)

        println("Changed")

    } else if popRecognizer.state == UIGestureRecognizerState.Ended || popRecognizer.state == UIGestureRecognizerState.Cancelled {

        if progress > 0.5 {

            self.interactivePopTransition?.finishInteractiveTransition()

        } else {

            self.interactivePopTransition?.cancelInteractiveTransition()

        }

        println("Ended || Cancelled")

        self.interactivePopTransition = nil

    }

}

我用了一個實例變量引用UIPercentDrivenInteractiveTransition,這個類只在需要用時才創建,否則在正常Push/Pop的時候,即使只是點擊操作並沒有識別手勢的情況下,也會進入交互(你也可以在要求你返回交互控制器時,進行一些判斷,通過返回nil來屏蔽,但這顯然就太麻煩了)。當手勢識別的時候我們調用pop,用戶手勢發生變化時,調用update去更新,不管是end還是cancel,都判斷下是進入下一個頁面還是返回之前的頁面,完成這一切後把交互控制器清理掉。

現在我們已經有了交互控制器對象,只需要把它給告知給Navigation Controller就行了,我們實現UINavigationControllerDelegate的另一個方法:

func navigationController(navigationController: UINavigationController!, interactionControllerForAnimationController animationController: UIViewControllerAnimatedTransitioning!) -> UIViewControllerInteractiveTransitioning! {

    return self.interactivePopTransition

}

我們從詳情頁面通過自定義的交互動畫返回到上一個頁面的工作就完成了。

Demo效果預覽:


使用UIPercentDrivenInteractiveTransition的Demo


自定義交互控制器

我在之前提過,UIPercentDrivenInteractiveTransition實際上就是實現了UIViewControllerInteractiveTransitioning協議,只要是實現了這個協議的對象就可以稱之爲交互控制器,我們如果想更加精確的管理動畫以及深入理解處理上的細節,就需要自己實現UIViewControllerInteractiveTransitioning協議。
UIViewControllerInteractiveTransitioning協議總共有三個方法,其中startInteractiveTransition:是必須實現的方法,我們在裏面初始化動畫的狀態:

func startInteractiveTransition(transitionContext: UIViewControllerContextTransitioning!) {

    self.transitionContext = transitionContext

    

    let containerView = transitionContext.containerView()

    let toViewController = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)

    let fromViewController = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)

    

    containerView.insertSubview(toViewController.view, belowSubview: fromViewController.view)

    

    self.transitingView = fromViewController.view

}

這裏不涉及動畫,只是把需要切換的view添加到上下文環境中即可。動畫部分我們還是和之前使用UIPercentDrivenInteractiveTransition的接口保持一致,添加幾個方法:

func updateWithPercent(percent: CGFloat) {

    let scale = CGFloat(fabsf(Float(percent - CGFloat(1.0))))

    transitingView?.transform = CGAffineTransformMakeScale(scale, scale)

    transitionContext?.updateInteractiveTransition(percent)

}


func finishBy(cancelled: Bool) {

    if cancelled {

        UIView.animateWithDuration(0.4, animations: {

            self.transitingView!.transform = CGAffineTransformIdentity

            }, completion: {completed in

                self.transitionContext!.cancelInteractiveTransition()

                self.transitionContext!.completeTransition(false)

        })

    } else {

        UIView.animateWithDuration(0.4, animations: {

            print(self.transitingView)

            self.transitingView!.transform = CGAffineTransformMakeScale(00)

            print(self.transitingView)

            }, completion: {completed in

                self.transitionContext!.finishInteractiveTransition()

                self.transitionContext!.completeTransition(true)

        })

    }

}

updateWithPercent:方法用來更新view的transform屬性,finishBy:方法主要用來判斷是進入下一個頁面還是返回到之前的頁面,並告知transitionContext目前的狀態,以及對當前正在scale的view做最後的動畫。這裏的transitionContext和transitingView可以在前面的處理手勢識別代碼中取得,我將裏面的代碼更新了一下,變成下面這樣:

func handlePopRecognizer(popRecognizer: UIScreenEdgePanGestureRecognizer) {

    var progress = popRecognizer.translationInView(navigationController.view).x / navigationController.view.bounds.size.width

    progress = min(1.0max(0.0, progress))

    

    println("\(progress)")

    if popRecognizer.state == UIGestureRecognizerState.Began {

        println("Began")

        isTransiting = true

        //self.interactivePopTransition = UIPercentDrivenInteractiveTransition()

        self.navigationController.popViewControllerAnimated(true)

    } else if popRecognizer.state == UIGestureRecognizerState.Changed {

        //self.interactivePopTransition?.updateInteractiveTransition(progress)

        updateWithPercent(progress)

        println("Changed")

    } else if popRecognizer.state == UIGestureRecognizerState.Ended || popRecognizer.state == UIGestureRecognizerState.Cancelled {

        //if progress > 0.5 {

        //    self.interactivePopTransition?.finishInteractiveTransition()

        //} else {

        //    self.interactivePopTransition?.cancelInteractiveTransition()

        //}

        finishBy(progress < 0.5)

        println("Ended || Cancelled")

        isTransiting = false

        //self.interactivePopTransition = nil

    }

}

另外還用一個額外布爾值變量isTransiting來標識當前是否在手勢識別中,這是爲了在返回交互控制器的時候,不會在不當的時候返回self:

func navigationController(navigationController: UINavigationController!, interactionControllerForAnimationController animationController:

UIViewControllerAnimatedTransitioning!) -> UIViewControllerInteractiveTransitioning! {

    if !self.isTransiting {

        return nil

    }

    return self

}

這樣一來就完成了自定義交互控制器。可以發現,基本流程與使用UIPercentDrivenInteractiveTransition是一致的,UIPercentDrivenInteractiveTransition主要是幫我們封裝了transitionContext的初始化以及對它的調用等,只是動畫部分需要我們在額外處理一下了。

最終效果:

我在主頁面上多放了幾個帶Image的Button,在點擊Button時會將Button的Image傳遞到詳情頁面,詳情頁面相應的也有一個UIImageView用來顯示。在主頁面初始化動畫狀態的時候,會生成一個Image的快照來進行動畫,要是在以前,我們只能通過UIGraphics的APIs進行一系列的操作,涉及視圖的scale、旋轉、透明及渲染到context等,但現在,我們只需要用iOS7的API就行了:

@availability(iOS, introduced=7.0)

func snapshotViewAfterScreenUpdates(afterUpdates: Bool) -> UIView

這個API能幫助我們快速獲取一個視圖的的快照,afterUpdates參數表示是否等所有效果應用到該視圖之後再獲取,如果設置爲false,則立即獲取;爲true則會受到後面對該視圖的影響。
在動畫之前,把主頁面和詳情頁面對應的Button和ImageView隱藏,然後對快照生成的View進行動畫,動畫用簡單的frame隱式動畫就可以了。

最終效果的Demo(上傳到我的資源頁面時總是失敗,所以只能上傳到GitHub上了)

最後附上一張圖,這個圖比較容易區分那幾個名稱相近的協議:


UPDATED:

GitHub上已更新至Xcode 6,主要是語法上的一些小調整

原文轉之:http://blog.csdn.net/zhangao0086/article/details/38459937

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章