转场动画

转场动画就是从一个场景以动画的形式过渡到另一个场景。自定义转场动画的意义是脱离系统固定的转场，实现UI交互设计师设计的视觉效果强的转场动画。

下图是整个案例的Demo菜单截图，为了方便大家一步一步掌握自定义转场动画，每个效果我都写了非常详细的Demo（包括导航push的转场和模态modal的转场），建议大家先下载下来跟着文章一个案例一个案例自己去实现一下，会对理解十分有帮助。github地址:https://github.com/yangli-dev/LYCustomTransition

homemenu.png

效果展示.gif

图片浏览器.gif

目录

0、CATransition（系统转场动画）

一、基础转场-非交互式（初步认识自定义转场动画）

二、仿酷狗转场-非交互式（巩固对转场的认识）

三、仿微信转场-非交互式（加强对转场的认识）

四、基础转场-交互式

五、实战 - 网友提问 - Question One

六、图片浏览器-PictureBrowse

说明：本文章目前只讲解了demo中的部分案例，但其它的跟这几个类似，扩展一下就好，如有问题请留言

0、CATransition（系统转场动画）

首先来个最简单的改变转场效果的方法（不是自定义，是通过官方提供的动画效果实现），提供动画效果的这个类就是CATransition

CATransition

CATransition 是CAAnimation的子类，用于页面之间的过度动画，官方提供了四个公有的API动画效果，但是私有API的效果更加炫酷（谨慎使用私有的API）

（1）Nav导航转场：要改变转场动画，其实方法只有一个，非常容易理解：
[self.navigationController.view.layer addAnimation:[self pushAnimation] forKey:nil]，
（2）modal模态转场：和nav类似，
[self.view.window.layer addAnimation:[self presentAnimation] forKey:nil];
意思是在视图的图层上添加一个CAAnimation类动画，然后图层执行这个类提供的动画效果，故转场动画也就改变了。
通过CAAnimation 的子类CATransition可以快速创建动画效果，以下代码是改变系统转场动画的具体实现

- (void)pushSecond{

    LYCATransitionSecondVC *second = [[LYCATransitionSecondVC alloc] init];
    [self.navigationController.view.layer addAnimation:[self pushAnimation] forKey:nil];//添加Animation
    [self.navigationController pushViewController:second animated:NO];  //记得这里的animated要设为NO，不然会重复/*  modal模态
    LYModalCATransitionSecondVC *second = [[LYModalCATransitionSecondVC alloc] init];
    [self.view.window.layer addAnimation:[self presentAnimation] forKey:nil];//添加Animation
    [self presentViewController:second animated:NO completion:nil];  //记得这里的animated要设为NO，不然会重复
*/}

- (CATransition *)pushAnimation{    CATransition* transition = [CATransition animation];
    transition.duration = 0.8;
    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];    
    /*私有API
     cube                   立方体效果
     pageCurl               向上翻一页
     pageUnCurl             向下翻一页
     rippleEffect           水滴波动效果
     suckEffect             变成小布块飞走的感觉
     oglFlip                上下翻转
     cameraIrisHollowClose  相机镜头关闭效果
     cameraIrisHollowOpen   相机镜头打开效果
     */
    transition.type = @"cube";    //transition.type = kCATransitionMoveIn;
    //下面四个是系统公有的API
    //kCATransitionMoveIn, kCATransitionPush, kCATransitionReveal, kCATransitionFade
    
    transition.subtype = kCATransitionFromRight;    //kCATransitionFromLeft, kCATransitionFromRight, kCATransitionFromTop, kCATransitionFromBottom
    
    return transition;
}

看完是不是很简单，赶紧自己尝试一下吧。接下来就是真正的自定义转场动画的学习了。

真正的自定义转场从这里开始

从iOS7开始，苹果提供了真正能自定义转场动画的API，这才使得我们可以为APP定义自己特有的转场效果。转场有非交互式和交互式转场，这里当然是从基本的非交互式的转场开始说起。

其实导航push和模态modal自定义转场的实现，只是一个协议的区别，
实现push的类去遵循UINavigationControllerDelegate协议；
实现modal的类去遵循UIViewControllerTransitioningDelegate协议。
两个协议里面的方法都大同小异，所以此系列文章就讲push转场中的案例实现。
具体看Demo就知道了^_（可能在这里你并不知道这两个协议是干嘛的，不要担心，下面马上就一一道来）

一、基础转场-非交互式（初步认识自定义转场动画）

完成这个案例只需要简单的两步就可实现，耐心并仔细看下去，你会发现自定义转场其实也很简单！

