自定义转场动画-小圆点扩散

效果图

mask的理解

CALayer有一个属性叫做mask。
比如imageLayer有一个maskLayer作为mask，
如果maskLayer比imageLayer要小，那默认的maskLayer之外的地方都是透明的，都不会渲染。

动画思路

1.获取Tableview点击的坐标，画一个小圆点。
2.将小圆点作为目标controller的遮罩，不断扩散到全屏。

获取坐标

1.添加单击手势

    UITapGestureRecognizer *oneTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(getTouchPoint)];
    oneTap.delegate = self;
    oneTap.numberOfTouchesRequired = 1;
    [self.tableview addGestureRecognizer:oneTap];

getTouchPoint可以不实现，反正也不会响应，不高兴看到⚠️可以写个空的。

-(void)getTouchPoint {
    
}

UIGestureRecognizer的代理方法,self.touchPoint暴露在.h，用与转场动画的设置

#pragma mark - UIGestureRecognizerDelegate
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch
{
    // 如果点击tableViewCell则不截获点击事件
    if ([NSStringFromClass([touch.view class]) isEqualToString:@"UITableViewCellContentView"]) {
        //获取点击坐标
        UIView *window = [[[UIApplication sharedApplication] delegate] window];
        self.touchPoint = [touch locationInView:window];
        return NO;
    }
    return  YES;
}

自定义push效果

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

#pragma mark --UINavigationControllerDelegate
- (id)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC {
    if (operation == UINavigationControllerOperationPush) {
        OvalTransition *ovalTransi = [OvalTransition new];
        return ovalTransi;
    }else{
        return nil;
    }
}

其中OvalTransition是遵循UIViewControllerAnimatedTransitioning协议的对象。
.h

#import 
#import 

@interface OvalTransition : NSObject 

@end

.m

#import "OvalTransition.h"
#import "OneViewController.h"
#import "TwoViewController.h"

@interface OvalTransition () 
@property (strong, nonatomic) idtransitionContext;
@end

@implementation OvalTransition
#pragma mark - UIViewControllerAnimatedTransitioning
- (NSTimeInterval)transitionDuration:(id)transitionContext {
    return 0.7;
}
- (void)animateTransition:(id)transitionContext {
    //赋值给属性,动画结束时方便传值
    self.transitionContext = transitionContext;
    OneViewController *fromVC = (OneViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    TwoViewController *toVC = (TwoViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    //获取转场时生成的转场视图view
    UIView *containerView = [transitionContext containerView];
    CGRect rect = CGRectMake(fromVC.touchPoint.x - 15 , fromVC.touchPoint.y - 15 , 30, 30);
    UIBezierPath *maskStartBP = [UIBezierPath bezierPathWithOvalInRect:rect];
    [containerView addSubview:fromVC.view];
    [containerView addSubview:toVC.view];
    //创建两个圆形的UIBezierPath实例: 一个是点击位置的30*30的小圆点,另外一个则拥有足够覆盖屏幕的半径.最终的动画是在这两个圆周路径之中进行的
    //这里的finalPoint用于计算足够覆盖屏幕的圆的半径（点击的点和他对角屏幕的连线长度）
    CGPoint finalPoint;
    //判断触发在哪一个象限
    if (rect.origin.x > (toVC.view.bounds.size.width / 2)) {
        if (rect.origin.y < (toVC.view.bounds.size.width / 2)) {
            //第一象限
            finalPoint = CGPointMake(fromVC.touchPoint.x - 0, fromVC.touchPoint.y - CGRectGetMaxY(toVC.view.bounds) + 30);
        }else{            //第四象限
            finalPoint = CGPointMake(fromVC.touchPoint.x - 0, fromVC.touchPoint.y - 0);
        }
    }else{
        if (rect.origin.y < (toVC.view.bounds.size.height / 2)) {
            //第二象限
            finalPoint = CGPointMake(fromVC.touchPoint.x - CGRectGetMaxX(toVC.view.bounds), fromVC.touchPoint.y - CGRectGetMaxY(toVC.view.bounds)+30);
        }else{
            //第三象限
            finalPoint = CGPointMake(fromVC.touchPoint.x - CGRectGetMaxX(toVC.view.bounds), fromVC.touchPoint.y - 0);
        }
    }
    //绘制大圆形
    CGFloat radius = sqrt((finalPoint.x * finalPoint.x) + (finalPoint.y * finalPoint.y));
    UIBezierPath *maskFinalBP = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(rect, -radius, -radius)];
    //创建一个 CAShapeLayer 来负责展示圆形遮盖
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.path = maskFinalBP.CGPath; //将它的 path 指定为最终的 path 来避免在动画完成后会回弹
    
    toVC.view.layer.mask = maskLayer;
    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;
}

OvalTransition还可以完善，通过枚举值来判断是push还是pop。