iOS 动画指南 - 6. 可以很酷的转场动画

KeyChan
2,961 阅读9分钟

在iOS开发中,界面间的跳转其实也就是控制器的跳转,跳转有很多种,最常用的有push,modal.

  • modal:任何控制器都能通过Modal的形式展⽰出来.效果:新控制器从屏幕的最底部往上钻，直到盖住之前的控制器为⽌.系统也会带有一个动画.
public func presentViewController(viewControllerToPresent: UIViewController, animated flag: Bool, completion: (() -> Void)?)
public func dismissViewControllerAnimated(flag: Bool, completion: (() -> Void)?)
  • push: 在push中,控制器的管理其实交给了UINavigationController,所以在push控制器的时候必须拿到对应的导航控制器. 效果:从右往左出现,系统会带有一个默认动画.
public func pushViewController(viewController: UIViewController, animated: Bool) 
public func popViewControllerAnimated(animated: Bool) -> UIViewController?

push和model都有系统提供转场动画效果,但有时系统提供的不一定能满足开发需求,这就需要去自定义,说实话自定义转场动画还是有些麻烦的.但原理其实很简单.

转场动画的原理:

当两个控制器发生push.pop或modal.dismiss的时候,系统会把原始的控制器放到负责转场的控制器容器中,也会把目标控制器放进去,但是目标控制器是不可见的,因此我们要做的就是把新的控制器显现出来,把老的控制器移除掉.很简单吧!

上面大概介绍了一下控制器的切换及原理,这篇文章我们打算说说自定义转场动画,一个push一个modal,虽然自定义modal转场动画用的比较多一点,但push也可以了解一下嘛!
先来看下效果,然后准备上车:


自定义modal转场动画


自定义push转场动画

1.自定义modal转场动画

1.简单的modal效果:



很简单的modal效果,首先有一个主控制器,主控制器底部有一个scrollView,对scrollView里面图片添加手势监听,并在监听方法里面modal一个背景图片一样的控制器,这样就可以开始自定义转场动画啦!

2.设置转场动画的代理:

  1. 新建一个继承 NSObject, UIViewControllerAnimatedTransitioning的PopAnimator文件,用于设置转场动画的代理方法,在里面添加UIViewControllerAnimatedTransitioning协议必须要实现的两个代理方法:
    // 设置转场动画持续时间
