在iOS5和iOS6前，View Controller的切换主要有4种：

  • 1. Push/Pop，NavigationViewController常干的事儿
  • 2. Tab，TabViewController点击
  • 3. Present Modal，调用ViewController的presentViewController:animated:completion:方法
  • 4. Add ChildViewController，调用- (void)addChildViewController:(UIViewController *)childController方法

在使用Add ChildViewController的方式时，一般使用transitionFromViewController:toViewController:…的Animation block中可以实现一些简单的切换效果，这样做有2大不足：

  • 1. 代码高度耦合，VC切换部分的代码直接写在container中，难以分离重用；
  • 2. 支持的切换效果比较有限，因为其只能使用UIView动画来切换，管理起来也略显麻烦

于是，苹果在iOS7中引入了一些新的API来帮助开发者更容易，更松耦合地定义ViewController的转换效果。
知识点
用法 从上面的知识点图中可以看出，新的API主要提供了2种VC切换的方式，一种是动画式切换，即定义一种从一个VC到另一个VC的动画效果，切换的时候自动播放，第二种是交互式切换，这种方式同样需要定义动画效果，只是这个动画效果会根据跟随交互式手势来切换VC并同时播放动画效果。 这两种方式的用法略有不同。
动画式切换

  • 首先定义一个动画类实现接口UIViewControllerAnimatedTransitioning， 实现接口的2个方法，一个是动画效果的时间，一个是动画效果（- (void)animateTransition:(id )transitionContext ），实现动画效果时可以从参数transitionContext中获取到切换时的上下文信息，比方说从哪个VC切换到哪个VC等。
  • 在需切换的VC中实现UIViewControllerTransitioningDelegate，并实现animationController*方法，返回一个步骤1定义的动画变量。
  • 调用展现VC切换方法，presentViewController等。

交互式切换

  • 定义一个类实现接口UIViewControllerInteractiveTransitioning，iOS7提供了一个默认的基于百分比的动画实现UIPercentDrivenInteractiveTransition，大家不想太麻烦可以直接扩展这个类。该类需要绑定需要实现手势控制的VC，同时把手势操作添加到该VC上，然后在处理手势动作的时候，调用接口中的方法去更新当前的动画进度。
  • 定以切换时的动画效果类。和动画式切换的方式一致
  • 在需切换的VC中实现UIViewControllerTransitioningDelegate，实现interactiveController方法，返回步骤1定义的类，实现animationController方法返回步骤2定义的动画效果。

