今天的目的很简单，做一个仿酷我音乐播放器的转场动画。并以这个案列全面掌握转场动画。先看效果图。如下面的gif图片，点击按钮可以进入另外一个蓝色背景的控制器，左右滑动蓝色背景的控制器可以返回到棕色背景的控制器。并且滑动的时候还有动画效果！效果还算高大上，只是界面有点丑。😀

效果图

说明：为了更方面的表述棕色背景的控制器称为A控制器，蓝色背景的控制器称为B控制器。

Demo下载链接：https://github.com/ZhengYaWei1992/ZWTransitioningAnimation

一、系统转场中的视图层次分析

以一个简单的present效果来分析下转场过中的界面结构，控制器A的背景设为橙色，控制器B的背景设置为蓝色，然后点击控制器A以model的形式跳转到控制器B。跳转代码如下：

    //常规的转场
    ViewController2 *vc = [[ViewController2 alloc]init];
    //修改转场动画效果
    vc.modalTransitionStyle = UIModalPresentationPageSheet;
    [self presentViewController:vc animated:YES completion:nil];

系统转场视图层级分析

当模态进入后，会发现A控制器的橙色view消失了。总共有三层，从左到右一次是UIWindow，UITransitionView容器视图，B控制器的蓝色view。其中UITransitionView是一个容器视图，每个控制器都有其承载，转场动画中它扮演一个很重要的角色。关于系统的转场动画，仅了解这些就足够，接下来看下自定义转场的视图层次分析。

二、自定义转场的视图层次分析

如果将跳转代码改为如下形式：

    ViewController2 *vc = [[ViewController2 alloc]init];
    //自定义转场
    vc.modalPresentationStyle =  UIModalPresentationCustom;
    [self presentViewController:vc animated:YES completion:nil];

vc.modalPresentationStyle = UIModalPresentationCustom;是实现自定义转场动画必须执行的一句代码。

自定义转场的视图层次分析

这是可以看到界面的层次结构，从左到右依次为(排除中间两个最小的视图)，UIWindow，A控制器的view，UITransitionView容器视图，B控制器的view。中间白色背景蓝色边框的为容器视图，转场动画主要就是通过它实现的。同系统的转场相比较，设置为自定义转场后，A控制的View依然可见。之所以是可见的，因为设置为自定义转然后我们需要实现一些特殊效果，会使用到上一界面所呈现的UI，定制特殊的转场动画效果。

三、动画效果的实现

在详细讲解动画效果之前，先讲一下动画特效。B控制器中左右滑动界面，蓝色View会做相应角度的变化。这个动画效果实际就是在蓝色视图控制的view上添加了一个滑动的手势，然后根据手势横向移动的距离，控制器的view做一定角度的旋转，但是要格外注意这个旋转并不是围绕蓝色View的中心点旋转，而是围绕蓝色View下方中心线的某一个点做旋转。这样就会涉及一个知识点了：锚点anchorPoint。
在创建视图控制器的View的时候，会调用loadView方法。并且设置了锚点为CGPointMake(0.5, 2.0)，关于锚点就不多说了，这个东西用的还是比较多，有点开发经验应该都会知道的。这里就给一个建议：设置一个控件的位置，最好使用UIView的center属性，或者是CALayer的position属性（位置）。设置控件的大小，最好使用UIView的bounds属性。因为frame这个属性是根据控件的center、bounds、transform最终计算出来的，如果先是设置了frame，之后改变这些属性之一就会改变控件的位置。

- (void)loadView{
    //要调用此方法，不调用也无法触控
    [super loadView];
    //手动创建控制器的view
    self.view = [[UIView alloc]init];
    self.view.backgroundColor = [UIColor blueColor];
    self.view.layer.anchorPoint = CGPointMake(0.5, 2.0);
    self.view.frame = [UIScreen mainScreen].bounds;
    //控制器view添加手势
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panAction:)];
    [self.view addGestureRecognizer:pan];
}