1. 遵循UINavigationControllerDelegate协议，设置代理。

比如在Demo中的Nav-BaseTransition案例，在LYNavBaseVC本个类中自己遵循UINavigationControllerDelegate此协议，在push转场之前设置代理self.navigationController.delegate = self，然后再实现其协议特有方法，当push操作执行时，就会回调实现的代理方法，代理方法会要求返回遵循了UIViewControllerAnimatedTransitioning协议的代理对象，从而去执行所对应的动画。（代码中的LYNavBaseCustomAnimator是遵循了UIViewControllerAnimatedTransitioning协议的类，这个协议是专门在转场中提供并执行转场动画，稍后会在第2小节详细介绍）

- (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
                                   animationControllerForOperation:(UINavigationControllerOperation)operation
                                                fromViewController:(UIViewController *)fromVC
                                                  toViewController:(UIViewController *)toVC;

具体代码实现

- (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
                                            animationControllerForOperation:(UINavigationControllerOperation)operation
                                                         fromViewController:(UIViewController *)fromVC
                                                           toViewController:(UIViewController *)toVC{    if (operation == UINavigationControllerOperationPush) {        return self.customAnimator;
        
    }else if (operation == UINavigationControllerOperationPop){        return self.customAnimator;
    }    return nil;
}

- (LYNavBaseCustomAnimator *)customAnimator
{    if (_customAnimator == nil) {
        _customAnimator = [[LYNavBaseCustomAnimator alloc]init];
    }    return _customAnimator;
}

2.创建提供动画效果的执行者

上述代码中的LYNavBaseCustomAnimator就是动画效果的执行者。它是遵循了UIViewControllerAnimatedTransitioning协议的类。

协议 UIViewControllerAnimatedTransitioning,这个协议是转场动画中，动画效果的执行者，实现这个协议的类具有负责给转场提供各种复杂动画效果的能力。协议里有两个必须要实现的方法

//这个方法控制转场动画的时间长度- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext;//这个是转场上下文，提供转场过程中两个控制器的具体信息。- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;`

具体代码实现

- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext{    return 0.5;
}
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{    //转场过渡的容器view
    UIView *containerView = [transitionContext containerView];    
    //FromVC
    UIViewController *fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];    UIView *fromView = fromViewController.view;
    fromView.frame = CGRectMake(0, 0, kScreenWidth, kScreenHeight);    
    //ToVC
    UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];    UIView *toView = toViewController.view;
    toView.frame = CGRectMake(0, 0, kScreenWidth, kScreenHeight);    
    //此处判断是push，还是pop 操作
    BOOL isPush = ([toViewController.navigationController.viewControllers indexOfObject:toViewController] > [fromViewController.navigationController.viewControllers indexOfObject:fromViewController]);    
    if (isPush) {
        [containerView addSubview:fromView];
        [containerView addSubview:toView];//push,这里的toView 相当于secondVC的view
        toView.frame = CGRectMake(kScreenWidth, kScreenHeight, kScreenWidth, kScreenHeight);
    
    }else{
        [containerView addSubview:toView];
        [containerView addSubview:fromView];//pop,这里的fromView 也是相当于secondVC的view
        fromView.frame = CGRectMake(0, 0, kScreenWidth, kScreenHeight);
    }    //因为secondVC的view在firstVC的view之上，所以要后添加到containerView中
    
    //动画
    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{        if (isPush) {
            toView.frame = CGRectMake(0, 0, kScreenWidth, kScreenHeight);
        }else{
            fromView.frame = CGRectMake(kScreenWidth, kScreenHeight, kScreenWidth, kScreenHeight);
        }
    } completion:^(BOOL finished) {        BOOL wasCancelled = [transitionContext transitionWasCancelled];        //设置transitionContext通知系统动画执行完毕
        [transitionContext completeTransition:!wasCancelled];
    }];
}

这里简单介绍下fromView和toView，不然大家可能会有点绕

A          push --->     B
B           pop --->     A||                      ||fromView              toView 

谁在转场中主动发起转场，谁就是fromVC、fromView
A主动push到B，A就是fromVC
B主动pop到A，B就是fromVC

从代码中可以看出，转场动画的自定义，就是对fromView和toView的操作，而这两个view都是可以在这个协议的上下文中获取，所以，
我们不难实现一些简单的自定义转场。

案例一小结

