自定义转场动画

动画效果

不知道哪里不对,做的gif好像比较大,链接github图片链接和直接在简书上传都显示不出来,好像.实在看不到的可以去最底下去我的guthub看gif.

gif01
gif02
gif01
gif02

自定义转场动画

• iOS7 开始,苹果推出了自定义转场的API.用于两个viewController切换之间自定义动画,使我们的切换的效果不单单局限于系统自定义动画.

• 另外,随着大屏幕的普及,如今的app普遍支持手势滑动返回(一般是左滑),自定义转场动画也支持手势滑动返回.

• 苹果在 UINavigationControllerDelegate 和UIViewControllerTransitioningDelegate 中给出了几个协议方法，通过返回类型就可以很清楚地知道各自的具体作用。我们自定义的转场方法只需要重载以下的方法就行了.使用准则就是：UINavigationController pushViewController 时重载 UINavigationControllerDelegate 的方法；UIViewController presentViewController 时重载 UIViewControllerTransitioningDelegate 的方法。
  <pre>
  @protocol UIViewControllerAnimatedTransitioning <NSObject>
  // 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 <UIViewControllerContextTransitioning>)transitionContext;
  // This method can only be a nop if the transition is interactive and not a percentDriven interactive transition.
  -(void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;
  @protocol UIViewControllerTransitioningDelegate <NSObject>
  @optional
  -(nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source;
  -(nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed;
  -(nullable id <UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id <UIViewControllerAnimatedTransitioning>)animator;
  -(nullable id <UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id <UIViewControllerAnimatedTransitioning>)animator;
  -(nullable UIPresentationController *)presentationControllerForPresentedViewController:(UIViewController *)presented presentingViewController:(UIViewController *)presenting sourceViewController:(UIViewController *)source NS_AVAILABLE_IOS(8_0);
  </pre>

• 具体步骤
  -1、创建继承自 NSObject 并且声明 UIViewControllerAnimatedTransitioning 的的动画类。
  -2、重载 UIViewControllerAnimatedTransitioning 中的协议方法。
  <pre>
  //动画时间
  -(NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext
  {
  return 0.7f;
  }
  </pre>
  <pre>
  // This method can only be a nop if the transition is interactive and not a percentDriven interactive transition.
  -(void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext
  {
  self.transitionContext = transitionContext;//动画上下文
  FirstViewController *fromVC = (FirstViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
  SecondViewController *toVC = (SecondViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
  UIView *contain = transitionContext.containerView;
  [contain addSubview:fromVC.view];
  [contain addSubview:toVC.view]; //这里必须是添加动画的图层在上面,之前在给pop做动画的时候黏贴,找了好久才发现没动画的原因在这里顺序搞反了,囧

  UIButton *pushButton = fromVC.button;
  UIBezierPath *startpath = [UIBezierPath bezierPathWithOvalInRect:pushButton.frame];

  CGPoint finalPoint;
  //根据终点位置所在象限的不同,计算覆盖的最大半径
  if (pushButton.frame.origin.x > toVC.view.bounds.size.width * 0.5 ) {
  if (pushButton.frame.origin.y < toVC.view.bounds.size.height * 0.5) { //第一象限
  finalPoint = CGPointMake(pushButton.center.x , pushButton.center.y - toVC.view.bounds.size.height);
  } else { //第四现象
  finalPoint = CGPointMake(pushButton.center.x , pushButton.center.y);
  }
  } else {
  if (pushButton.frame.origin.y < toVC.view.bounds.size.height * 0.5) { //第二象限
  finalPoint = CGPointMake(pushButton.center.x - toVC.view.bounds.size.width , pushButton.center.y - toVC.view.bounds.size.height);
  } else { //第三现象
  finalPoint = CGPointMake(pushButton.center.x - toVC.view.bounds.size.width, pushButton.center.y);
  }
  }

  CGFloat radius = sqrt(finalPoint.x * finalPoint.x + finalPoint.y * finalPoint.y); //遮罩的最大半径

  UIBezierPath *endPath = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(pushButton.frame, -radius, -radius)]; //-radius表示增大,+radius表示缩小

  //创建一个 CAShapeLayer 作为 toView 的遮罩。并让遮罩发生 path 属性的动画
  CAShapeLayer *maskLayer = [CAShapeLayer layer];
  maskLayer.path = endPath.CGPath; //将它的 path 指定为最终的 path 来避免在动画完成后会回弹
  toVC.view.layer.mask = maskLayer;

  CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
  maskLayerAnimation.fromValue = (__bridge id _Nullable)(startpath.CGPath);
  maskLayerAnimation.toValue = (__bridge id _Nullable)(endPath.CGPath);
  maskLayerAnimation.duration = [self transitionDuration:self.transitionContext];
  maskLayerAnimation.delegate = self;
  maskLayerAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

  [maskLayer addAnimation:maskLayerAnimation forKey:@"push"];
  }
  </pre>
  <pre>
  -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
  //告诉 iOS 这个 transition 完成,清除 fromVC和toVC 的 mask
  [self.transitionContext completeTransition:![self.transitionContext transitionWasCancelled]];
  [self.transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view.layer.mask = nil;
  [self.transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view.layer.mask = nil;
  }
  </pre>

-3、fromVC的控制器的使用
控制器实现UINavigationControllerDelegate的协议就行
<pre>
-(void)viewWillAppear:(BOOL)animated{
[super viewWillAppear:animated];
//这里有个坑,设置navigationController的代理一定要放在viewWillAppear,而不是viewDidLoad里面.否则,push出去,pop回来,再push,就使用回系统默认的push动画了!!!
self.navigationController.delegate = self;
}
-(nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
animationControllerForOperation:(UINavigationControllerOperation)operation
fromViewController:(UIViewController *)fromVC
toViewController:(UIViewController *)toVC
{
if (operation == UINavigationControllerOperationPush) {
PushAnimation *push = [PushAnimation new];
return push;
}else {
return nil;
}
}
</pre>

• 自定义转场动画就是以上的步骤,pop也是一样.

UIPercentDrivenInteractiveTransition 配合UIScreenEdgePanGestureRecognizer实现用返回滑动手势控制一个百分比交互式切换的过程动画

-1、创建滑动返回手势
<pre>

• (void)viewDidLoad {
  [super viewDidLoad];
  // Do any additional setup after loading the view.

  UIScreenEdgePanGestureRecognizer *edgePan = [[UIScreenEdgePanGestureRecognizer alloc] initWithTarget:self action:@selector(edgePan:)];
  edgePan.edges = UIRectEdgeLeft;
  [self.view addGestureRecognizer:edgePan];
  }

• (void)edgePan:(UIGestureRecognizer *)gestureRecognizer
  {
  CGFloat per = [gestureRecognizer locationInView:self.view].x / self.view.bounds.size.width;
  per = MIN(1, MAX(0, per));

  if (gestureRecognizer.state == UIGestureRecognizerStateBegan) {
  _percentInteractiveTransition = [[UIPercentDrivenInteractiveTransition alloc] init];
  [self.navigationController popViewControllerAnimated:YES];
  } else if (gestureRecognizer.state == UIGestureRecognizerStateChanged){
  [_percentInteractiveTransition updateInteractiveTransition:per];
  } else if (gestureRecognizer.state == UIGestureRecognizerStateEnded || gestureRecognizer.state == UIGestureRecognizerStateCancelled){
  if (per > 0.3) {
  [_percentInteractiveTransition finishInteractiveTransition];
  } else {
  [_percentInteractiveTransition cancelInteractiveTransition];
  }
  _percentInteractiveTransition = nil;
  }
  }
  </pre>

-2、实现UINavigationControllerDelegate中的协议
<pre>

• (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
  interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController
  {
  return _percentInteractiveTransition;
  }

• (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
  animationControllerForOperation:(UINavigationControllerOperation)operation
  fromViewController:(UIViewController *)fromVC
  toViewController:(UIViewController *)toVC
  {
  if (operation == UINavigationControllerOperationPop) {
  PopAnimation *pop = [PopAnimation new];
  return pop;
  }else {
  return nil;
  }
  }
  </pre>

代码传送门

• AnimatedTransitioning 点这里