關於自定義轉場動畫,我都告訴你。

原文出處: 伯恩的遺產(@翁呀偉呀 )git

概述

這篇文章,我將講述幾種轉場動畫的自定義方式,而且每種方式附上一個示例,畢竟代碼纔是咱們的語言,這樣比較容易上手。其中主要有如下三種自定義方法,供你們參考:github

  • Push & Pop編程

  • Modal架構

  • Segueide

前兩種你們都很熟悉,第三種是 Stroyboard 中的拖線,屬於 UIStoryboardSegue 類,經過繼承這個類來自定義轉場過程動畫。動畫

Push & Pop

首先說一下 Push & Pop 這種轉場的自定義,操做步驟以下:網站

  1. 建立一個文件繼承自 NSObject, 並遵照 UIViewControllerAnimatedTransitioning協議。編碼

  2. 實現該協議的兩個基本方法:
    spa

     

     

    13d

    2

    3

    4

    //指定轉場動畫持續的時長

    func transitionDuration(transitionContext: UIViewControllerContextTransitioning) -> NSTimeInterval      

    //轉場動畫的具體內容      

    func animateTransition(transitionContext: UIViewControllerContextTransitioning)

  3. 遵照 UINavigationControllerDelegate 協議,並實現此方法:

     

     

    1

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

    在此方法中指定所用的 UIViewControllerAnimatedTransitioning,即返回 第1步 中建立的類。注意:因爲須要 Push 和 Pop,因此須要兩套動畫方案。解決方法爲:

    在 第1步 中,建立兩個文件,一個用於 Push 動畫,一個用於 Pop動畫,而後 第3步 中在返回動畫類以前,先判斷動畫方式(Push 或 Pop), 使用 operation == UINavigationControllerOperation.Push 便可判斷,最後根據不一樣的方式返回不一樣的類。

    到這裏就能夠看到轉場動畫的效果了,可是你們都知道,系統默認的 Push 和 Pop 動畫都支持手勢驅動,而且能夠根據手勢移動距離改變更畫完成度。幸運的是,Cocoa 已經集成了相關方法,咱們只用告訴它百分比就能夠了。因此下一步就是 手勢驅動
  4. 在第二個 UIViewController 中給 View 添加一個滑動(Pan)手勢。
    建立一個 UIPercentDrivenInteractiveTransition 屬性。
    在手勢的監聽方法中計算手勢移動的百分比,並使用 UIPercentDrivenInteractiveTransition 屬性的 updateInteractiveTransition() 方法實時更新百分比。
    最後在手勢的 state 爲 ended 或 cancelled 時,根據手勢完成度決定是還原動畫仍是結束動畫,使用 UIPercentDrivenInteractiveTransition 屬性的 cancelInteractiveTransition() 或 finishInteractiveTransition() 方法。

  5. 實現 UINavigationControllerDelegate 中的另外一個返回 UIViewControllerInteractiveTransitioning 的方法,並在其中返回 第4步 建立的 UIPercentDrivenInteractiveTransition 屬性。

至此,Push 和 Pop 方式的自定義就完成了,具體細節看下面的示例。

自定義 Push & Pop 示例

此示例來自 Kitten Yang 的blog 實現Keynote中的神奇移動效果,我將其用 Swift 實現了一遍,源代碼地址: MagicMove,下面是運行效果。


MagicMove.gif

初始化

  • 建立兩個 ViewController,一個繼承自 UICollectionViewController,取名 ViewController。另外一個繼承 UIViewController,取名 DetailViewController。在 Stroyboard 中建立並綁定。

  • 在 Stroyboard 中拖一個 UINavigationController,刪去默認的 rootViewController,使 ViewController 做爲其 rootViewController,再拖一條從 ViewController 到 DetailViewController 的 segue。

  • 在 ViewController 中自定義 UICollectionViewCell,添加 UIImageView 和 UILabel

  • 在 DetailViewController 中添加 UIImageView 和 UITextView

mm_inital.png

