iOS-自定义模态跳转的运用

iOS开发中,常见界面之间的跳转方式有:

• 1-改变window的根视图;
• 2-模态跳转(present/dismiss);
• 3-导航控制器的push(show)和pop.

但在实际开发中,以上三种界面跳转的方式无法满足我们的需求时,需要我们DIY,然后自定义模态跳转就起作用了.

---

下面通过写一个Demo来展示自定义模态跳转(Demo传送门在最后)

• 利用UIPageViewController实现卡片是分页滚动
• 自定义视图的模态跳转

---

1-present跳转核心代码

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {    // 容器视图    UIView *containerView = [transitionContext containerView];    // 当前控制器    UIViewController *fromVC = [transitionContext  viewControllerForKey:UITransitionContextFromViewControllerKey];    // 目标控制器    UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];    // 初始大小    CGRect initialFrame = self.originFrame;    // 最终大小    CGRect finalFrame = [transitionContext finalFrameForViewController:toVC];    // 目标控制器截屏(初始化之后的)    UIImageView *snapshot = [AnimationHelper getImage:toVC.view];    // 设置目标控制器的初始大小    snapshot.frame = initialFrame;    // 切圆角    snapshot.layer.cornerRadius = 25;    snapshot.layer.masksToBounds = YES;    // 添加到容器视图中    [containerView addSubview:toVC.view];    [containerView addSubview:snapshot];    // 隐藏目标控制器视图    toVC.view.hidden = YES;    // 设置动画属性    [AnimationHelper perspectiveTransformForContainerView:containerView];    // 默认让目标视图的截图 Y 轴 旋转180度    snapshot.layer.transform = [AnimationHelper yRotation:M_PI_2];    // 获取时间间隔    CGFloat duration = [self transitionDuration:transitionContext];    // 1 定义 关键帧动画    [UIView animateKeyframesWithDuration:duration delay:0 options:UIViewKeyframeAnimationOptionCalculationModeCubic animations:^{        // 2 添加关键帧动画1 - 让主控制器旋转 180 度        snapshot.layer.transform = [AnimationHelper yRotation:M_PI_2];        [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.33 animations:^{            fromVC.view.layer.transform = [AnimationHelper yRotation:-M_PI_2];        }];        // 3 添加关键帧动画2 - 切换目标控制器的动画,让目标控制器截图旋转180度展示出来        [UIView addKeyframeWithRelativeStartTime:0.33 relativeDuration:0.33 animations:^{            snapshot.layer.transform = [AnimationHelper yRotation:0.0];        }];        // 4 添加关键帧动画3 - 设置目标控制器截屏的大小为最终屏幕        [UIView addKeyframeWithRelativeStartTime:0.66 relativeDuration:0.33 animations:^{            snapshot.frame = finalFrame;        }];    } completion:^(BOOL finished) {        // 显示目标控制器        toVC.view.hidden = NO;        // 恢复根控制器的 transform 为初始状态        fromVC.view.layer.transform = [AnimationHelper yRotation:0.0];        // 移除截屏        [snapshot removeFromSuperview];        // 完成 模态跳转动画        [transitionContext completeTransition:![transitionContext transitionWasCancelled]];    }];}

---

2-dismiss跳转核心代码

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {    // 容器视图    UIView *containerView = [transitionContext containerView];    // 当前控制器    UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];    // 目标控制器    UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];    // 最终大小    CGRect finialFrame = self.destinationFrame;    // 根控制器截屏(初始化之后的)    UIImageView *snapshot = [AnimationHelper getImage:fromVC.view];    // 切圆角    snapshot.layer.cornerRadius = 25;    snapshot.layer.masksToBounds = YES;    // 添加到容器视图中    [containerView addSubview:toVC.view];    [containerView addSubview:snapshot];    // 隐藏根控制器视图    fromVC.view.hidden = YES;    // 设置动画属性    [AnimationHelper perspectiveTransformForContainerView:containerView];    // 默认让目标视图的截图 Y 轴 旋转180度    toVC.view.layer.transform = [AnimationHelper yRotation:-M_PI_2];    // 获取时间间隔    CGFloat duration = [self transitionDuration:transitionContext];    // 1 定义 关键帧动画    [UIView animateKeyframesWithDuration:duration delay:0 options:UIViewKeyframeAnimationOptionCalculationModeCubic animations:^{        // 2 添加关键帧动画1 - 设置根控制器截屏的大小为最终大小        [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.33 animations:^{            snapshot.frame = finialFrame;        }];        // 3 添加关键帧动画2 - 设置根控制器截屏旋转180度隐藏        [UIView addKeyframeWithRelativeStartTime:0.33 relativeDuration:0.33 animations:^{            snapshot.layer.transform = [AnimationHelper yRotation:M_PI_2];        }];        // 4 添加关键帧动画1 - 让目标控制器旋转 180 度 展示出来        [UIView addKeyframeWithRelativeStartTime:0.66 relativeDuration:0.33 animations:^{            toVC.view.layer.transform = [AnimationHelper yRotation:0.0];        }];    } completion:^(BOOL finished) {        // 显示目标控制器        fromVC.view.hidden = false;        // 移除截屏        [snapshot removeFromSuperview];        // 完成 模态跳转动画        [transitionContext completeTransition:![transitionContext transitionWasCancelled]];    }];}

---

3-跳需要模态跳转的控制器中接受代理

#pragma mark --------------------关键代码    // 设置模态跳转的代理方法    revealVC.transitioningDelegate = self;    // 设置需要手势的控制器    [self.swipeInteractionController wireToViewController:revealVC];#pragma mark --------------------关键代码    [self showViewController:revealVC sender:nil];

---

4-实现UIViewControllerTransitioningDelegate代理方法

- (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source {    self.flipPresentAnimationController.originFrame = self.cardView.frame;    return self.flipPresentAnimationController;}- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {    self.flipDismissAnimationController.destinationFrame = self.cardView.frame;    return self.flipDismissAnimationController;}- (id<UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id<UIViewControllerAnimatedTransitioning>)animator {    return self.swipeInteractionController.interactionInProgress ? self.swipeInteractionController : nil;}

---

Demo的传送门:

OC版地址

Swift版地址