iOS动画之自定义转场动画(一)

随便说两句

最近在学习iOS中的动画，一直想把学习的东西记录下来，由于太懒了，一直没有动手来写。正好最近喜欢用的一款app（谈资）里面有一个自定义的转场动画效果不错，自己动手实现了一下。这也是我第一次在上面写文章，作为一个刚做iOS不久的菜鸟，写的不好的大家随便看看。。我尽量用我自己的话来描述动画该如何完成，从我认为好理解的角度来写，因为很多资料网上都有了，官方的教程或者是别的书里面的我就不贴了（或者有时间再贴）。因为这篇文章介绍的是最基础的自定义转场动画，不包括交互什么的，所以后面应该还会有更进一步的。还有这篇没有太多的理论，如果涉及到理论的话，东西可能太多了，后面我把翻译的文章加上来，里面大部分就是理论的东西了。如果能对一个人有帮助，也不算白写啦！

好了，废话不多说，开始写！

最终效果

这篇文章最终要完成的一个效果如下图：

tanzi.gif

自定义转场动画：

iOS7开始苹果的API中提供了自定义的转场动画，在模态视图present，dismiss，导航视图pop，push还有TabbarController的标签视图切换都可以自定义转场的动画，这篇文章介绍的是模态视图的自定义转场动画。

思路

自定义转场动画思路

要完成一个自定义的转场动画，思路其实很简单，大的步骤主要是两步：

1. 需要一个遵循UIViewControllerTransitioningDelegate协议的对象来提供动画控制器（具体动画如何实现的类）。
2. 创建一个遵循UIViewControllerAnimatedTransitioning协议的动画控制器，来控制转场的动画具体该如何进行。

动画实现思路

要实现像上图中的效果，我的思路是为即将出现的view（或者即将消失）的layer创建一个mask（CAShapeLayer），这个mask通过UIBezierPath来绘制，比如当我们点击左边的按钮present出新的视图时，mask最初的path是以按钮中心为原点，半径为0的贝塞尔曲线，而当转场结束，mask的最终path是以按钮中心为原点，以按钮中心到屏幕右上角距离为半径的贝塞尔曲线，使用CABasicAnimation以mask layer的path作为动画的keyPath，就可以产生一个逐渐变大的圆形效果。具体的关于CALayer和CABasicAnimation由于不是这篇文章的重点，这里就不详细说了。

具体实现

要实现上图效果，首先创建三个控制器:
ViewController，LeftViewController，RightViewController
我们让ViewController遵循UIViewControllerTransitioningDelegate协议，

1.提供动画控制器

当点击了ViewController中的左边的按钮时，present出LeftViewController，需要设置LeftViewController的transitioningDelegate为self，这就是思路1中说的，即self对象(ViewController)将为自定义转场来提供动画控制器。

let leftVC = UIStoryboard(name: "Main",bundle:NSBundle.mainBundle()).instantiateViewControllerWithIdentifier("leftVC")
leftVC.transitioningDelegate = self
self.presentViewController(leftVC, animated: true) {
}

ViewController作为LeftViewController的transitioningDelegate，需要（不是必须，UIViewControllerTransitioningDelegate中所有的方法都是可选的）提供控制转场的动画控制器。创建一个Animator类继承自NSObject，遵循UIViewControllerAnimatedTransitioning协议，具体的Animator类的实现下一步会说，下面的代码是提供Animator对象，因为对于present和dismiss都是提供的同一个animator对象，所以在Animator类中声明了一个presenting属性来判断当前的动画是present，还是dismiss

extension ViewController: UIViewControllerTransitioningDelegate {
//提供用来present模态视图的转场动画控制器
func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    animator.presenting = true
    return animator
}
//提供用来dismiss模态视图的转场动画控制器
func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    animator.presenting = false
    return animator
}
}

2.动画控制器Animator的实现

Animator类是我们创建用来控制动画的具体实现的类，也是自定义转场动画中最关键的类，Animator类需要先遵循UIViewControllerAnimatedTransitioning协议，该协议中有两个必须要实现的方法：

//动画的持续时间
public func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval
//动画的具体实现
public func animateTransition(transitionContext: UIViewControllerContextTransitioning)

下面是Animator类具体实现的代码：

enum PresentSide {
    case Left
    case Right
 }

