仿微信图片浏览转场、酷狗转场 - iOS自定义交互式转场动画(从零到一 + 实战案例)

文章首发平台:简书http://www.jianshu.com/p/ec08f43808aa

转场动画

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

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

目录
0、CATransition（系统转场动画）
一、基础转场-非交互式（初步认识自定义转场动画）
二、仿酷狗转场-非交互式（巩固对转场的认识）
三、仿微信转场-非交互式（加强对转场的认识）
四、基础转场-交互式
五、实战 - 网友提问 - Question One

说明：本文章目前只讲解了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 )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 )transitionContext;
//这个是转场上下文，提供转场过程中两个控制器的具体信息。
- (void)animateTransition:(id )transitionContext;`

具体代码实现

- (NSTimeInterval)transitionDuration:(nullable id )transitionContext{
    return 0.5;
}
- (void)animateTransition:(id )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
||                      ||
fromVC                toVC 

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

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

案例一小结

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

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

动画解析:

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

@implementation LYNavKuGouPushAnimator

- (NSTimeInterval)transitionDuration:(id)transitionContext{
    return 0.4;
}

- (void)animateTransition:(id)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动画也就可以实现了。

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

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

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

- (void)animateTransition:(id)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 )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 )navigationController:(UINavigationController *)navigationController
                                   interactionControllerForAnimationController:(id ) 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，即可根据自己的需求，计算得出转场后图片的位置。

——————– 完结 ——————–

demo:https://github.com/Developer-LiYang/LYCustomTransition