转场动画就是从一个场景以动画的形式过渡到另一个场景。转场动画的使用一般分为以下几个步骤：

• 创建转场动画
• 设置转场类型、子类型（可选）及其他属性画
• 设置转场后的新视图并添加动画到图层

ios的画面切换的动画效果的API主要通过调用系统已定义的动画效果实现，这些效果已基本囊括开发的需求，如果需要更加复杂的效果，可以考虑CATransition来实现。

以下是基本的四种效果

kCATransitionPush 推入效果
kCATransitionMoveIn 移入效果
kCATransitionReveal 截开效果
kCATransitionFade 渐入渐出效果

以下API效果可以安全使用
cube 方块
suckEffect 三角
rippleEffect 水波抖动
pageCurl 上翻页
pageUnCurl 下翻页
oglFlip 上下翻转
cameraIrisHollowOpen 镜头快门开
cameraIrisHollowClose 镜头快门开

// 使用场景2

 

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);

 

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0); // toView added to fromView.superview, fromView removed from its superview

 CATransition-Basic -代码传送门

下面通过自定义push 和 present 两个demo来分析下转场动画的实现原理：

自定义 Push

首先要完场自定义Push 我们需要创建一个转场动画对象，继承于NSObject （导入<UIKit/UIKit.h>框架）并遵守UIViewControllerAnimatedTransitioning协议， 这里叫做MagicMoveTransition。

#import <Foundation/Foundation.h>

#import <UIKit/UIKit.h>

 

@interface MagicMoveTransition : NSObject<UIViewControllerAnimatedTransitioning>

 

@end

 

我们需要实现UIViewControllerAnimatedTransitioning协议里面的代理方法来实现转场动画效果。

 

该方法返回动画执行时间

 

、、、、、 

该方法用来实现两个VC间的动画布局

 

、、、、、

transitionContext 该参数 可以让我们去访问一些实现对象所必须的对象

 

 

扩展 UIViewControllerContextTransitioning

 

1.  - （UIView *）containerView;

   // 转场动画的容器 -> 添加两个控制器 视图内容 （注意添加的前后顺序）

   

2.  - (UIViewController *)viewControllerForKey:(NSString *)key;

   // 通过该方法， Key值 拿到过渡的两个VC

   

3.  - (CGRect)initialFrameForViewController:(UIViewController *)vc;

    - (CGRect)finalFrameForViewController:(UIViewController *)vc;

   // 通过这个方法 能够获得前后两个 ViewController 的frame，用来布局视图对象空间位置

 

 

现在我们可以通过 transitionContext开始做转场动画

    // 起始VC

    ViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];

    // 目的VC

    DeatailViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];

    // 转场视图容器

    UIView *containerView = [transitionContext containerView];

 

然后我们需要获取CollectionViewCell 上面的视图ImageView 进行做动画

 

扩展  iOS  , UIView 中坐标的转换

 

- (CGPoint)convertPoint:(CGPoint)point toView:(UIView *)view;

    // 将像素Point 由Point所在控制器转换到目标控制器视图View中， 返回在目标视图中的像素值。

 

 - (CGPoint)convertPoint:(CGPoint)point fromView:(UIView *)view;

    // 由上面一条相反，获取目标View的像素Point返回到当前控制器View中

    

 - (CGRect)convertRect:(CGRect)rect toView:(UIView *)view;

    // 将坐标frame的rect值，由当前所在的目标视图View中， 返回在当前视图中的rect

    

 - (CGRect)convertRect:(CGRect)rect fromView:(UIView *)view;

    // 将坐标frame的rect值，由当前所在的目标视图View中， 返回在当前视图中的rect

 

我们在这里通过获取我们点击的Cell，获取上面的ImageView

- (nullable NSArray<NSIndexPath *> *)indexPathsForSelectedItems; // returns nil or an array of selected index paths

 

- (nullable UICollectionViewCell *)cellForItemAtIndexPath:(NSIndexPath *)indexPath;

 