实战 下图是我实现的一个VC切换的效果图，（注：App图片是网上随便找的，不代表个人喜好：）
实现代码： VC跳入动画的代码:

  1. -(NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext
  2. {
  3. return 0.5f;
  4. }
  5. -(void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
  6. {
  7. //Create the differents 3D animations
  8. CATransform3D viewFromTransform;
  9. CATransform3D viewToTransform;
  10. UIView *generalContentView = [transitionContext containerView];
  11. UIView *fromView = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view;
  12. UIView *toView = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view;
  13. viewFromTransform = CATransform3DMakeRotation(ROTATION_ANGLE, 0.0, 1.0, 0.0);
  14. viewToTransform = CATransform3DMakeRotation(-ROTATION_ANGLE, 0.0, 1.0, 0.0);
  15. [toView.layer setAnchorPoint:CGPointMake(0, 0.5)];
  16. [fromView.layer setAnchorPoint:CGPointMake(1, 0.5)];
  17. //    [generalContentView setTransform:CGAffineTransformMakeTranslation(generalContentView.frame.size.width/2.0, 0)];
  18. viewFromTransform.m34 = PERSPECTIVE;
  19. viewToTransform.m34 = PERSPECTIVE;
  20. toView.layer.transform = viewToTransform;
  21. //Add the to- view
  22. [generalContentView addSubview:toView];
  23. [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
  24. [generalContentView setTransform:CGAffineTransformMakeTranslation(-generalContentView.frame.size.width/2.0, 0)];
  25. fromView.layer.transform = viewFromTransform;
  26. toView.layer.transform = CATransform3DIdentity;
  27. } completion:^(BOOL finished) {
  28. //Set the final position of every elements transformed
  29. [generalContentView setTransform:CGAffineTransformIdentity];
  30. fromView.layer.transform = CATransform3DIdentity;
  31. toView.layer.transform = CATransform3DIdentity;
  32. [fromView.layer setAnchorPoint:CGPointMake(0.5f, 0.5f)];
  33. [toView.layer setAnchorPoint:CGPointMake(0.5f, 0.5f)];
  34. if ([transitionContext transitionWasCancelled]) {
  35. [toView removeFromSuperview];
  36. } else {
  37. [fromView removeFromSuperview];
  38. }
  39. // inform the context of completion
  40. [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
  41. }];
  42. }
-(NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext

{

    return 0.5f;

}

-(void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext

{

    //Create the differents 3D animations

    CATransform3D viewFromTransform;

    CATransform3D viewToTransform;

    UIView *generalContentView = [transitionContext containerView];

    UIView *fromView = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view;

    UIView *toView = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view;

    viewFromTransform = CATransform3DMakeRotation(ROTATION_ANGLE, 0.0, 1.0, 0.0);

    viewToTransform = CATransform3DMakeRotation(-ROTATION_ANGLE, 0.0, 1.0, 0.0);

    [toView.layer setAnchorPoint:CGPointMake(0, 0.5)];

    [fromView.layer setAnchorPoint:CGPointMake(1, 0.5)];

//    [generalContentView setTransform:CGAffineTransformMakeTranslation(generalContentView.frame.size.width/2.0, 0)];

    viewFromTransform.m34 = PERSPECTIVE;

    viewToTransform.m34 = PERSPECTIVE;

    toView.layer.transform = viewToTransform;

    //Add the to- view

    [generalContentView addSubview:toView];

    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{

        [generalContentView setTransform:CGAffineTransformMakeTranslation(-generalContentView.frame.size.width/2.0, 0)];

        fromView.layer.transform = viewFromTransform;

        toView.layer.transform = CATransform3DIdentity;

    } completion:^(BOOL finished) {

        //Set the final position of every elements transformed

        [generalContentView setTransform:CGAffineTransformIdentity];

        fromView.layer.transform = CATransform3DIdentity;

        toView.layer.transform = CATransform3DIdentity;

        [fromView.layer setAnchorPoint:CGPointMake(0.5f, 0.5f)];

        [toView.layer setAnchorPoint:CGPointMake(0.5f, 0.5f)];

        if ([transitionContext transitionWasCancelled]) {

            [toView removeFromSuperview];

        } else {

            [fromView removeFromSuperview];

        }

        // inform the context of completion

        [transitionContext completeTransition:![transitionContext transitionWasCancelled]];

    }];

}

手势交互代码：

  1. -(void)wireToViewController:(UIViewController *)viewController
  2. {
  3. self.presentingVC = viewController;
  4. [self prepareGestureRecognizerInView:viewController.view];
  5. }
  6. - (void)prepareGestureRecognizerInView:(UIView*)view {
  7. UIPanGestureRecognizer *gesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handleGesture:)];
  8. [view addGestureRecognizer:gesture];
  9. }
  10. -(CGFloat)completionSpeed
  11. {
  12. return 1 - self.percentComplete;
  13. }
  14. - (void)handleGesture:(UIPanGestureRecognizer *)gestureRecognizer {
  15. CGPoint translation = [gestureRecognizer translationInView:gestureRecognizer.view.superview];
  16. switch (gestureRecognizer.state) {
  17. case UIGestureRecognizerStateBegan:
  18. // 1. Mark the interacting flag. Used when supplying it in delegate.
  19. self.interacting = YES;
  20. [self.presentingVC dismissViewControllerAnimated:YES completion:nil];
  21. break;
  22. case UIGestureRecognizerStateChanged: {
  23. // 2. Calculate the percentage of guesture
  24. CGFloat fraction = -translation.x / 300.0;
  25. //Limit it between 0 and 1
  26. fraction = fminf(fmaxf(fraction, 0.0), 1.0);
  27. self.shouldComplete = (fraction > 0.5);
  28. [self updateInteractiveTransition:fraction];
  29. break;
  30. }
  31. case UIGestureRecognizerStateEnded:
  32. case UIGestureRecognizerStateCancelled: {
  33. // 3. Gesture over. Check if the transition should happen or not
  34. self.interacting = NO;
  35. if (!self.shouldComplete || gestureRecognizer.state == UIGestureRecognizerStateCancelled) {
  36. [self cancelInteractiveTransition];
  37. } else {
  38. [self finishInteractiveTransition];
  39. }
  40. break;
  41. }
  42. default:
  43. break;
  44. }
  45. }
-(void)wireToViewController:(UIViewController *)viewController

{

    self.presentingVC = viewController;

    [self prepareGestureRecognizerInView:viewController.view];

}

- (void)prepareGestureRecognizerInView:(UIView*)view {

    UIPanGestureRecognizer *gesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handleGesture:)];

    [view addGestureRecognizer:gesture];

}

