iOS自定義轉場動畫(下)


添加 UIViewControllerAnimatedTransitioning


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

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


func animateTransition(transitionContextUIViewControllerContextTransitioning) {

    let fromVC = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey) asFirstViewController

    let toVC = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey) asSecondViewController

    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(white0, alpha1).CGColor, UIColor(white0, alpha0.5).CGColor, UIColor(white1, alpha0.5)]

    shadowLayer.startPoint = CGPointMake(0, 0.5)

    shadowLayer.endPoint = CGPointMake(1, 0.5)

    shadowLayer.frame = initalFrame

    let shadow = UIView(frameinitalFrame)

    shadow.backgroundColor = UIColor.clearColor()

    shadow.layer.addSublayer(shadowLayer)

    fromVC.view.addSubview(shadow)

    shadow.alpha = 0

 

    //動畫

    UIView.animateWithDuration(transitionDuration(transitionContext), delay0, optionsUIViewAnimationOptions.CurveEaseOut, animations{ () -> Void in

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

            shadow.alpha = 1.0

        }) { (finishedBool) -> 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 協議的兩個方法,用來指定動畫類。


//動畫Push

func animationControllerForPresentedController(presentedUIViewController, presentingController presentingUIViewController, sourceController sourceUIViewController) -> UIViewControllerAnimatedTransitioning? {

    return BWFlipTransionPush()

}

//動畫Pop

func animationControllerForDismissedController(dismissedUIViewController) -> UIViewControllerAnimatedTransitioning? {

    return BWFlipTransionPop()

}


OK,如果你完成了Pop動畫,那么現在就可以實現自定義 Modal 轉場了。現在只差手勢驅動了。


手勢驅動


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

  • 實現監聽方法,不多說,和之前一樣,但還是有仔細看,因為本示例中轉場動畫比較特殊,而且有兩個手勢,所以這里計算百分比使用的是 KeyWindow。同時不要忘了:UIPercentDrivenInteractiveTransition屬性。


func edgePanGesture(edgePanUIScreenEdgePanGestureRecognizer) {

    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", sendernil)

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

            self.dismissViewControllerAnimated(true, completionnil)

        }

    } 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 動畫的百分比。


//百分比Push

func interactionControllerForPresentation(animatorUIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {

    return self.percentDrivenTransition

}

//百分比Pop

func interactionControllerForDismissal(animatorUIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {

    return self.percentDrivenTransition

}


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


Segue


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


首先我們來看看 UIStoryboardSegue 是什么樣的。


@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(identifierString?, sourceUIViewController, destinationUIViewController, performHandler() -> Void)

 

    init!(identifierString?, sourceUIViewController, destinationUIViewController) // Designated initializer

 

    var identifierString? { get }

    var sourceViewControllerAnyObject { get }

    var destinationViewControllerAnyObject { 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演示


初始化


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

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

Present


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

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


 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, aboveSubviewfirstVCView)

 

      UIView.animateWithDuration(0.5, delay0, usingSpringWithDamping0.5, initialSpringVelocity0, optionsUIViewAnimationOptions.CurveLinear, animations{ () -> Void in

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

          }) { (finishedBool) -> Void in

              self.sourceViewController.presentViewController(self.destinationViewController asUIViewController,

                  animatedfalse,

                  completionnil)

      }

  }


還是一樣,動畫的過程自己看,都是很簡單的。


Present手勢


這里需要注意,使用這種方式自定義的轉場動畫不能動態手勢驅動,也就是說不能根據手勢百分比動態改變動畫完成度。

所以,這里只是簡單的添加一個滑動手勢(swip)。


  • 在 FisrtViewController 中添加手勢:


var swipeGestureRecognizerUISwipeGestureRecognizer = UISwipeGestureRecognizer(targetself, action"showSecondViewController")

  swipeGestureRecognizer.direction = UISwipeGestureRecognizerDirection.Up

  self.view.addGestureRecognizer(swipeGestureRecognizer)


  • 實現手勢監聽方法:

func showSecondViewController() {

    self.performSegueWithIdentifier("idFirstSegue", senderself)

}


現在已經可以 present 了,接下來實現 dismiss。


Dismiss


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

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

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

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

  • 在 FirstViewController 中重寫下面方法。並根據 identifier 判斷是不是需要 dismiss,如果是就返回剛剛創建的 FirstUnWindSegue。


override func segueForUnwindingToViewController(toViewControllerUIViewController, fromViewControllerUIViewController, identifierString?) -> UIStoryboardSegue {

 

    if identifier == "firstSegueUnwind" {

        return FirstUnwindSegue(identifieridentifier, sourcefromViewController, destinationtoViewController, performHandler{ () -> Void in

        })

    }

 

    return super.segueForUnwindingToViewController(toViewController, fromViewControllerfromViewController, identifieridentifier)

}


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


 @IBAction func shouldDismiss(senderAnyObject) {

      self.performSegueWithIdentifier("firstSegueUnwind", senderself)

  }


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


總結


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





注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com