具体代码如下

    NSIndexPath *indexPath = [[fromVC.collectionView indexPathsForSelectedItems] firstObject];

    fromVC.indexPath = indexPath; // 记录indexPath 返回时使用

    CustomCollectionViewCell *cell = (CustomCollectionViewCell *)[fromVC.collectionView cellForItemAtIndexPath:indexPath];

    // 对Cell上面的图片 做截图 来实现过渡动画视图

    UIView *screenShot = [cell.pic snapshotViewAfterScreenUpdates:NO];

    screenShot.backgroundColor = [UIColor clearColor];

    screenShot.frame = fromVC.finiRect = [containerView convertRect:cell.pic.frame fromView:cell.pic.superview];

    // fromVC.finiRect 返回时获取cell上的坐标

    cell.pic.hidden = YES;

    // 在进入下一个界面时，隐藏当前Cell上面的imageView 

 

然后我们 来 设置第二个控制器的位置和透明度

    toVC.view.frame = [transitionContext finalFrameForViewController:toVC];

    toVC.view.alpha = 0.5;

    toVC.secondPic.hidden = YES;

    // 把动画前后的两个ViewController加到容器控制器中

    [containerView addSubview:toVC.view];

    [containerView addSubview:screenShot];

        // 注意添加顺序

 

现在开始做动画，可以根据你的项目需求来获取，控制器内的控件，来完成彼此间的动画交互。

 

这里 :[self transitionDuration:transitionContext]会返回转场动画所进行时间。

执行该语句来告诉系统转场动画结束， 这里使用!transitionContext.transitionWasCancelled，是为了后面做手势交互，避免手势取消时，造成卡顿现象。

[transitionContext completeTransition:!transitionContext.transitionWasCancelled];

}];

 

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

        // 调用自动布局

        [containerView layoutIfNeeded];

        fromVC.view.alpha = 1.0;

        // 布局坐标

       // 获取到下一个VC中的secondPic.frame,使Cell上面的截图，移动到第二VC视图中， 动画结束后， 移除该截图。视觉上会产生一种过渡效果。

        screenShot.frame = [containerView convertRect:toVC.secondPic.frame toView:toVC.secondPic.superview];

    } completion:^(BOOL finished) {

        toVC.secondPic.hidden = NO;

        cell.pic.hidden = NO;

        // 动画截图移除View

        [screenShot removeFromSuperview];

        toVC.view.alpha = 1;

        // 动画结束

        // 一定不要忘记告诉系统动画结束

        // 执行

        [transitionContext completeTransition:!transitionContext.transitionWasCancelled];

}];

 

现在我们就可以来实现来使用自定义的转场动画对象

 

这里的转场动画属于自定义push， 由导航栏来控制，属于导航控制器来负责转场。我们让当前控制器来作为 UINavigationControllerDelegate代理对象， 并实现协议方法。

 

在视图已经出现的时候来指定代理对象为自身

- (void)viewDidAppear:(BOOL)animated

{

    [super viewDidAppear:animated];

    self.navigationController.delegate = self;

}

 

#pragma mark - 返回我们写好的转场对象