-(CGFloat)completionSpeed

{

    return 1 - self.percentComplete;

}

- (void)handleGesture:(UIPanGestureRecognizer *)gestureRecognizer {

    CGPoint translation = [gestureRecognizer translationInView:gestureRecognizer.view.superview];

    switch (gestureRecognizer.state) {

        case UIGestureRecognizerStateBegan:

            // 1. Mark the interacting flag. Used when supplying it in delegate.

            self.interacting = YES;

            [self.presentingVC dismissViewControllerAnimated:YES completion:nil];

            break;

        case UIGestureRecognizerStateChanged: {

            // 2. Calculate the percentage of guesture

            CGFloat fraction = -translation.x / 300.0;

            //Limit it between 0 and 1

            fraction = fminf(fmaxf(fraction, 0.0), 1.0);

            self.shouldComplete = (fraction > 0.5);

            [self updateInteractiveTransition:fraction];

            break;

        }

        case UIGestureRecognizerStateEnded:

        case UIGestureRecognizerStateCancelled: {

            // 3. Gesture over. Check if the transition should happen or not

            self.interacting = NO;

            if (!self.shouldComplete || gestureRecognizer.state == UIGestureRecognizerStateCancelled) {

                [self cancelInteractiveTransition];

            } else {

                [self finishInteractiveTransition];

            }

            break;

        }

        default:

            break;

    }

}

