可以很炫酷的转场动画😏
今天的目的很简单，做一个仿酷我音乐播放器的转场动画。并以这个案列全面掌握转场动画。先看效果图。如下面的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;
