随便说两句
最近在学习iOS中的动画，一直想把学习的东西记录下来，由于太懒了，一直没有动手来写。正好最近喜欢用的一款app（谈资）里面有一个自定义的转场动画效果不错，自己动手实现了一下。这也是我第一次在简书上面写文章，作为一个刚做iOS不久的菜鸟，写的不好的大家随便看看。。我尽量用我自己的话来描述动画该如何完成，从我认为好理解的角度来写，因为很多资料网上都有了，官方的教程或者是别的书里面的我就不贴了（或者有时间再贴）。因为这篇文章介绍的是最基础的自定义转场动画，不包括交互什么的，所以后面应该还会有更进一步的。还有这篇没有太多的理论，如果涉及到理论的话，东西可能太多了，后面我把翻译的文章加上来，里面大部分就是理论的东西了。如果能对一个人有帮助，也不算白写啦！
好了，废话不多说，开始写！
最终效果
这篇文章最终要完成的一个效果如下图：
tanzi.gif
自定义转场动画：
iOS7开始苹果的API中提供了自定义的转场动画，在模态视图present，dismiss，导航视图pop，push还有TabbarController的标签视图切换都可以自定义转场的动画，这篇文章介绍的是模态视图的自定义转场动画。
思路
自定义转场动画思路
要完成一个自定义的转场动画，思路其实很简单，大的步骤主要是两步：
- 需要一个遵循UIViewControllerTransitioningDelegate协议的对象来提供动画控制器（具体动画如何实现的类）。
- 创建一个遵循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，以后争取一个星期写一篇来记录学习的知识。。。好久没写过字了，见谅。
网友评论