如果查看官方文档，CGAffineTransform是一个结构体，里面有如下六个参数：a, b, c, d，tx, ty，相关的形变均是由这六个参数控制，里面涉及到一些数学表达计算，关于这个动画特效中的旋转角度的控制可以根据b值来判断旋转的角度，如果当b值的绝对值(和旋转角度相关)大于某一临界值的时候，会返回到上一界面。结束或取消手势的时候，如果偏移角度足够大，就会返回A控制器，如果不够大，就会恢复原样，显示在屏幕的正中间。如果处于拖动的过程中，B控制器蓝色view旋转的角度就做相应角度的变化。

- (void)panAction:(UIPanGestureRecognizer *)pan{
    /*
     struct CGAffineTransform {
     CGFloat a, b, c, d;
     CGFloat tx, ty;
     };*/
    //CGAffineTransform
    //CGAffineTransformMake(<#CGFloat a#>, <#CGFloat b#>, <#CGFloat c#>, <#CGFloat d#>, <#CGFloat tx#>, <#CGFloat ty#>)
    if (pan.state == UIGestureRecognizerStateEnded || pan.state == UIGestureRecognizerStateCancelled) {
        //根据transform的b值来判断旋转的情况，只要b值大于0.16，就让蓝色view掉下来
        if (ABS(self.view.transform.b) > 0.16 ) {
            [UIView animateWithDuration:0.25 animations:^{
                //dismiss控制器
                [self dismissViewControllerAnimated:YES completion:nil];
            }];
        }else{
            self.view.transform = CGAffineTransformIdentity;
        }
    }else{
        CGFloat offsetX = [pan translationInView:self.view].x;
        CGFloat percent = offsetX / self.view.bounds.size.width;
        CGFloat radians = M_PI_4 * percent ;
        self.view.transform = CGAffineTransformMakeRotation(radians);
    }
}

四、自定义转场动画

了解了上面的相关东西之后，接下来便可以真正开始学习转场动画了，先总的说一下实现转场动画要做哪些准备。

1、设置自定义转场动画，取消系统的转场动画

设置vc.modalPresentationStyle = UIModalPresentationCustom;

ViewController2 *vc = [[ViewController2 alloc]init];
    //设置自定义转场
    vc.modalPresentationStyle = UIModalPresentationCustom;
    //注意不是modalTransitionStyle而是modalPresentationStyle，如果这里写错了，则模态到下一界面的时候，上一界面的背景不在显示
    //vc.modalTransitionStyle = UIModalPresentationCustom;
    //设置代理自定义转场
    vc.transitioningDelegate = self;
    [self presentViewController:vc animated:YES completion:nil];

2、 实现UIViewControllerTransitioningDelegate协议方法

控制器A遵守UIViewControllerTransitioningDelegate协议，并实现如下两个代理方法。第一个代理方法是控制器A进入控制器B的时候调用，第二个代理方法是控制器B回到控制器A时调用。ZWAnimationPresentProxy和ZWAnimationDismissProxy是自定义类，关于这两个类请看第三步和第四步骤。

