CoreAnimation之转场之圆圈缩放动画

先看动画效果：

圆圈转场动画.gif

间客的APP上之前是有这个动画的，拜读了大神的文章：iOS自定义转场详解03——实现通过圆圈放大缩小的转场动画,博客里面很详细。

因为要自定义转场，所以我们需要一个新的对象集成NSObject，并且遵守转场动画的协议,UIViewControllerAnimatedTransitioning

介绍个知识点：

1、CGRectInsetCGRect
CGRectInset (
CGRect rect,
CGFloat dx,
CGFloat dy);
该结构体的应用是以原rect为中心，再参考dx，dy，进行缩放或者放大。

2、CGRectOffsetCGRect
CGRectOffset(
CGRect rect,
CGFloat dx,
CGFloat dy);　
相对于源矩形原点rect（左上角的点）沿x轴和y轴偏移, 再rect基础上沿x轴和y轴偏移

// This is used for percent driven interactive transitions, as well as for
// container controllers that have companion animations that might need to
// synchronize with the main animation.
设置转场动画的时间。
- (NSTimeInterval)transitionDuration:(nullable id )transitionContext;

// This method can only  be a nop if the transition is interactive and not a percentDriven interactive transition.
转场的上下文
- (void)animateTransition:(id )transitionContext;

关于这个参数transitionContext， 该参数是一个实现了 UIViewControllerContextTransitioning可以让我们访问一些实现过渡所必须的对象。
UIViewControllerContextTransitioning 协议中有一些方法：

• (UIView *)containerView;
  //转场动画发生的容器
• (UIViewController *)viewControllerForKey:(NSString *)key;
  // 我们可以通过它拿到过渡的两个 ViewController。

大致思路是这样从，我们画两个内塞尔曲线的圆，第一个小圆的frame和右上角圆形按钮的大小一样，第二个大圆则是覆盖了整个屏幕。然后，去设置view.layer.mask属性，让这个mask从小圆动画到大圆。

以push 动画为例：pop动画不过是起终点的mask路径相反罢了。

- (void)animateTransition:(id )transitionContext{

   
    ViewController * fromVC = (ViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    DetailViewController *toVC = (DetailViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIView *contView = [transitionContext containerView];

    UIButton *button = fromVC.button;
    
    
    UIBezierPath *maskStartBP =  [UIBezierPath bezierPathWithOvalInRect:button.frame];    
    [contView addSubview:fromVC.view];
    [contView addSubview:toVC.view];

    
    
    //创建两个圆形的 UIBezierPath 实例；一个是 button 的 size ，另外一个则拥有足够覆盖屏幕的半径。最终的动画则是在这两个贝塞尔路径之间进行的
    
    CGPoint finalPoint;
    //判断触发点在那个象限
    if(button.frame.origin.x > (toVC.view.bounds.size.width / 2)){
        if (button.frame.origin.y < (toVC.view.bounds.size.height / 2)) {
            //第一象限
            finalPoint = CGPointMake(button.center.x - 0, button.center.y - CGRectGetMaxY(toVC.view.bounds)+30);
        }else{
            //第四象限
            finalPoint = CGPointMake(button.center.x - 0, button.center.y - 0);
        }
    }else{
        if (button.frame.origin.y < (toVC.view.bounds.size.height / 2)) {
            //第二象限
            finalPoint = CGPointMake(button.center.x - CGRectGetMaxX(toVC.view.bounds), button.center.y - CGRectGetMaxY(toVC.view.bounds)+30);
        }else{
            //第三象限
            finalPoint = CGPointMake(button.center.x - CGRectGetMaxX(toVC.view.bounds), button.center.y - 0);
        }
    }
    
    
    
    CGFloat radius = sqrt((finalPoint.x * finalPoint.x) + (finalPoint.y * finalPoint.y));
    UIBezierPath *maskFinalBP = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(button.frame, -radius, -radius)];
    
    
    //创建一个 CAShapeLayer 来负责展示圆形遮盖
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.path = maskFinalBP.CGPath; //将它的 path 指定为最终的 path 来避免在动画完成后会回弹
    toVC.view.layer.mask = maskLayer;
    maskLayer.backgroundColor =[UIColor redColor].CGColor;
    
    CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    maskLayerAnimation.fromValue = (__bridge id)(maskStartBP.CGPath);
    maskLayerAnimation.toValue = (__bridge id)((maskFinalBP.CGPath));
    maskLayerAnimation.duration = [self transitionDuration:transitionContext];
    maskLayerAnimation.timingFunction = [CAMediaTimingFunction  functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    maskLayerAnimation.delegate = self;
    
    [maskLayer addAnimation:maskLayerAnimation forKey:@"path"];
    
    ```
    
    
 结束动画后设置：

pragma mark - CABasicAnimation的Delegate

• (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{

  //告诉 iOS 这个 transition 完成
  [self.transitionContext completeTransition:![self. transitionContext transitionWasCancelled]];
  //清除 fromVC 的 mask
  [self.transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view.layer.mask = nil;
  [self.transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view.layer.mask = nil;

}

>自定义完push 动画后我们需要进行设置，因为所有的子控制器由UINavgationController进行管理，所有我们需要在ViewCotroller中实现代理;

@interface ViewController ()

最好在`viewWillAppear`中设置代理

-(void)viewWillAppear:(BOOL)animated{
self.navigationController.delegate = self;
}

实现代理：

pragma mark - UINavigationControllerDelegate

• (id )navigationController:(UINavigationController *)navigationController
  animationControllerForOperation:(UINavigationControllerOperation)operation
  fromViewController:(UIViewController *)fromVC
  toViewController:(UIViewController *)toVC{
  if (operation == UINavigationControllerOperationPush) {

    PingTransition *ping = [PingTransition new];
    return ping;
  

  }else{
  return nil;
  }
  }

本文demo地址：[圆圈转场动画](https://github.com/liuxinixn/CircleZoomView/tree/master)