对于非交互式的转场来说，其实就只需要实现两个协议的相关方法：
第一个是UINavigationControllerDelegate，作用好比是告诉系统我有自己的转场动画了，我要去调我自定义的。
第二个是UIViewControllerAnimatedTransitioning，作用好比是我制作好了动画了，需要的你直接调用就好了。

二、仿酷狗转场-非交互式（巩固对转场的认识）

动画解析:

首先可以了解到这个动画其实也是一个线性动画，只不过是弧线形的，那么给定起始和终止状态的位置就可以了。跟案例一类似，只不过这里多了一个旋转，这个动画可以用组动画CAAnimationGroup实现，但是鉴于效果不是太流畅，这里我采用的是仿射变换CGAffineTransform实现的。代码如下

@implementation LYNavKuGouPushAnimator- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext{    return 0.4;
}

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{    //转场过渡的容器view
    UIView *containerView = [transitionContext containerView];    
    //ToVC
    UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];    UIView *toView = toViewController.view;
    [containerView addSubview:toView];    
    //动画 仿射变换动画
    float centerX = toView.bounds.size.width * 0.5;    float centerY = toView.bounds.size.height * 0.5;    float x = toView.bounds.size.width * 0.5;    float y = toView.bounds.size.height * 1.8;    
    //起始状态: 原始状态绕x,y旋转45º后的状态
    CGAffineTransform trans = [self GetCGAffineTransformRotateAroundCenterX:centerX centerY:centerY x:x y:y angle:45.0/180.0*M_PI];
    toView.transform = trans;
    
    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{        
        //终止状态: 原始状态
        toView.transform = CGAffineTransformIdentity;
        
    } completion:^(BOOL finished) {        
        BOOL wasCancelled = [transitionContext transitionWasCancelled];                
        //设置transitionContext通知系统动画执行完毕
        [transitionContext completeTransition:!wasCancelled];
    }];
}/**
 仿射变换
 
 @param centerX     view的中心点X坐标
 @param centerY     view的中心点Y坐标
 @param x           旋转中心x坐标
 @param y           旋转中心y坐标
 @param angle       旋转的角度
 @return            CGAffineTransform对象
 */- (CGAffineTransform)GetCGAffineTransformRotateAroundCenterX:(float)centerX centerY:(float)centerY x:(float)x y:(float)y angle:(float)angle{    
    CGFloat l = y - centerY;    CGFloat h = l * sin(angle);    CGFloat b = l * cos(angle);    CGFloat a = l - b;    CGFloat x1 = h;    CGFloat y1 = a;    
    CGAffineTransform  trans = CGAffineTransformMakeTranslation(x1, y1);
    trans = CGAffineTransformRotate(trans,angle);    
    return trans;
}@end

看到这个类的代码是不是更清爽了，那是因为从这个案例开始起我就把push和pop的Animator分别用一个类实现（LYNavKuGouPushAnimator 和 LYNavKuGouPopAnimator），这样大家理解起来思路也会更清晰啦~
（还有从这个案例开始UINavigationControllerDelegate协议也用一个单独的类实现，比如这个案例中的LYNavKuGouAnimationTransition就是遵循并实现了该协议方法的类，在控制器中设置这个类的对象为代理即可）

案例二小结

该转场动画的精髓也就是
GetCGAffineTransformRotateAroundCenterX: centerY: x: y: angle:方法，这个方法使得可以根据传入的参数计算出view的变换后的位置状态。（关于CGAffineTransform更多知识，请自行Google，这里就不赘述了）
有了变换前后的状态，动画效果用一个简单的UIView动画也就可以实现了。

三、仿微信转场-非交互式（加强对转场的认识）

动画分析:首先看下示例图

微信转场示例.png