添加 UIViewControllerAnimatedTransitioning

  • 添加一個 Cocoa Touch Class,繼承自 NSObject,取名 MagicMoveTransion,遵照 UIViewControllerAnimatedTransitioning 協議。

  • 實現協議的兩個方法,並在其中編寫 Push 的動畫。 具體的動畫實現過程都在代碼的註釋裏 :

     

     

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    func transitionDuration(transitionContext: UIViewControllerContextTransitioning) -> NSTimeInterval {

        return 0.5

    }

     

    func animateTransition(transitionContext: UIViewControllerContextTransitioning) {

        //1.獲取動畫的源控制器和目標控制器

        let fromVC = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey) as! ViewController

        let toVC = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey) as! DetailViewController

        let container = transitionContext.containerView()

     

        //2.建立一個 Cell 中 imageView 的截圖,並把 imageView 隱藏,形成使用戶覺得移動的就是 imageView 的假象

        let snapshotView = fromVC.selectedCell.imageView.snapshotViewAfterScreenUpdates(false)

        snapshotView.frame = container.convertRect(fromVC.selectedCell.imageView.frame, fromView: fromVC.selectedCell)

        fromVC.selectedCell.imageView.hidden = true

     

        //3.設置目標控制器的位置,並把透明度設爲0,在後面的動畫中慢慢顯示出來變爲1

        toVC.view.frame = transitionContext.finalFrameForViewController(toVC)

        toVC.view.alpha = 0

     

        //4.都添加到 container 中。注意順序不能錯了

        container.addSubview(toVC.view)

        container.addSubview(snapshotView)

     

        //5.執行動畫

        UIView.animateWithDuration(transitionDuration(transitionContext), delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in

                snapshotView.frame = toVC.avatarImageView.frame

                toVC.view.alpha = 1

            }) { (finish: Bool) -> Void in

                fromVC.selectedCell.imageView.hidden = false

                toVC.avatarImageView.image = toVC.image

                snapshotView.removeFromSuperview()

     

                //必定要記得動畫完成後執行此方法,讓系統管理 navigation

                transitionContext.completeTransition(true)

        }

    }

使用動畫

  • 讓 ViewController 遵照 UINavigationControllerDelegate 協議。

  • 在 ViewController 中設置 NavigationController 的代理爲本身:

     

     

    1

    2

    3

    4

    5

    override func viewDidAppear(animated: Bool) {

        super.viewDidAppear(animated)

     

        self.navigationController?.delegate = self

    }

  • 實現 UINavigationControllerDelegate 協議方法:

     

     

    1

    2

    3

    4

    5

    6

    7

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

        if operation == UINavigationControllerOperation.Push {

            return MagicMoveTransion()

        } else {

            return nil

        }

    }

  • 在 ViewController 的 controllerCell 的點擊方法中,發送 segue

     

     

    1

    2

    3

    4

    5

    override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {

        self.selectedCell = collectionView.cellForItemAtIndexPath(indexPath) as! MMCollectionViewCell

     

        self.performSegueWithIdentifier("detail", sender: nil)

    }

  • 在發送 segue 的時候,把點擊的 image 發送給 DetailViewController

     

     

    1

    2

    3

    4

    5

    6

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

        if segue.identifier == "detail" {

            let detailVC = segue.destinationViewController as! DetailViewController

            detailVC.image = self.selectedCell.imageView.image

        }

    }

    至此,在點擊 Cell 後,就會執行剛剛自定義的動畫了。接下來就要加入手勢驅動。

手勢驅動

  • 在 DetailViewController 的 ViewDidAppear() 方法中,加入滑動手勢。

     

     

    1

    2

    3

        let edgePan = UIScreenEdgePanGestureRecognizer(target: self, action: Selector("edgePanGesture:"))

        edgePan.edges = UIRectEdge.Left

        self.view.addGestureRecognizer(edgePan)

  • 在手勢監聽方法中,建立 UIPercentDrivenInteractiveTransition 屬性,並實現手勢百分比更新。

     

     

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    func edgePanGesture(edgePan: UIScreenEdgePanGestureRecognizer) {

        let progress = edgePan.translationInView(self.view).x / self.view.bounds.width

     

        if edgePan.state == UIGestureRecognizerState.Began {

            self.percentDrivenTransition = UIPercentDrivenInteractiveTransition()

            self.navigationController?.popViewControllerAnimated(true)

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

            self.percentDrivenTransition?.updateInteractiveTransition(progress)

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

            if progress > 0.5 {

                self.percentDrivenTransition?.finishInteractiveTransition()

            } else {

                self.percentDrivenTransition?.cancelInteractiveTransition()

            }

            self.percentDrivenTransition = nil

        }

    }

  • 實現返回 UIViewControllerInteractiveTransitioning 的方法並返回剛剛建立的 UIPercentDrivenInteractiveTransition屬性。

     

     

    1

    2

    3

    4

    5

    6

    7

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

        if animationController is MagicMovePopTransion {

            return self.percentDrivenTransition

        } else {

            return nil

        }

    }

