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

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

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