iOS开发——圆形过渡动画

前言

在一款新的app——Ping中，用户可以订阅自己感兴趣的主题，该应用会向用户推送相关的文章或段落。该应用在视图的切换时采用了一个非常炫酷的动画效果，如下图所示：

现在我们就来实现这一效果。总的来说，所用到的知识点有：
1、使用代理UIViewControllerAnimatedTransitioning实现控制器间的自定义动画
2、使用UIShapeLayer创建一个特定形状的层
3、配合mask效果实现视图的切换
4、使用手势与UIPercentDrivenInteractiveTransition实现可控过程的交互。

实现思路

结构分析

首先，这里的切换效果是控制器间的过渡效果，并且是基于UINavigationContoller的，因为我们需要通过导航控制器的代理来实现。8.0以后，UINavigationController提供了一个代理UINavigationControllerDelegate可以让我们对控制器间的pop、push过程进行控制，代理中有一个方法：

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

这个方法的返回值是一个实现了UIViewControllerAnimatedTransitioning协议的对象，这是我们项目中另外一个协议。用它可以控制动画时间、编写自定义动画流程、对动画完成后的资源进行回收处理等。

总的来说，我们需要的东西有：
1、两个控制器供切换
2、一个UINavigationControllerDelegate对象控制视图控制器的切换流程
3、一个UIViewControllerAnimatedTransitioning对象提供具体的动画

功能分析

当另一个控制器将要展示内容时，从上图可以看到，首先从右上角出现一个圆形，圆形不断放大，将要展示的内容就在圆形中，圆形之外依然是原来控制器的内容。动画过程中，这个圆形不断放大，随着它的增大，新内容也就慢慢出来了。换句话说，这个圆形的作用就是展示范围内的，屏蔽范围外的。

这里用遮挡层来实现是再好不过了，mask属性就决定着这一遮挡过程。当然了mask需要一个CALayer对象，这里也说过，这个过程中出现的是圆形，对于特定的形状，CAShapeLayer就能方便的解决问题了。

具体实现

有了思路，实现起来就简单了。首先要准备好两个控制器，基本的要求就是提供一个按钮可以用来视图切换即可：

这里从左到右依次是UINavigationController、ViewController、ViewController，右上角的按钮（圆角效果）用来切换，图片的位置乱是由于使用了auto layout，加上只有一张图片，懒得调了:]

第一步，动画的实现
既然动画的具体过程是由UIViewControllerAnimatedTransitioning对象来实现的，那么我们先创建这个对象。UIViewControllerAnimatedTransitioning是一个协议，该协议中有两个必须方法和一个可选方法：

func transitionDuration(transitionContext: UIViewControllerContextTransitioning) -> NSTimeInterval
func animateTransition(transitionContext: UIViewControllerContextTransitioning)
optional func animationEnded(transitionCompleted: Bool)

按照上面说的，我们单独建一个类，让新类实现该协议，并编写这三个方法：

class CircleTransitionAnimator: NSObject, UIViewControllerAnimatedTransitioning {

    //context contains fromViewController、toViewController、containView etc.
    //We keep a reference here to get the context during