自定义push转场动画(下篇写pop的转场动画,其实很类似)

好久没更新自己的了,悲哀呀...
先来个效果图吧

transformAimationGif.gif

1. 先拽两个控制器, 蓝色关联PushViewController, 浅黄色关联PopViewController,如图:

图1.png

2. 关联属性于Push

图2.png

3. 做过自定义转场动画的同学们应该都晓得必须遵守协议,那么这里就创建一个类(CustomPushTransition)专门来实现此转场效果.在.m必须实现这两个方法:

   - (NSTimeInterval)transitionDuration:(nullable id )transitionContext;
   - (void)animateTransition:(id)transitionContext
   

4. 代码如下, 大致思想:创建两个圆(利用贝尔曲线),一个是与push按钮的size, 另一个是有足够覆盖屏幕的半径,最后的动画是由这两个的path来完成.

   @property (nonatomic, strong) idcustomTransitionContext;
   
   - (NSTimeInterval)transitionDuration:(nullable id )transitionContext{
       return .5f;
     }
   
   - (void)animateTransition:(id)transitionContext{
         self.
         PushViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
         PopViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
   
         //获取push控制器中按钮. 
         UIButton *button = fromVC.push;
         //获取容器
         UIView *containerView = [transitionContext containerView];
         //添加视图
         [containerView addSubView:fromVC.view];
         [containerView addSubView:toVC.view];
         
         //绘制小圆, Oval:椭圆形
         UIBezierPath *startBP = [UIBezierPath bezierPathWithOvalInRect:button.frame];
         //绘制大圆, 需先确定半径,其实这里用到勾股定理,很好理解的,如图3:
         CGFloat horizontalSide_X = button.center.x;
         CGFloat verticalSide_Y = CGRectGetMaxY(toVC.view.bounds) - button.center.y;
         CGFloat radius = sqrt( (horizontalSide_X * horizontalSide_X) + (verticalSide_Y * verticalSide_Y) );
         /*
        CGRect CGRectInset (
          CGRect rect,
          CGFloat dx,
          CGFloat dy
        ); 解释: 该结构体是以rect的中点为中心,插入一个以dx,dy为参考的放大或缩小的矩形; 正表示缩小,负表示放大. 
           所以绘制大圆是以小圆(button.frame)为中心点,插入一个radius尺寸的放大的圆
         */
         UIBezierPath *finalBP = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(button.frame, -radius, -radius)];
         CAShapeLayer *maskLayer = [CAShapeLayer layer];
         maskLayer.path = finalBP.CGPath;
         
         //设置目标控制器的mask
         toVC.view.layer.mask = maskLayer;
   
         //执行动画
         CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
         animation.fromValue = (__bridge id _Nullable)(startBP.CGPath);
         animation.toValue = (__bridge id _Nullable)(finalBP.CGPath);
         animation.during = [self transitionDuration:transitionContext];
         animation.timingFuncion = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
         animation.delegate = self;
         [maskLayer addAnimation:maskLayerAnimation forKey:@"path"];
         }
   

   pragma mark - CABasicAnimation

   • (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
     //告诉系统转场动画完成
     [self.customTransitionContext completeTransition:![self.customTransitionContext transitionWasCancelled]];
     //清除相应控制器视图的mask
     [self.customTransitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view.layer.mask = nil;
     [self.customTransitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view.layer.mask = nil;
     }

     
     
     

     图3.png

5. push的自定义转场基本完成了,现在回到PushViewController上, 控制器须遵守协议, 所以self.navigationCtroller.delegate = self; //注意设置导航控制器的代理须写在viewWillAppear中或是viewDidAppear.实现导航控制器的代理:

#pragma mark - UINavigationControllerDelegate
- (id)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC{

        if (operation == UINavigationControllerOperationPush) {
        return self.pushAnimation;
    }
    return nil;
}

#pragma mark - 懒加载
- (CustomPushTransition *)pushAnimation{
     if (!_pushAnimation) {
     _pushAnimation = [[CustomPushTransition alloc] init];
   }
     return _pushAnimation;
}