这个动画和前两个动画就有点不同了，前两个动画是对整个界面进行的动画操作，而这个动画只是对缩放的图片进行动画操作，背景颜色仅做了渐变效果。
既然知道了只是对图片进行动画操作，那就不难想到，在containerView上加上一个UIImageView，然后对此做动画操作，即可完成需求。
看下代码:

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{    
    //转场过渡的容器view
    UIView *containerView = [transitionContext containerView];    
    //FromVC
    UIViewController *fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];    UIView *fromView = fromViewController.view;
    [containerView addSubview:fromView];    
    //ToVC
    UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];    UIView *toView = toViewController.view;
    [containerView addSubview:toView];
    toView.hidden = YES;    
    //图片背景的空白view (设置和控制器的背景颜色一样，给人一种图片被调走的假象 [可以换种颜色看看效果])
    UIView *imgBgWhiteView = [[UIView alloc] initWithFrame:self.transitionBeforeImgFrame];
    imgBgWhiteView.backgroundColor = bgColor;
    [containerView addSubview:imgBgWhiteView];    
    //有渐变的黑色背景
    UIView *bgView = [[UIView alloc] initWithFrame:containerView.bounds];
    bgView.backgroundColor = [UIColor blackColor];
    bgView.alpha = 0;
    [containerView addSubview:bgView];    
    //过渡的图片
    UIImageView *transitionImgView = [[UIImageView alloc] initWithImage:self.transitionImgView.image];
    transitionImgView.frame = self.transitionBeforeImgFrame;
    [transitionContext.containerView addSubview:transitionImgView];
    
    [UIView animateWithDuration:[self transitionDuration:transitionContext] delay:0.0 usingSpringWithDamping:0.7 initialSpringVelocity:0.3 options:UIViewAnimationOptionCurveLinear animations:^{
        
        transitionImgView.frame = self.transitionAfterImgFrame;
        bgView.alpha = 1;
        
    } completion:^(BOOL finished) {
        
        toView.hidden = NO;
        
        [imgBgWhiteView removeFromSuperview];
        [bgView removeFromSuperview];
        [transitionImgView removeFromSuperview];        
        BOOL wasCancelled = [transitionContext transitionWasCancelled];        //设置transitionContext通知系统动画执行完毕
        [transitionContext completeTransition:!wasCancelled];
    }];
    
}

代码中，空白view和渐变的黑色背景都是扮演辅助角色的，而过渡图片才是核心。要实现动画效果，必须得有三个数据：image图像、转场前imageView的frame和转场后imageView的frame。这三个数据都是从第一个VC里面计算得来的，只需按逻辑步骤一步步传过来即可。
其中要注意的点:
(1) toView加到containerView上时，需要先隐藏，等到动画结束时再显示，不然toView 会盖住整个fromView。
(2) 其中除了系统的fromView和toView，其它所有的view在动画结束时必须移除，不然会一直在containerView上存在。
(3) popAnimator 中的fromView 不用加到containerView中了，因为此转场在pop时不需要fromView的参与了，加上会出现整个界面没有变化的bug。

案例三小结:

1.在VC中计算好Animator中必要的三个参数，然后依次传递到Animator中。
2.获取得到传入的数据，对过渡图片根据做动画处理

四、基础转场-交互式

交互式转场：人为控制转场过渡，最常见的交互转场动画就是系统自带的侧滑返回。

此案例请对照demo

1.实现代理方法

在LYNavBaseInteractiveAnimatedTransition类里，相较于案例一中的UINavigationControllerDelegate协议，要多实现一个代理方法， 即：