- (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController

                                            animationControllerForOperation:(UINavigationControllerOperation)operation

                                                         fromViewController:(UIViewController *)fromVC

                                                           toViewController:(UIViewController *)toVC

{

    if ([toVC isKindOfClass:[DeatailViewController class]]) {

        MagicMoveTransition *transition = [[MagicMoveTransition alloc] init];

        return transition;

    }

    return nil;

}

 

到这里我们push转场动画就已经实现了， pop回来的动画我们可以类比push来实现。

#import "MagicMoveBackTransition.h"

#import "ViewController.h"

#import "DeatailViewController.h"

#import "CustomCollectionViewCell.h"

@implementation MagicMoveBackTransition

 

#pragma mark - 返回动画时间

 

- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext

{

    return 0.6f;

}

#pragma mark - 两个VC过渡动画

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

{

    // 目的VC

    ViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];

    // 起始VC

    DeatailViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];

    // 转场视图容器

    UIView *containerView = [transitionContext containerView];

      UIView *screenShot = [fromVC.secondPic snapshotViewAfterScreenUpdates:NO];

    screenShot.backgroundColor = [UIColor clearColor];

    screenShot.frame = [containerView convertRect:fromVC.secondPic.frame fromView:fromVC.secondPic.superview];

    fromVC.secondPic.hidden = YES;

    

    // 初始化第二个Vc

    toVC.view.frame = [transitionContext finalFrameForViewController:toVC];

    

    CustomCollectionViewCell *cell = (CustomCollectionViewCell *)[toVC.collectionView cellForItemAtIndexPath:toVC.indexPath];

    cell.pic.hidden = YES;

    [containerView insertSubview:toVC.view belowSubview:fromVC.view];

    [containerView addSubview:screenShot];

    // 发生动画

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

        

        fromVC.view.alpha = 0;

        screenShot.frame = toVC.finiRect;

        

        

    } completion:^(BOOL finished) {

        

        [screenShot removeFromSuperview];

        fromVC.secondPic.hidden = NO;

        cell.pic.hidden = NO;

        fromVC.view.alpha = 1;

        // 结束

        [transitionContext completeTransition:!transitionContext.transitionWasCancelled];

    }];

    }

@end

 

另外我们可以通过添加手势,来能实现系统手势驱动;UIPercentDrivenInteractiveTransition 能够帮助我们完成视图切换的过度动画

在 DeatailViewController pop回来时添加屏幕边缘手势

    // 添加屏幕边缘手势

    UIScreenEdgePanGestureRecognizer *edgePagGesture = [[UIScreenEdgePanGestureRecognizer alloc] initWithTarget:self action:@selector(edgeAction:)];

    edgePagGesture.edges = UIRectEdgeLeft; // 设置什么便捷滑入

    [self.view addGestureRecognizer:edgePagGesture];

 

 

// 实现手势方法

iOS7 新加入一个类对象 UIPercentDrivenInteractiveTransition ;这个对象会根据我们的手势，来决定我们界面跳转的自定义过渡效果，我们在手势action方法中，对手势驱动状态进行判断，来决定是否过渡动画。

- (void)edgeAction:(UIScreenEdgePanGestureRecognizer *)sender

{

    // 计算手指滑动的距离

    

    // 计算手势驱动占屏幕的百分比

    CGFloat distance = [sender translationInView:sender.view].x / self.view.bounds.size.width;

    distance = MIN(1.0, MAX(0.0, distance));

    // 限制百分比 0 - 1 之间

    

    if (sender.state == UIGestureRecognizerStateBegan) {

        self.percentDrivenTransition = [[UIPercentDrivenInteractiveTransition alloc] init];

        [self.navigationController popViewControllerAnimated:YES];

    }

    else if (sender.state == UIGestureRecognizerStateChanged)

    {

        // 手势在慢慢划入 // 把手势的进度告诉 UIPercentDrivenInteractiveTransition

        [self.percentDrivenTransition updateInteractiveTransition:distance];

    }

    else if (sender.state == UIGestureRecognizerStateEnded || sender.state == UIGestureRecognizerStateCancelled)

    {

// 判断当手势到达一定范围内 

        if (distance > 0.5) {

            [self.percentDrivenTransition finishInteractiveTransition];

        }

        else

        {

            [self.percentDrivenTransition cancelInteractiveTransition];

        }

        self.percentDrivenTransition = nil;

    }

}

 

// 执行手势驱动代理方法

 

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

{

    if ([animationController isKindOfClass:[MagicMoveBackTransition class]]) {

        return self.percentDrivenTransition;

    }

    else

    {

        return nil;

    }

}

 

 

 

到这里我们就完成了自定义push

代码传送门

自定义 Present