根据手势3D切换的动画代码：

  1. -(NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext
  2. {
  3. return 0.5f;
  4. }
  5. -(void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
  6. {
  7. //Create the differents 3D animations
  8. CATransform3D viewFromTransform;
  9. CATransform3D viewToTransform;
  10. UIView *generalContentView = [transitionContext containerView];
  11. UIView *fromView = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view;
  12. UIView *toView = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view;
  13. viewFromTransform = CATransform3DMakeRotation(ROTATION_ANGLE, 0.0, 1.0, 0.0);
  14. viewToTransform = CATransform3DMakeRotation(-ROTATION_ANGLE, 0.0, 1.0, 0.0);
  15. [toView.layer setAnchorPoint:CGPointMake(0, 0.5)];
  16. [fromView.layer setAnchorPoint:CGPointMake(1, 0.5)];
  17. //    [generalContentView setTransform:CGAffineTransformMakeTranslation(generalContentView.frame.size.width/2.0, 0)];
  18. viewFromTransform.m34 = PERSPECTIVE;
  19. viewToTransform.m34 = PERSPECTIVE;
  20. toView.layer.transform = viewToTransform;
  21. //Add the to- view
  22. [generalContentView addSubview:toView];
  23. [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
  24. [generalContentView setTransform:CGAffineTransformMakeTranslation(-generalContentView.frame.size.width/2.0, 0)];
  25. fromView.layer.transform = viewFromTransform;
  26. toView.layer.transform = CATransform3DIdentity;
  27. } completion:^(BOOL finished) {
  28. //Set the final position of every elements transformed
  29. [generalContentView setTransform:CGAffineTransformIdentity];
  30. fromView.layer.transform = CATransform3DIdentity;
  31. toView.layer.transform = CATransform3DIdentity;
  32. [fromView.layer setAnchorPoint:CGPointMake(0.5f, 0.5f)];
  33. [toView.layer setAnchorPoint:CGPointMake(0.5f, 0.5f)];
  34. if ([transitionContext transitionWasCancelled]) {
  35. [toView removeFromSuperview];
  36. } else {
  37. [fromView removeFromSuperview];
  38. }
  39. // inform the context of completion
  40. [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
  41. }];
  42. }
-(NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext

{

    return 0.5f;

}

-(void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext

{

    //Create the differents 3D animations

    CATransform3D viewFromTransform;

    CATransform3D viewToTransform;

    UIView *generalContentView = [transitionContext containerView];

    UIView *fromView = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view;

    UIView *toView = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view;

    viewFromTransform = CATransform3DMakeRotation(ROTATION_ANGLE, 0.0, 1.0, 0.0);

    viewToTransform = CATransform3DMakeRotation(-ROTATION_ANGLE, 0.0, 1.0, 0.0);

    [toView.layer setAnchorPoint:CGPointMake(0, 0.5)];

    [fromView.layer setAnchorPoint:CGPointMake(1, 0.5)];

//    [generalContentView setTransform:CGAffineTransformMakeTranslation(generalContentView.frame.size.width/2.0, 0)];

    viewFromTransform.m34 = PERSPECTIVE;

    viewToTransform.m34 = PERSPECTIVE;

    toView.layer.transform = viewToTransform;

    //Add the to- view

    [generalContentView addSubview:toView];

    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{

        [generalContentView setTransform:CGAffineTransformMakeTranslation(-generalContentView.frame.size.width/2.0, 0)];

        fromView.layer.transform = viewFromTransform;

        toView.layer.transform = CATransform3DIdentity;

    } completion:^(BOOL finished) {

        //Set the final position of every elements transformed

        [generalContentView setTransform:CGAffineTransformIdentity];

        fromView.layer.transform = CATransform3DIdentity;

        toView.layer.transform = CATransform3DIdentity;

        [fromView.layer setAnchorPoint:CGPointMake(0.5f, 0.5f)];

        [toView.layer setAnchorPoint:CGPointMake(0.5f, 0.5f)];

        if ([transitionContext transitionWasCancelled]) {

            [toView removeFromSuperview];

        } else {

            [fromView removeFromSuperview];

        }

        // inform the context of completion

        [transitionContext completeTransition:![transitionContext transitionWasCancelled]];

    }];

}

待切换的VC的动画效果配置代码：

  1. -(IBAction)changeViewController:(id)sender
  2. {
  3. ToViewController *vc =[[ToViewController alloc] init];
  4. vc.delegate = self;
  5. vc.transitioningDelegate = self;
  6. [self.interactionAnimation wireToViewController:vc];
  7. [self presentViewController:vc animated:YES completion:nil];
  8. }
  9. -(void) didClickedDismissButton:(ToViewController *)viewController
  10. {
  11. [self dismissViewControllerAnimated:YES completion:nil];
  12. }
  13. - (id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source
  14. {
  15. return self.presentAnimation;
  16. }
  17. -(id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed
  18. {
  19. return self.cubeAnimation;
  20. }
  21. -(id <UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id<UIViewControllerAnimatedTransitioning>)animator
  22. {
  23. return self.interactionAnimation.interacting? self.interactionAnimation:nil;
  24. }
-(IBAction)changeViewController:(id)sender

{

    ToViewController *vc =[[ToViewController alloc] init];

    vc.delegate = self;

    vc.transitioningDelegate = self;

    [self.interactionAnimation wireToViewController:vc];

    [self presentViewController:vc animated:YES completion:nil];

}

-(void) didClickedDismissButton:(ToViewController *)viewController

{

    [self dismissViewControllerAnimated:YES completion:nil];

}

- (id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source

{

    return self.presentAnimation;

}

-(id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed

{

    return self.cubeAnimation;

}

-(id <UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id<UIViewControllerAnimatedTransitioning>)animator

{

    return self.interactionAnimation.interacting? self.interactionAnimation:nil;

}

整个示例的完整代码已提交到Github上：https://github.com/xianlinbox/iOS7_New/tree/master/iOS7_New/VCTransitions

iOS7之定制View Controller切换效果的更多相关文章

  1. Swift：超炫的View Controller切换动画

    匿名社交应用Secret的开发者开发了一款叫做Ping的应用,用户可以他们感兴趣的话题的推送. Ping有一个很炫的东西,就是主界面和之间切换的动画做的非常的好.每次看到一个非常炫的动画,都不由得会想 ...

  2. iOS Container View Controller

    一.UIViewController 做iOS开发的经常会和UIViewController打交道,从类名可知UIViewController属于MVC模型中的C(Controller),说的更具体点 ...

  3. 用Swift完成不同View Controller之间的切换

    之前用objective-c开发时,页面之间的切换很容易.其实用swift没有很大的变化,如果你是用storyboard完成的界面,基本上是同样的方式,只不过在代码部分写成swift风格的就行了. 今 ...

  4. View Controller Transition：京东加购物车效果

    冬天已经过去了,阳光越来越暖洋洋的了.还记得上学的时候,老师总说"春天是播种的季节",而我还没在朋友圈许下什么愿望.一年了,不敢想象回首还能看到点什么,所以勇往直前.当被俗世所扰, ...

  5. UIVIewController自定义切换效果－b

      之前介绍动画时提过UIView的转场动画,但是开发中我们碰到更多的viewController的切换,ios中常见的viewcontroller切换有四种:模态视图,导航栏控制器,UITabBar ...

  6. 自己定义View Controller转换动画

    原文链接 : Introduction to Custom View Controller Transitions and Animations 原文作者 : joyce echessa 译文出自 : ...

  7. 【IOS笔记】View Controller Basics

    View Controller Basics   视图控制器基础 Apps running on iOS–based devices have a limited amount of screen s ...

  8. iOS 视图控制器转场动画/页面切换效果/跳转动画 学习

    一 学习 在 UINavigationController 中 push 和 pop 的转场效果  (基于iOS7 以上的转场方式) 经过学习了解到,重点分三块: (1)pushAnimation:  ...

  9. presenting view controller

    Present ViewController详解 Present ViewController Modally 一.主要用途 弹出模态ViewController是IOS变成中很有用的一个技术,UIK ...

随机推荐

  1. linux-启动停止重启shell 简单shell示例

    停止: #!/bin/bashpid=`ps -ef|grep /opt/lampp|grep -v grep|awk '{print $2}'|wc -l`b=0if [ $pid -gt $b ] ...

  2. Spring操作mongo排序，限制查询记录数

    Query query = new Query(); Criteria criteria = Criteria.where("timestamp").gt(from).lt(to) ...

  3. ASP三种常用传值方式：

    ASP 页面(两个aspx页面)传值方式:背景: 两个aspx 页面valuepage.aspx tbusername tbpwdobtainvalue.aspx tbusername tbpwd 1 ...

  4. HTML标签大全

    HTML标签解释大全 一.HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(DTD). 标签:a 说明:标明超链接的起始或目的位置. 标签:acronym 说明:标 ...

  5. 从模态视图push到另一个视图

    //需要给模态视图创建一个Nav,然后再调用presentViewController if (_loginVC == nil) { _loginVC = [[LoginViewController ...

  6. JQuery Mobile 实战一

    今天我们来使用JQuery Mobile来开发一个web mobile app. 要实现的如下所示效果: 开始: 第一步:添加JS包等引用,直接去官网下载最新的JQuery Mobile 包,http ...

  7. SQL里IN的用法以及优化

    1.in后条件不多,可以考虑主表建索引,或用union all 代替 2. in 和 exists的区别: 如果子查询得出的结果集记录较少,主查询中的表较大且又有索引时应该用in, 反之如果外层的主查 ...

  8. iOS-图片拉伸,最常用的图片拉伸操作总结（干货）

    概念介绍 直接拉伸图片有时候会导致图片四周变的很模糊 所以要想办法使图片四周的形状不变.于是,端盖(end cap)的概念出来了,用来指定图片中的哪一部分不用拉伸.比如下图中,黄色代表需要被拉伸的矩形 ...

  9. Objective-C中的封装、继承、多态、分类

    封装的好处: 过滤不合理的值 屏蔽内部的赋值过程 让外界不必关注内部的细节 继承的好处: 不改变原来模型的基础上,拓充方法 建立了类与类之间的联系 抽取了公共代码 坏处:耦合性强(当去掉一个父类,子类 ...

  10. python基础:os模块中关于文件/目录常用的函数使用方法

    Python是跨平台的语言,也即是说同样的源代码在不同的操作系统不需要修改就可以同样实现 因此Python的作者就倒腾了OS模块这么一个玩意儿出来,有了OS模块,我们不需要关心什么操作系统下使用什么模 ...