class Animator: NSObject ,UIViewControllerAnimatedTransitioning{
//判断present或dismiss
var presenting: Bool = true
//左右两个按钮
var side: PresentSide!
var animationCenter: CGPoint!

//下面这些变量都是通过代理方法提供的transitionContext来获取的
//我将他们都声明成属性，为了后面使用方便点。
var transitionContext: UIViewControllerContextTransitioning!
var containView: UIView!
var fromView: UIView!
var toView: UIView!
var fromVC: UIViewController!
var toVC: UIViewController!

var maskLayer: CAShapeLayer!

let bounds: CGRect = UIScreen.mainScreen().bounds

func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval {
    return 0.5
}

/*
这个方法提供的是动画的具体实现，在这个方法中
我们可以获取到所有跟转场有关系的对象
然后可以对这些对象进行动画，比如对转场后的view，可以进行
平移，缩放，旋转等transform，也可以对view的layer加入各种动画
*/

func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
    /*通过transitionContext我们可以获取到所有跟转场有关系的对象，包括
    * 转场视图的容器：containView
    * 转场前的ViewController（fromVC)
    * 转场后的ViewController（toVC)
    * 转场前的视图 fromView
    * 转场后的视图 toView
    */
    self.transitionContext = transitionContext
    containView = transitionContext.containerView()
    fromVC = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)!
    toVC = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)!
    fromView = transitionContext.viewForKey(UITransitionContextFromViewKey)!
    toView = transitionContext.viewForKey(UITransitionContextToViewKey)!
    
    //让toView的frame变为转场结束后最终的frame
    toView.frame = transitionContext.finalFrameForViewController(toVC)
    //layer
    maskLayer = CAShapeLayer()
    
    //animation
    let animation = CABasicAnimation(keyPath: "path")
    animation.duration = transitionDuration(transitionContext)
    animation.delegate = self
    if presenting { //当前是present模态视图

        /*containView作为转场动画中视图的容器   
         我们如果要对哪个视图进行动画
         就需要把这个视图加入到containView中。
         当在present模态视图的时候，我们需要处理的是即将要展示的View的layer，所以需要加入toView*/
        containView?.addSubview(toView)
       
       //path的初始值
        animation.fromValue = UIBezierPath(arcCenter: animationCenter,
                                           radius: 0,
                                           startAngle: 0,
                                           endAngle: CGFloat(M_PI*2),
                                           clockwise: true).CGPath
        //path的结束值
        animation.toValue = UIBezierPath(arcCenter: animationCenter,
                                         radius: radius(),
                                         startAngle: 0.0,
                                         endAngle: CGFloat(M_PI*2),
                                         clockwise: true).CGPath
        //动画结束之后，我们需要保持动画后的效果，
        //所以需要加入下面两句，如果不加，会有一些不想要的东西（可以自己试一下。。）
        animation.fillMode = kCAFillModeForwards
        animation.removedOnCompletion = false

        toView.layer.mask = maskLayer
    }else{//当前是dismiss模态视图

        //这边跟上面是一样的，只是dismiss的时候，属性的初始值不同,作为mask的圆是从大变小的。
        containView.addSubview(toView)
        containView.addSubview(fromView)
        animation.fromValue = UIBezierPath(arcCenter: animationCenter,
                                           radius: radius(),
                                           startAngle: 0.0,
                                           endAngle: CGFloat(M_PI*2),
                                           clockwise: true).CGPath
        animation.toValue = UIBezierPath(arcCenter: animationCenter,
                                         radius: 0,
                                         startAngle: 0,
                                         endAngle: CGFloat(M_PI*2),
                                         clockwise: true).CGPath
        
        fromView.layer.mask = maskLayer
    }
    
    maskLayer.addAnimation(animation, forKey: nil)
    
}


//动画结束后，必须要调用completeTransition方法来结束转场动画，不然会阻塞
override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
    if presenting {
        maskLayer.removeFromSuperlayer()
    }else{
        //这里处理的是按钮大小根据点击变化的动画，与转场没有直接关系
        let clickedBtn = side == .Left ? (toVC as! ViewController).leftBtn : (toVC as! ViewController).rightBtn
        UIView.animateWithDuration(0.3, animations: {
            clickedBtn.transform = CGAffineTransformMakeScale(1, 1)
        })
    }
    //*** 这个方法在转场动画结束后一定要手动调用！
    transitionContext.completeTransition(true)
}
}


extension Animator {

func radius() -> CGFloat{
    
    let width = bounds.size.width
    let radius: CGFloat
    if side == .Left {
        radius = sqrt(CGFloat(animationCenter.x * animationCenter.x + animationCenter.y * animationCenter.y))
    }else{
        let x = animationCenter.x - width
        radius = sqrt(CGFloat(x * x + animationCenter.y * animationCenter.y))
    }
    return radius
}
}

这就是完成最开始效果的自定义转场动画的基本代码，具体的代码可以到这里下载：
代码

总结：

关于自定义转场动的实现，最主要的的就是转场动画控制器（上面的Animator）的具体实现部分，这一部分的思路就是我们拿到转场前和转场后的view，对view的动画就可以按照正常的思路，想加入各种动画都可以。

资料：
如果想要研究一下转场动画，或者Core Animation的原理的，可以去看看这些资料：

《iOS Core Animation: Advanced Techniques》
RayWenderlich的博客
《iOS.Animations.by.Tutorials.v2.0》
当然还有官方文档:
Customizing the Transition Animations

RayWenderlich的博客里面写的非常好，还有书也很不错，可惜太贵了（我上网上找的，原谅我确实买不起）还有就是都是英文的，如果有需要pdf的可以找我要，就不在这里发了。

OK，以后争取一个星期写一篇来记录学习的知识。。。好久没写过字了，见谅。