- (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
                                   interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController;

此方法会返回一个遵循了UIViewControllerInteractiveTransitioning协议的代理对象，实现这个方法，系统转场时，就会知道当前是否有交互式的转场，有便执行交互转场，无则执行普通自定义的转场动画。
具体代码实现:

- (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
                                            animationControllerForOperation:(UINavigationControllerOperation)operation
                                                         fromViewController:(UIViewController *)fromVC
                                                           toViewController:(UIViewController *)toVC{    if (operation == UINavigationControllerOperationPush) {        return self.customAnimator;
        
    }else if (operation == UINavigationControllerOperationPop){        return self.customAnimator;
    }    return nil;
}

- (LYNavBaseCustomAnimator *)customAnimator
{    if (_customAnimator == nil) {
        _customAnimator = [[LYNavBaseCustomAnimator alloc]init];
    }    return _customAnimator;
}

- (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
                                   interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController{    
    if (self.gestureRecognizer)        return self.percentIntractive;    else
        return nil;
}

- (void)setGestureRecognizer:(UIPanGestureRecognizer *)gestureRecognizer{
    _gestureRecognizer = gestureRecognizer;
}
- (LYNavBasePercentDerivenInteractive *)percentIntractive{    if (!_percentIntractive) {
        _percentIntractive = [[LYNavBasePercentDerivenInteractive alloc] initWithGestureRecognizer:self.gestureRecognizer];
    }    return _percentIntractive;
}

其中，
（1）gestureRecognizer 是在secondVC加入的一个交互手势，在pop时是需要传递过来的，后面会讲到。
（2）percentIntractive 是LYNavBasePercentDerivenInteractive 类对象，这个类继承于 UIPercentDrivenInteractiveTransition类，UIPercentDrivenInteractiveTransition类是交互转场中的核心类，后面会讲到。

2.新建一个继承于 UIPercentDrivenInteractiveTransition类的类 LYNavBasePercentDerivenInteractive

UIPercentDrivenInteractiveTransition类是系统定义的，它遵循了 UIViewControllerInteractiveTransitioning协议，故可做为第一节中的代理对象。
此类又定义了三个方法供交互转场时调用：

//更新转场过程的百分比- (void)updateInteractiveTransition:(CGFloat)percentComplete;//取消转场- (void)cancelInteractiveTransition;//完成转场- (void)finishInteractiveTransition;

具体代码实现:

- (void)gestureRecognizeDidUpdate:(UIPanGestureRecognizer *)gestureRecognizer
{    CGFloat scale = 1 - [self percentForGesture:gestureRecognizer];    
    switch (gestureRecognizer.state)
    {        case UIGestureRecognizerStateBegan:            //没用
            
            break;        case UIGestureRecognizerStateChanged:            
            //更新百分比
            [self updateInteractiveTransition:scale];            
            break;        case UIGestureRecognizerStateEnded:            
            if (scale < 0.3){                //取消转场
                [self cancelInteractiveTransition];
            }            else{                //完成转场
                [self finishInteractiveTransition];
            }            break;        default:            //取消转场
            [self cancelInteractiveTransition];            break;
    }
}

在此类中，根据pop时传递过来的手势信息，计算获得滑动距离所占屏幕的百分比，从而根据百分比来处理转场的取消与完成。

3.传值

此处传值跟之前都有不同的地方，我们这里的交互是在pop时做交互动画，故传值是在SecondVC中传入的。
具体代码:

- (void)interactiveTransitionRecognizerAction:(UIPanGestureRecognizer *)gestureRecognizer
{    CGPoint translation = [gestureRecognizer translationInView:gestureRecognizer.view];    
    CGFloat scale = 1 - fabs(translation.x / kScreenWidth);
    scale = scale < 0 ? 0 : scale;    
    NSLog(@"second = %f", scale);    switch (gestureRecognizer.state) {        case UIGestureRecognizerStatePossible:            break;        case UIGestureRecognizerStateBegan:{            
            //1. 设置代理
            self.animatedTransition = nil;            self.navigationController.delegate = self.animatedTransition;            
            //2. 传值
            self.animatedTransition.gestureRecognizer = gestureRecognizer;            
            //3. push跳转
            [self.navigationController popViewControllerAnimated:YES];
        }            break;        case UIGestureRecognizerStateChanged: {            
            break;
        }        case UIGestureRecognizerStateFailed:        case UIGestureRecognizerStateCancelled:        case UIGestureRecognizerStateEnded: {            
            self.animatedTransition.gestureRecognizer = nil;
        }
    }
}

此案例注意的点：
（1）LYNavBaseInteractiveAnimatedTransition类中的customAnimator是直接用的案例一中的

五、实战 - 网友提问 - Question One

此案例为本文章2楼网友的提问解答

此案例其实和案例三的实现方式基本一致，单从转场角度来说，不同点可以有两个：（1）转场前ImageView的frame不定，案例三中ImageView的frame就一个（2）转场后的位置跟案例三不同
而这两个不同点都是我们可以计算得到的，所以要实现这个动画不难。
先看代码

// 获取指定视图在window中的位置- (CGRect)getFrameInWindow:(UIView *)view
{    return [view.superview convertRect:view.frame toView:nil];
}

此方法即可解决（1）中的问题，点击cell时，传入cell上的UIImageView对象，即可返回此View在window上的frame，这样在转场中的过渡ImageView就可根据此frame设置转场前的位置了

- (CGRect)backScreenImageViewRectWithImage:(UIImage *)image{    
    CGSize size = image.size;    CGSize newSize;
    newSize.height = kScreenWidth * 0.6;
    newSize.width = newSize.height / size.height * size.width;    
    CGFloat imageY = 0;    CGFloat imageX = (kScreenWidth - newSize.width) * 0.5;    CGRect rect =  CGRectMake(imageX, imageY, newSize.width, newSize.height);    
    return rect;
}

此方法可解决（2）中的问题，传入image，即可根据自己的需求，计算得出转场后图片的位置。

六、图片浏览器-PictureBrowse

封装了图片浏览器，demo中是封装的模态方式跳转，如有需求导航方式push的，请将LYPictureBrowseInteractiveAnimatedTransition类中遵循的协议修改为UINavigationControllerDelegate，并修改相应的代理方法（请仿照上面几个案例），别忘了跳转中的present、dismiss修改为push、pop方法。

作者：dev_liyang
链接：https://www.jianshu.com/p/ec08f43808aa