OK,到如今,手勢驅動就寫好了,可是還不能使用,由於尚未實現 Pop 方法!如今本身去實現 Pop 動畫吧!請參考源代碼:MagicMove

Modal

modal轉場方式即便用 presentViewController() 方法推出的方式,默認狀況下,第二個視圖從屏幕下方彈出。下面就來介紹下 modal 方式轉場動畫的自定義。

  1. 建立一個文件繼承自 NSObject, 並遵照 UIViewControllerAnimatedTransitioning協議。

  2. 實現該協議的兩個基本方法:

     

     

    1

    2

    3

    4

    //指定轉場動畫持續的時長

    func transitionDuration(transitionContext: UIViewControllerContextTransitioning) -> NSTimeInterval      

    //轉場動畫的具體內容      

    func animateTransition(transitionContext: UIViewControllerContextTransitioning)

    以上兩個步驟和 Push & Pop 的自定義同樣,接下來就是不一樣的。
  3. 若是使用 Modal 方式從一個 VC 到另外一個 VC,那麼須要第一個 VC 遵循 UIViewControllerTransitioningDelegate 協議,並實現如下兩個協議方法:

     

     

    1

    2

    3

    4

    5

    //present動畫

    optional func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning?

     

    //dismiss動畫

    optional func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning?

  4. 在第一個 VC 的 prepareForSegue() 方法中,指定第二個 VC 的 transitioningDelegate 爲 self。

    由 第3步 中兩個方法就能夠知道,在建立轉場動畫時,最好也建立兩個動畫類,一個用於 Present, 一個用於 Dismiss,若是隻建立一個動畫類,就須要在實現動畫的時候判斷是 Present 仍是 Dismiss
    這時,轉場動畫就能夠實現了,接下來就手勢驅動了
  5. 在第一個 VC 中建立一個 UIPercentDrivenInteractiveTransition 屬性,而且在 prepareForSegue() 方法中爲第二個 VC.view 添加一個手勢,用以 dismiss. 在手勢的監聽方法中處理方式和 Push & Pop 相同。

  6. 實現 UIViewControllerTransitioningDelegate 協議的另外兩個方法,分別返回 Present 和 Dismiss 動畫的百分比。

     

     

    1

    2

    3

    4

    5

    6

    7

    8

    //百分比Push

    func interactionControllerForPresentation(animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {

         return self.percentDrivenTransition

    }

    //百分比Pop

    func interactionControllerForDismissal(animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {

         return self.percentDrivenTransition

    }

    至此,Modal 方式的自定義轉場動畫就寫完了。本身在編碼的時候有一些小細節須要注意,下面將展現使用 Modal 方式的自定義動畫的示例。

自定義 Modal 示例

此示例和上面一個示例同樣,來自 Kitten Yang 的blog 實現3D翻轉效果,我也將其用 Swift 實現了一遍,一樣個人源代碼地址:FlipTransion,運行效果以下:


FlipTransion.gif

初始化

  • 建立兩個 UIViewController, 分別命名爲:FirstViewController 和 SecondViewController。並在 Storyboard 中添加兩個 UIViewController 並綁定。

  • 分別給兩個視圖添加兩個 UIImageView,這樣作的目的是爲了區分兩個控制器。固然你也能夠給兩個控制器設置不一樣的背景,總之你開心就好。可是,既然作,就作認真點唄。注意:若是使用圖片並設置爲 Aspect Fill 或者其餘的 Fill,必定記得調用 imageView 的 clipsToBounds() 方法裁剪去多餘的部分。

  • 分別給兩個控制器添加兩個按鈕,第一個按鈕拖線到第二個控制器,第二個控制器綁定一個方法用來dismiss。

ft_inital.png

添加 UIViewControllerAnimatedTransitioning

  • 添加一個 Cocoa Touch Class,繼承自 NSObject,取名 BWFlipTransionPush(名字嘛,你開心就好。),遵照 UIViewControllerAnimatedTransitioning 協議。

  • 實現協議的兩個方法,並在其中編寫 Push 的動畫。 具體的動畫實現過程都在代碼的註釋裏 :

     

     

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    func animateTransition(transitionContext: UIViewControllerContextTransitioning) {

        let fromVC = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey) as! FirstViewController

        let toVC = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey) as! SecondViewController

        let container = transitionContext.containerView()

        container.addSubview(toVC.view)

        container.bringSubviewToFront(fromVC.view)

     

        //改變m34

        var transfrom = CATransform3DIdentity

        transfrom.m34 = -0.002

        container.layer.sublayerTransform = transfrom

     

        //設置anrchPoint 和 position

        let initalFrame = transitionContext.initialFrameForViewController(fromVC)

        toVC.view.frame = initalFrame

        fromVC.view.frame = initalFrame

        fromVC.view.layer.anchorPoint = CGPointMake(0, 0.5)

        fromVC.view.layer.position = CGPointMake(0, initalFrame.height / 2.0)

     

        //添加陰影效果

        let shadowLayer = CAGradientLayer()

        shadowLayer.colors = [UIColor(white: 0, alpha: 1).CGColor, UIColor(white: 0, alpha: 0.5).CGColor, UIColor(white: 1, alpha: 0.5)]

        shadowLayer.startPoint = CGPointMake(0, 0.5)

        shadowLayer.endPoint = CGPointMake(1, 0.5)

        shadowLayer.frame = initalFrame

        let shadow = UIView(frame: initalFrame)

        shadow.backgroundColor = UIColor.clearColor()

        shadow.layer.addSublayer(shadowLayer)

        fromVC.view.addSubview(shadow)

        shadow.alpha = 0

     

        //動畫

        UIView.animateWithDuration(transitionDuration(transitionContext), delay: 0, options: UIViewAnimationOptions.CurveEaseOut, animations: { () -> Void in

                fromVC.view.layer.transform = CATransform3DMakeRotation(CGFloat(-M_PI_2), 0, 1, 0)

                shadow.alpha = 1.0

            }) { (finished: Bool) -> Void in

                fromVC.view.layer.anchorPoint = CGPointMake(0.5, 0.5)

                fromVC.view.layer.position = CGPointMake(CGRectGetMidX(initalFrame), CGRectGetMidY(initalFrame))

                fromVC.view.layer.transform = CATransform3DIdentity

                shadow.removeFromSuperview()

     

                transitionContext.completeTransition(!transitionContext.transitionWasCancelled())

        }

    }

    動畫的過程我就很少說了,仔細看就會明白。