func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval {
   return 0
}
// 执行转场动画
func animateTransition(transitionContext: UIViewControllerContextTransitioning) {  
}

  2. 在ViewController(主控制器)中设置herbDetailsVc(每张图片对应的控制器)的 transitioningDelegate为自己,为刚刚新建的文件设置一个常量 let transition = PopAnimator(),新建一个extension遵守代理UIViewControllerTransitioningDelegate

    extension ViewController: UIViewControllerTransitioningDelegate {

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

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

    如果返回nil,那就使用系统默认的转场动画.

3. 创建转场动画.

在PopAnimator的transitionDuration:方法中设置好时间.设定转场动画的内容

  func animateTransition(transitionContext: UIViewControllerContextTransitioning) {

        // 获得容器
        let containerView = transitionContext.containerView()!
        // 获得目标view
        // viewForKey 获取新的和老的控制器的view
        // viewControllerForKey 获取新的和老的控制器
        let toView = transitionContext.viewForKey(UITransitionContextToViewKey)!

        containerView.addSubview(toView)
        toView.alpha = 0.0

        UIView.animateWithDuration(duration, animations: { () -> Void in
            toView.alpha = 1.0
            }) { (_) -> Void in
                // 转场动画完成
            transitionContext.completeTransition(true)
        }
    }

内容是:通过修改透明度,达到一个渐变的效果,如下图所示.



这样一个简单的转场效果就实现啦!是不是很简单,只是这还不是我们想要的效果.

4.左上角弹出效果

注意:这一步是在第3步的基础上修改的.在设置PopAnimator中添加 var presenting = true.用于判断到底是弹出控制器,还是后退,因为前进和后退都会调用animateTransition这个代理方法.下一个实现效果虽然用不到,但我们先这样去设置.
还要设置一个 var originFrame = CGRect.zero 用于设置目的控制器的frame,将animateTransition中原来的代码更改为如下

 func animateTransition(transitionContext: UIViewControllerContextTransitioning) {

        // 获得容器
        let containerView = transitionContext.containerView()!
        // 获得目标view
        // viewForKey 获取新的和老的控制器的view
        // viewControllerForKey 获取新的和老的控制器
        let toView = transitionContext.viewForKey(UITransitionContextToViewKey)!
        let fromView = transitionContext.viewForKey(UITransitionContextFromViewKey)!

        // 拿到需要做动画的view
        let herbView = presenting ? toView : fromView

        // 获取初始和最终的frame
        let initialFrame = presenting ? originFrame : herbView.frame
        let finalFrame = presenting ? herbView.frame : originFrame

        // 设置收缩比率
        let xScaleFactor = presenting ? initialFrame.width / finalFrame.width : finalFrame.width / initialFrame.width
        let yScaleFactor = presenting ? initialFrame.height / finalFrame.height : finalFrame.height / initialFrame.height
        let scaleTransform = CGAffineTransformMakeScale(xScaleFactor, yScaleFactor)
        // 当presenting的时候,设置herbView的初始位置
        if presenting {
            herbView.transform = scaleTransform
            herbView.center = CGPoint(x: CGRectGetMidX(initialFrame), y: CGRectGetMidY(initialFrame))
            herbView.clipsToBounds = true
        }

        containerView.addSubview(toView)
        // 保证在最前,不然添加的东西看不到哦
        containerView.bringSubviewToFront(herbView)

        // 加了个弹性效果
        UIView.animateWithDuration(duration, delay: 0.0, usingSpringWithDamping: 0.4, initialSpringVelocity: 0.0, options: [], animations: { () -> Void in

            herbView.transform = self.presenting ? CGAffineTransformIdentity : scaleTransform
            herbView.center = CGPoint(x: CGRectGetMidX(finalFrame), y: CGRectGetMidY(finalFrame))

            }) { (_) -> Void in
                transitionContext.completeTransition(true)
        }
    }

效果如下:


仔细观察发现无论是presentViewController还是dismissViewController视图都是从左上角弹出来的.因为我们将originFrame设置为CGRect.zero了.



5. 最终效果实现.

刚刚我们把originFrame设置为了CGRect.zero,但我们可以拿到目标控制器的原始尺寸啊,这样就不会突兀的从左上角弹出来了.

1.在ViewController的extension里面添加修改如下代码
    func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? {

        transition.originFrame = selectedImage!.superview!.convertRect(selectedImage!.frame, toView: nil)
        transition.presenting = true
        selectedImage!.hidden = true

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

        transition.presenting = false
        return transition
    }
2.当dismiss的时候,刚点击的图片会消失,因为我们在modal的时候设置为了隐藏,所以在dismiss完成后要将selectedImage显示出来.可以这样做,在PopAnimator中添加一个闭包
    var dismissCompletion: (()->())?

然后在animateTransition的UIView.animateWithDuration完成闭包中调用

UIView.animateWithDuration(duration, delay: 0.0, usingSpringWithDamping: 1, initialSpringVelocity: 0.0, options: [], animations: { () -> Void in

            herbView.transform = self.presenting ? CGAffineTransformIdentity : scaleTransform
            herbView.center = CGPoint(x: CGRectGetMidX(finalFrame), y: CGRectGetMidY(finalFrame))

            }) { (_) -> Void in
                if !self.presenting {
                    self.dismissCompletion?()
                }
                transitionContext.completeTransition(true)
        }

最后在ViewController中的viewDidLoad中实现

 transition.dismissCompletion = {
            self.selectedImage!.hidden = false
        }

3.由于scrollview上的图片有圆角,所以在转场动画中我们也要实现图片圆角与控制器直角的切换.
在PopAnimator中的animateTransition方法中添加如下代码:

        // 设置圆角
        let round = CABasicAnimation(keyPath: "cornerRadius")
        round.fromValue = !presenting ? 0.0 : 20.0/xScaleFactor
        round.toValue = presenting ? 0.0 : 20.0/xScaleFactor
        round.duration = duration / 2
        herbView.layer.addAnimation(round, forKey: nil)
        herbView.layer.cornerRadius = presenting ? 0.0 : 20.0/xScaleFactor

最终自定义modal转场效果就完成啦!


自定义modal转场动画

2. 自定义push转场动画

相比自定义modal转场动画,自定义push转场动画的场景不是很多,原理其实都差不多的.

1. 简单的push效果.

push是需要导航控制器的,所以在AppDelegate中加载控制器的时候,给它套一个导航控制器.代码中,ViewController和DetailViewController就是对应切换的两个控制器.
给ViewController添加一个手势监听进行跳转.


2.老样子,设置转场动画的代理

  1. 新建一个继承 NSObject, UIViewControllerAnimatedTransitioning的RevealAnimator文件,用于设置转场动画的代理方法,在里面添加UIViewControllerAnimatedTransitioning协议必须要实现的两个代理方法:

    let animationDuration = 2.0
// 用于判断push或者pop
var operation: UINavigationControllerOperation = .Push

// 设置转场动画持续时间
func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval {
   return 0
}
// 执行转场动画
func animateTransition(transitionContext: UIViewControllerContextTransitioning) {  
}

  2. 在ViewController文件中的viewDidLoad方法中拿到导航控制器将它设置为代理

         navigationController?.delegate = self

    在ViewController文件中添加一个转场动画控制器容器属性

     let transition = RevealAnimator()

    在ViewController文件中添加一个extension,实现代理方法

    extension ViewController : UINavigationControllerDelegate { 
 /**
  - parameter navigationController: 拿到设置代理的导航控制器
  - parameter operation:            .Push .Pop
  - parameter fromVC:               原来的控制器
  - parameter toVC:                 目标控制器
  - returns: 返回设置好的转场动画
  */
 func navigationController(navigationController: UINavigationController, animationControllerForOperation operation: UINavigationControllerOperation, fromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {

     transition.operation = operation
     return transition
 }
}

3.添加转场动画

  1. 在RevealAnimator中添加一个变量保存animateTransition方法的transitionContext,以后会用到

     weak var storedContext: UIViewControllerContextTransitioning?

    老样子在animateTransition添加一些初始化代码

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

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

         transitionContext.containerView()?.addSubview(toVC.view)

  2. 添加LOGO的放大动画
    1.新建一个RWLogoLayer文件,用贝塞尔曲线画出logo

    import UIKit
class RWLogoLayer {
 class func logoLayer() -> CAShapeLayer {
     let layer = CAShapeLayer()
     layer.geometryFlipped = true

     let bezier = UIBezierPath()
     bezier.moveToPoint(CGPoint(x: 0.0, y: 0.0))
     bezier.addCurveToPoint(CGPoint(x: 0.0, y: 66.97), controlPoint1:CGPoint(x: 0.0, y: 0.0), controlPoint2:CGPoint(x: 0.0, y: 57.06))
     bezier.addCurveToPoint(CGPoint(x: 16.0, y: 39.0), controlPoint1: CGPoint(x: 27.68, y: 66.97), controlPoint2:CGPoint(x: 42.35, y: 52.75))
     bezier.addCurveToPoint(CGPoint(x: 26.0, y: 17.0), controlPoint1: CGPoint(x: 17.35, y: 35.41), controlPoint2:CGPoint(x: 26, y: 17))
     bezier.addLineToPoint(CGPoint(x: 38.0, y: 34.0))
     bezier.addLineToPoint(CGPoint(x: 49.0, y: 17.0))
     bezier.addLineToPoint(CGPoint(x: 67.0, y: 51.27))
     bezier.addLineToPoint(CGPoint(x: 67.0, y: 0.0))
     bezier.addLineToPoint(CGPoint(x: 0.0, y: 0.0))
     bezier.closePath()

     layer.path = bezier.CGPath
     layer.bounds = CGPathGetBoundingBox(layer.path)

     return layer
 }
}

  3. 设置RWLogoLayer的位置尺寸,分别添加到fromVC和toVC上
    在ViewController的viewDidAppear中添加

         logo.position = CGPoint(x: view.layer.bounds.size.width/2,
         y: view.layer.bounds.size.height/2 + 30)
     logo.fillColor = UIColor.whiteColor().CGColor
     view.layer.addSublayer(logo)

    在DetailViewController的viewDidLoad中添加

    maskLayer.position = CGPoint(x: view.layer.bounds.size.width/2, y: view.layer.bounds.size.height/2)
     view.layer.mask = maskLayer

    这边有个注意点,记得添加

    override func viewDidAppear(animated: Bool) {
     super.viewDidAppear(animated)

     view.layer.mask = nil
 }

    移除mask

  4. 设置动画,在RevealAnimator的animateTransition方法中添加

             let animation = CABasicAnimation(keyPath: "transform")
         animation.fromValue = NSValue(CATransform3D: CATransform3DIdentity)
         // 添加一个阴影效果
         animation.toValue = NSValue(CATransform3D:CATransform3DConcat(CATransform3DMakeTranslation(0.0, -10.0, 0.0), CATransform3DMakeScale(150.0, 150.0, 1.0)))

         animation.duration = animationDuration
         animation.delegate = self
         animation.fillMode = kCAFillModeForwards
         animation.removedOnCompletion = false
         animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)

         // 同时添加到两个控制器上
         toVC.maskLayer.addAnimation(animation, forKey: nil)
         fromVC.logo.addAnimation(animation, forKey: nil)

         // 给目的控制器设置一个渐变效果
         let fadeIn = CABasicAnimation(keyPath: "opacity")
         fadeIn.fromValue = 0.0
         fadeIn.toValue = 1.0
         fadeIn.duration = animationDuration
         toVC.view.layer.addAnimation(fadeIn, forKey: nil)


    到这里push的转场效果基本完成了,但会发现还有问题,在自定义modal转场动画的时候,当转场动画完成后 需要设置transitionContext.completeTransition(true),而这边也是,这样做是为了在pop的之前把该清理的都清理掉.so重写animationDidStop

     override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
     if let context = storedContext {   
         context.completeTransition(!context.transitionWasCancelled())
         let fromVc = context.viewControllerForKey(UITransitionContextFromViewControllerKey) as! ViewController
         fromVc.logo.removeAllAnimations()
     }
     storedContext = nil
 }

  5. push已经完成啦!现在当我们点击左上角的start按钮返回时会发生崩溃,是因为我们没有在RevealAnimator的animateTransition方法中作判断,到底是push还是pop.
    定义一个属性判断是pop还是push,将animateTransition中push相关的代码放到push判断语句中去

     var operation: UINavigationControllerOperation = .Push
         if operation == .Push { // push

     }else { // pop

     }

  6. 给pop添加一个缩小的效果

             let fromView = transitionContext.viewForKey(UITransitionContextFromViewKey)!
         let toView = transitionContext.viewForKey(UITransitionContextToViewKey)!

         transitionContext.containerView()?.insertSubview(toView, belowSubview: fromView)

         UIView.animateWithDuration(animationDuration, delay: 0.0, options: .CurveEaseIn, animations: {
             fromView.transform = CGAffineTransformMakeScale(0.01, 0.01)
             }, completion: {_ in
                 transitionContext.completeTransition(!transitionContext.transitionWasCancelled())
         })