//控制器A----B的转场动画
//方法的返回值表示当View呈现的时候要通过那个对象来执行动画
 - (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{
    //在此方法中要返回一个对象，该对象要遵守<UIViewControllerAnimatedTransitioning>协议，在该对象对应的类中实现代理方法
    ZWAnimationPresentProxy *presentProxy = [[ZWAnimationPresentProxy alloc]init];
    
    return presentProxy;
}

////控制器B----A的转场动画
////控制器在dismiss的时候通过那个对象来执行转场动画
 - (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{
    //在此方法中要返回一个对象，该对象要遵守<UIViewControllerAnimatedTransitioning>协议，在该对象对应的类中实现代理方法
    ZWAnimationDismissProxy *dismissProxy = [[ZWAnimationDismissProxy alloc]init];
    
    return dismissProxy;
}

3、ZWAnimationPresentProxy类的实现。

ZWAnimationPresentProxy和ZWAnimationDismissProxy这两个类都是继承与NSObject，且都要遵守<UIViewControllerAnimatedTransitioning>协议，在这个类中只要实现两个协议方法即可。
设置转场动画的持续时间。

//返回转场动画的持续时间
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext{
    return 0.5;
}

这个方法中的代码才是转场动画中最核心的代码，转场动画的特效具体是什么样子的主要是在这里实现的。要说明一点，只要实现了这个代理方法，必须自己来编写具体的转场代码，系统的转场方式消失。如果不实现此方法，界面无法跳转。参数transitionContext表示的是转场中包含的信息，所有转场过程中包含的信息都可以从这里面获取，进而根据获取的信息设置转场效果。
一般在这个方法中实现代码的总体思路都是这样的，该方法具体实现由一一对应的步骤。
1、拿到容器视图containerView
2、拿到目标视图toView
3、toView添加到containerView上
4、根据实际需求设置转场动画效果
5、转场动画结束后必须调用[transitionContext completeTransition:YES];方法
在第4步骤中拿到了目标view，也就是B控制器的蓝色View，在模态进入的时候先设置了最初的偏移角度，之后设置了一个动画效果。

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{
    //1、获取容器view
    UIView *containerView = [transitionContext containerView];
    //2、获取目标view
    /*UITransitionContextToViewKey
     UITransitionContextFromViewKey*/
    UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];
    //3、把目标view添加到容器view中
    [containerView addSubview:toView];
    //4、实现动画
    //4.1 设置初始值
    toView.transform = CGAffineTransformMakeRotation(-M_PI_2);
    //4.2 通过动画的方式旋转到默认位置
    //动画时间直接设置为转场动画的时间，系统默认时间是0.25s
    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
        toView.transform = CGAffineTransformIdentity;
    } completion:^(BOOL finished) {
        //5、转场动画结束后必须调用[transitionContext completeTransition:YES];方法。
        //如果不调用该方法，模态进入的界面将无法监听任何事件，界面直接不能进行交互
        [transitionContext completeTransition:YES];
    }];

}

4、ZWAnimationDismissProxy类的实现。

如果可以讲第3步骤中的实现给完全看懂，这一步基本是大同小异。直接上代码。
返回转场动画的持续时间。

//返回转场动画的持续时间
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext{
    return 0.5;
}

这个方法中获取到B控制器的蓝色View，如果偏移的角度足够大就会调用B控制器中的[self dismissViewControllerAnimated:YES completion:nil];方法，进而调用这个代理方法中实现的代码。如果偏移的角度不足够就不会调用[self dismissViewControllerAnimated:YES completion:nil];方法以及这个代理方法中实现的代码。

//编写具体的转场动画代码[消失的时候]
//说明：只要实现了这个代理方法，必须自己来编写具体的转场代码，系统的转场方式消失。如果不实现此方法，界面无法跳转
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{
    //1、获取这个转场动画的framView
    UIView *fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
    //2、执行动画
    //动画时间直接设置为转场动画的时间，系统默认时间是0.25s
    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
         //判断view的旋转角度
        if (fromView.transform.b > 0) {
            fromView.transform = CGAffineTransformMakeRotation(M_PI_2);
        }else{
            fromView.transform = CGAffineTransformMakeRotation(-M_PI_2);
        }
    } completion:^(BOOL finished) {
        //3、转场动画结束后必须调用[transitionContext completeTransition:YES];方法。
        //如果不调用该方法，dismiss的界面将无法监听任何事件，界面直接不能进行交互
        [transitionContext completeTransition:YES];
    }];
}

5、转场动画的实现。

这一步骤实际上就是前面的动画效果的实现，具体请看 三、动画效果的实现.这一步骤的实现。

小结

只要掌握了如上套路，实际开发中的转场特效也不过如此，重点的特效动画只要在下面这个协议方法中实现即可。参数transitionContext表示的是转场中包含的信息，所有转场过程中包含的信息都可以从这里面获取。既然都可以获取到相应控件了，剩下的就是常规的设置动画效果了。这个方法还是非常关键的。

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