使用動畫

  • 讓 FirstViewController 遵照 UIViewControllerTransitioningDelegate 協議,並將 self.transitioningDelegate 設置爲 self。

  • 實現 UIViewControllerTransitioningDelegate 協議的兩個方法,用來指定動畫類。

     

     

    1

    2

    3

    4

    5

    6

    7

    8

    //動畫Push

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

        return BWFlipTransionPush()

    }

    //動畫Pop

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

        return BWFlipTransionPop()

    }

    OK,若是你完成了Pop動畫,那麼如今就能夠實現自定義 Modal 轉場了。如今只差手勢驅動了。

手勢驅動

  • 想要同時實現 Push 和 Pop 手勢,就須要給兩個 viewController.view 添加手勢。首先在 FirstViewController 中給本身添加一個屏幕右邊的手勢,在 prepareForSegue() 方法中給 SecondViewController.view 添加一個屏幕左邊的手勢,讓它們使用同一個手勢監聽方法。

  • 實現監聽方法,很少說,和以前同樣,但仍是有仔細看,由於本示例中轉場動畫比較特殊,並且有兩個手勢,因此這裏計算百分比使用的是 KeyWindow。同時不要忘了:UIPercentDrivenInteractiveTransition屬性。

     

     

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    func edgePanGesture(edgePan: UIScreenEdgePanGestureRecognizer) {

        let progress = abs(edgePan.translationInView(UIApplication.sharedApplication().keyWindow!).x) / UIApplication.sharedApplication().keyWindow!.bounds.width

     

        if edgePan.state == UIGestureRecognizerState.Began {

            self.percentDrivenTransition = UIPercentDrivenInteractiveTransition()

            if edgePan.edges == UIRectEdge.Right {

                self.performSegueWithIdentifier("present", sender: nil)

            } else if edgePan.edges == UIRectEdge.Left {

                self.dismissViewControllerAnimated(true, completion: nil)

            }

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

            self.percentDrivenTransition?.updateInteractiveTransition(progress)

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

            if progress > 0.5 {

                self.percentDrivenTransition?.finishInteractiveTransition()

            } else {

                self.percentDrivenTransition?.cancelInteractiveTransition()

            }

            self.percentDrivenTransition = nil

        }

    }

  • 實現 UIViewControllerTransitioningDelegate 協議的另外兩個方法,分別返回 Present 和 Dismiss 動畫的百分比。

     

     

    1

    2

    3

    4

    5

    6

    7

    8

    //百分比Push

    func interactionControllerForPresentation(animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {

        return self.percentDrivenTransition

    }

    //百分比Pop

    func interactionControllerForDismissal(animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {

        return self.percentDrivenTransition

    }

如今,基於 Modal 的自定義轉場動畫示例就完成了。獲取完整源代碼:FlipTransion

Segue

這種方法比較特殊,是將 Stroyboard 中的拖線與自定義的 UIStoryboardSegue 類綁定自實現定義轉場過程動畫。

首先咱們來看看 UIStoryboardSegue 是什麼樣的。

 

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

@availability(iOS, introduced=5.0)

class UIStoryboardSegue : NSObject {

 

    // Convenience constructor for returning a segue that performs a handler block in its -perform method.

    @availability(iOS, introduced=6.0)

    convenience init(identifier: String?, source: UIViewController, destination: UIViewController, performHandler: () -> Void)

 

    init!(identifier: String?, source: UIViewController, destination: UIViewController) // Designated initializer

 

    var identifier: String? { get }

    var sourceViewController: AnyObject { get }

    var destinationViewController: AnyObject { get }

 

    func perform()

}

以上是 UIStoryboardSegue 類的定義。從中能夠看出,只有一個方法 perform(),因此很明顯,就是重寫這個方法來自定義轉場動畫。

再注意它的其餘屬性:sourceViewController 和 destinationViewController,經過這兩個屬性,咱們就能夠訪問一個轉場動畫中的兩個主角了,因而自定義動畫就能夠爲所欲爲了。

只有一點須要注意:在拖線的時候,注意在彈出的選項中選擇 custom。而後就能夠和自定義的 UIStoryboardSegue 綁定了。

那麼,問題來了,這裏只有 perform,那 返回時的動畫怎麼辦呢?請往下看:

Dismiss

因爲 perfrom 的方法叫作:segue,那麼返回轉場的上一個控制器叫作: unwind segue

  • 解除轉場(unwind segue)一般和正常自定義轉場(segue)一塊兒出現。

  • 要解除轉場起做用,咱們必須重寫perform方法,並應用自定義動畫。另外,導航返回源視圖控制器的過渡效果不須要和對應的正常轉場相同。

其 實現步驟 爲:

  • 建立一個 IBAction 方法,該方法在解除轉場被執行的時候會選擇地執行一些代碼。這個方法能夠有你想要的任何名字,並且不強制包含其它東西。它須要定義,但能夠留空,解除轉場的定義須要依賴這個方法。

  • 解除轉場的建立,設置的配置。這和以前的轉場建立不太同樣,等下咱們將看看這個是怎麼實現的。

  • 經過重寫 UIStoryboardSegue 子類裏的 perform() 方法,來實現自定義動畫。

  • UIViewController類 提供了特定方法的定義,因此係統知道解除轉場即將執行。

固然,這麼說有一些讓人琢磨不透,不知道什麼意思。那麼,下面再經過一個示例來深刻了解一下。

Segue 示例

這個示例是我本身寫的,源代碼地址:SegueTransion,開門見山,直接上圖。

GIF演示


SegueTransion.gif

初始化

  • 建立兩個 UIViewController, 分別命名爲:FirstViewController 和 SecondViewController。並在 Storyboard 中添加兩個 UIViewController 並綁定。

  • 分別給兩個控制器添加背景圖片或使用不一樣的背景色,用以區分。在 FirstViewController 中添加一個觸發按鈕,並拖線到 SecondViewController 中,在彈出的選項中選擇custion

st_inital.png

Present

  • 添加一個 Cocoa Touch Class,繼承自 UIStoryboardSegue,取名 FirstSegue(名字請隨意)。並將其綁定到上一步中拖拽的 segue 上。

  • 重寫 FirstSegue 中的 perform() 方法,在其中編寫動畫邏輯。

     

     

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

      override func perform() {

          var firstVCView = self.sourceViewController.view as UIView!

          var secondVCView = self.destinationViewController.view as UIView!

     

          let screenWidth = UIScreen.mainScreen().bounds.size.width

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

     

          secondVCView.frame = CGRectMake(0.0, screenHeight, screenWidth, screenHeight)

          let window = UIApplication.sharedApplication().keyWindow

          window?.insertSubview(secondVCView, aboveSubview: firstVCView)

     

          UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: UIViewAnimationOptions.CurveLinear, animations: { () -> Void in

                  secondVCView.frame = CGRectOffset(secondVCView.frame, 0.0, -screenHeight)

              }) { (finished: Bool) -> Void in

                  self.sourceViewController.presentViewController(self.destinationViewController as! UIViewController,

                      animated: false,

                      completion: nil)

          }

      }

    仍是同樣,動畫的過程本身看,都是很簡單的。

Present手勢

這裏須要注意,使用這種方式自定義的轉場動畫不能動態手勢驅動,也就是說不能根據手勢百分比動態改變更畫完成度。
因此,這裏只是簡單的添加一個滑動手勢(swip)。

  • 在 FisrtViewController 中添加手勢:

     

     

    1

    2

    3

      var swipeGestureRecognizer: UISwipeGestureRecognizer = UISwipeGestureRecognizer(target: self, action: "showSecondViewController")

      swipeGestureRecognizer.direction = UISwipeGestureRecognizerDirection.Up

      self.view.addGestureRecognizer(swipeGestureRecognizer)

  • 實現手勢監聽方法:

     

     

    1

    2

    3

    func showSecondViewController() {

        self.performSegueWithIdentifier("idFirstSegue", sender: self)

    }

如今已經能夠 present 了,接下來實現 dismiss

Dismiss

  • 在 FirstViewController 中添加一個 IBAction 方法,方法名能夠隨便,有沒有返回值都隨便。

  • 在 Storyboard 中選擇 SecondViewController 按住 control鍵 拖線到 SecondViewController 的 Exit 圖標。並在彈出選項中選擇上一步添加 IBAction 的方法。

st_unwind.png

  • 在 Storyboard 左側的文檔視圖中找到上一步拖的 segue,並設置 identifier

st_unwindSegue.png

  • 再添加一個 Cocoa Touch Class,繼承自 UIStoryboardSegue,取名 FirstSegueUnWind(名字請隨意)。並重寫其 perform() 方法,用來實現 dismiss 動畫。

  • 在 FirstViewController 中重寫下面方法。並根據 identifier 判斷是否是須要 dismiss,若是是就返回剛剛建立的 FirstUnWindSegue

     

     

    1

    2

    3

    4

    5

    6

    7

    8

    9

    override func segueForUnwindingToViewController(toViewController: UIViewController, fromViewController: UIViewController, identifier: String?) -> UIStoryboardSegue {

     

        if identifier == "firstSegueUnwind" {

            return FirstUnwindSegue(identifier: identifier, source: fromViewController, destination: toViewController, performHandler: { () -> Void in

            })

        }

     

        return super.segueForUnwindingToViewController(toViewController, fromViewController: fromViewController, identifier: identifier)

    }

  • 最後一步,在 SecondViewController 的按鈕的監聽方法中實現 dismiss, 注意不是調用 self.dismiss...!

     

     

    1

    2

    3

      @IBAction func shouldDismiss(sender: AnyObject) {

          self.performSegueWithIdentifier("firstSegueUnwind", sender: self)

      }

    給 SecondViewController 添加手勢,將手勢監聽方法也設置爲以上這個方法, 參考代碼:SegueTransion

總結

一張圖總結一下3種方法的異同點。


問啊-定製化IT教育平臺,牛人一對一服務,有問必答,開發編程社交頭條 官方網站:www.wenaaa.com 下載問啊APP,參與官方懸賞,賺百元現金。

QQ羣290551701 彙集不少互聯網精英,技術總監,架構師,項目經理!開源技術研究,歡迎業內人士,大牛及新手有志於從事IT行業人員進入!

相關文章
相關標籤/搜索