CoreAnimation | 核心动画 | 自定义转场动画

效果展示

自定义转场动画效果

实现思路

1. 实现UINavigationControllerDelegate，利用一个类去定义我们的转场动画
2. 利用贝塞尔话两个圆，一个小圆一个大圆，他们的中心都是一样的，然后根据不同的界面做对应的放大和缩小动画

总结 : 1.实现相关转场动画协议 2.就是添加转场动画

准备工作

#import "DNCircleTransition.h" 
@interface ViewController ()<UINavigationControllerDelegate>

需要实现的控制器需要实现的协议和注意点

1. 需要创建一个类来实现一个UIViewControllerAnimatedTransitioning 这个协议
2. 当前的控制器需要遵从UINavigationControllerDelegate 协议
3. 需要在控制器将要显示的时候设置代理，不然不会走代理方法

补充:DNCircleTransition 这个类是NSObject类 里面遵从了UIViewControllerAnimatedTransitioning这个协议

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

实现的代理方法

#pragma mark - UINavigationControllerDelegate
//就是告诉nav，我不需要自带的转场动画了，我想自定义转场动画
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC{
    if (operation == UINavigationControllerOperationPush) {
        DNCircleTransition *trans = [DNCircleTransition new];
        trans.isPush = YES;
        return trans;
    }else{
        return nil;
    }
}

• 重点: 就是告诉nav，我不需要自带的转场动画了，我想自定义转场动画

DNCircleTransition 需要实现的事情

• Mark - UIViewControllerContextTransitioning

//转场动画的时间
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext{
    return .8f;
}

1. 这个是转场动画的时间设置

• 核心代码

//在此方法中实现具体的转场动画
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{
    /*
     拆分：
     1.2个圆（重点：半径，中心点）
     2.添加动画
     */
    //1.持有上下文
    _context = transitionContext;
    //2.获取一个view的容器
    UIView *containerView = [transitionContext containerView];
    //3.获取tovc的view，然后添加到容器里面
    UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
//    [containerView addSubview:toVC.view];
    //4.添加动画
    UIButton *btn;
    ViewController *VC1;
    DNBlackViewController *VC2;
    if (_isPush) {
        VC1 = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
        VC2 = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
        btn = VC1.blackBtn;

    }else{
        VC2 = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
        VC1 = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
        btn = VC2.redBtn;
    }
    [containerView addSubview:VC1.view];
    [containerView addSubview:VC2.view];
//    ViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
//    UIButton *btn = fromVC.blackBtn;
    //5.画一个小圆(大小圆的中心点是一样)
    UIBezierPath *smallPath = [UIBezierPath bezierPathWithOvalInRect:btn.frame];
    //6.中心点
    CGPoint centerP;
    centerP = btn.center;
    //7.求大圆的半径
    CGFloat radius;
    //8.判断按钮在哪个象限
    CGFloat y = CGRectGetHeight(toVC.view.frame)-btn.center.y;
    CGFloat x = CGRectGetWidth(toVC.view.frame) - btn.center.x;
    if (btn.frame.origin.x > CGRectGetWidth(toVC.view.frame)/2) {
        if (btn.frame.origin.y < CGRectGetHeight(toVC.view.frame)/2) {
            //1
            radius = sqrtf(btn.center.x*btn.center.x + y*y);
        }else{
            //4
            radius = sqrtf(btn.center.x*btn.center.x + btn.center.y*btn.center.y);
        }
    }else{
        if (CGRectGetMaxY(btn.frame) < CGRectGetHeight(toVC.view.frame)/2) {
            //2
            radius = sqrtf(x*x + y*y);
        }else{
            //3
            radius = sqrtf(btn.center.y*btn.center.y + x*x);
        }
    }
    //9.用贝塞尔画大圆
    UIBezierPath *bigPath = [UIBezierPath bezierPathWithArcCenter:centerP radius:radius startAngle:0 endAngle:M_PI*2 clockwise:YES];
    //10.把path添加到layer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    if (_isPush) {
        shapeLayer.path = bigPath.CGPath;

    }else{
        shapeLayer.path = smallPath.CGPath;

    }
//    [toVC.view.layer addSublayer:shapeLayer];
    //11.蒙板
    UIViewController *VC;
    if (_isPush) {
        VC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    }else{
        VC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];

    }
    VC.view.layer.mask = shapeLayer;
    //12.动画
    CABasicAnimation *anim = [CABasicAnimation animation];
    anim.keyPath = @"path";
    if (_isPush) {
        anim.fromValue = (id)smallPath.CGPath;

    }else{
        anim.fromValue = (id)bigPath.CGPath;
    }
//    anim.toValue = bigPath;
    anim.delegate = self;
    [shapeLayer addAnimation:anim forKey:nil];
}

• 动画结束

#pragma mark - CAAnimationDelegate
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    [_context completeTransition:YES];
    UIViewController *VC;
    if (_isPush) {
        VC = [_context viewControllerForKey:UITransitionContextToViewControllerKey];

    }else{
        VC = [_context viewControllerForKey:UITransitionContextFromViewControllerKey];
    }
    VC.view.layer.mask = nil;
}

• 要点说明

1. 这里的重点是需要判断是push还是pop,来处理需要哪个控制器做动画处理
2. layer不是添加在视图的layer上面，而是要添加在蒙版上面
3. 蒙版的获取和移除
4. 如果已经指定了最后的路径就没必要在写了，不然还要添加两个方法，remove 最后动画不移除
5. 画圆的时候需要注意一个象限的判断，因为获取大圆的半径是不同计算的
6. 动画是在容器里面处理的
7. 需要记录是push还是pop类型，需要处理的控制器对象不同（_isPush）

• 关于象限的演示和说明

利用勾股定律计算出大圆半径 交互点在第一象限
注意不同象限计算的方法