至此,就完成啦!不过离最终效果还有一定距离!

4.根据滑动手势切换控制器

  1. 在ViewController底部添加一个label,设置好滑动解锁这几个字,这只是提醒,我们的会为整个view添加滑动手势的.
  2. 将ViewController的点击监听事件改为拖动事件.
     let pan = UIPanGestureRecognizer(target: self, action: Selector("didPan:"))
     view.addGestureRecognizer(pan)
    func didPan(recognizer: UIPanGestureRecognizer) {
 }
  3. 根据滑动的偏移量来调整转场动画的进度,也就是说转场动画要是可以交互的.之前所有的转场动画都是开始后,自动结束,不会随着人的交互而发生任何改变.所以原来的方法不能满足需要.
    这时需要在ViewController的extension中添加
    // 返回一个可以交互的转场动画
 func navigationController(navigationController: UINavigationController, interactionControllerForAnimationController animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? { 
     if !transition.interactive {
         return nil
     }
     return transition
 }
    在RevealAnimator中添加一个属性,用于设置是否可以交互
     // 是否需要交互
 var interactive = false
    4.在ViewController的didPan方法中添加手势识别,这边只处理一部分,其余的传到RevealAnimator中进行
      switch recognizer.state {
     case .Began:
         transition.interactive = true
         navigationController?.pushViewController(DetailViewController(), animated: true)
     default:
         transition.handlePan(recognizer)
     }
    5.在RevealAnimator的handlePan方法中,根据偏移量计算progress
    func handlePan(recognizer: UIPanGestureRecognizer) {
     let translation = recognizer.translationInView(recognizer.view!.superview!)
     var progress: CGFloat = abs(translation.x / 200.0)
     progress = min(max(progress, 0.01), 0.99)
     switch recognizer.state {
     case .Changed:
         // 更新当前转场动画播放进度
         updateInteractiveTransition(progress)
     case .Cancelled, .Ended:
         if operation == .Push { // push
             let transitionLayer = storedContext!.containerView()!.layer
             transitionLayer.beginTime = CACurrentMediaTime()
             if progress < 0.5 {
                 completionSpeed = -1.0
                 cancelInteractiveTransition() // 停止转场动画,回到from状态
             } else {
                 completionSpeed = 1.0
                 finishInteractiveTransition() // 完成转场动画,到to状态
             }
         } else { // pop
             if progress < 0.5 {
                 cancelInteractiveTransition()
             } else {
                 finishInteractiveTransition()
             }
         }
         // 使得返回可交互的转场动画为nil,重置动画
         interactive = false
     default:
         break
     }
 }

    自定义push转场动画

至此自定义push的转场动画也完成啦!

虽然转场动画不难,但从头到尾这一整套逻辑,还是有点繁琐的,可能有的同学看的有些蒙圈,这是很正常的,因为知识是网状的啊,线性的逻辑表述并不能表达清楚网状知识的每一个连接! so,我在下面给出了源码,给有兴趣推敲的同学.

本文整理自 : iOS.Animations.by.Tutorials.v2.0
源码 : github.com/DarielChen/…
如有疑问,欢迎留言 :-D

avatar
文章
阅读
粉丝