iOS转场动画的三种方式

1.CATransition

CATransition是CAAnimation的子类，用于过渡动画或转场动画。为视图层移入移除屏幕提供转场动画。首先来看一下简单的Demo：

   CATransition *animation = [CATransition animation];
    animation.type = kCATransitionFade;
    animation.subtype = kCATransitionFromRight;
    animation.duration = 1.0;
    // 在window上执行CATransition, 即可在ViewController转场时执行动画
    [self.view.window.layer addAnimation:animation forKey:@"kTransitionAnimation"];
    
    AViewController *vc = [[AViewController alloc] init];
    [self presentViewController:vc animated:NO completion:nil];

将该动画添加到window.layer上，则会present或push时使用指定的转场动画。
其中最主要的两个属性就是type和subtype。

type：转场动画的类型。
官方SDK只提供了四种转场动画的类型，即:

CA_EXTERN NSString * const kCATransitionFade;
CA_EXTERN NSString * const kCATransitionMoveIn;
CA_EXTERN NSString * const kCATransitionPush;
CA_EXTERN NSString * const kCATransitionReveal;

私有的type：

NSString *const kCATransitionCube = @"cube"; 
NSString *const kCATransitionSuckEffect = @"suckEffect"; 
NSString *const kCATransitionOglFlip = @"oglFlip"; 
NSString *const kCATransitionRippleEffect = @"rippleEffect"; 
NSString *const kCATransitionPageCurl = @"pageCurl"; 
NSString *const kCATransitionPageUnCurl = @"pageUnCurl"; 
NSString *const kCATransitionCameraIrisHollowOpen = @"cameraIrisHollowOpen";
NSString *const kCATransitionCameraIrisHollowClose = @"cameraIrisHollowClose";

subtype:动画类型的方向

CA_EXTERN NSString * const kCATransitionFromRight;
CA_EXTERN NSString * const kCATransitionFromLeft;
CA_EXTERN NSString * const kCATransitionFromTop;
CA_EXTERN NSString * const kCATransitionFromBottom;

上面讲的是给window.layer添加transition，这样使得在present或push时使用指定的转场动画。
既然讲到这里了，就看一下把transition加在layer上。
看一下示例代码：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 100, 50)];
    
    [button setTitle:@"进入" forState:UIControlStateNormal];
    
    button.backgroundColor = [UIColor redColor];
    
    [button addTarget:self action:@selector(buttonClicked) forControlEvents:UIControlEventTouchUpInside];
    
    [self.view addSubview:button];
    
    _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 300, 150, 150)];
    [self.view addSubview:_imageView];
    _imageView.backgroundColor = [UIColor redColor];
    _imageArray = @[[UIImage imageNamed:@"成果秀1"],[UIImage imageNamed:@"点赞他人1"],[UIImage imageNamed:@"偷师学艺1"],[UIImage imageNamed:@"学会欣赏3"]];
    
    _imageView.image = [UIImage imageNamed:@"成果秀1"];
}



- (void)buttonClicked{
  
    CATransition *animation = [CATransition animation];
    animation.type = @"cube";
    animation.subtype = kCATransitionFromRight;
    animation.duration = 1.0;
    //换图片的时候使用转场动画
    [self.imageView.layer addAnimation:animation forKey:nil];
    //cycle to next image
    UIImage *currentImage = self.imageView.image;
    NSUInteger index = [self.imageArray indexOfObject:currentImage];
    index = (index + 1) % [self.imageArray count];
    self.imageView.image = self.imageArray[index];
   
}

2.transitionFromViewController

UIViewController自带的方法:
transitionFromViewController:toViewController:duration:options:animations:completion:这个转场动画是用在当一个父视图控制器中有几个childViewController，当要在这几个子视图控制器之间切换时就可以用这个方法。

AViewController *a = self.childViewControllers[0];
BViewController *b = self.childViewControllers[1];
CViewController *c = self.childViewControllers[2];

// Curl 翻页效果
// UIViewAnimationOptionTransitionCurlUp, UIViewAnimationOptionTransitionCurlDown
// Flip 翻转效果
// UIViewAnimationOptionTransitionFlipFromLeft, UIViewAnimationOptionTransitionFlipFromRight
// UIViewAnimationOptionTransitionFlipFromTop, UIViewAnimationOptionTransitionFlipFromDown

[self transitionFromViewController:_currentViewController
                  toViewController:b
                          duration:0.5
                           options:UIViewAnimationOptionTransitionFlipFromRight
                        animations:^{

} completion:^(BOOL finished) {

}];

3.Transition Animation

1 UINavigationControllerDelegate + UIViewControllerAnimatedTransitioning

在UINavigationController的转场动画中，要指定UINavigationControllerDelegate对象：

self.navigationController.delegate = self;
[self.navigationController pushViewController:itemVC animated:YES];

UINavigationControllerDelegate主要有以下两个协议方法：

//pop
- (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
                          interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController NS_AVAILABLE_IOS(7_0);
//push
- (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
                                   animationControllerForOperation:(UINavigationControllerOperation)operation
                                                fromViewController:(UIViewController *)fromVC
                                                  toViewController:(UIViewController *)toVC  NS_AVAILABLE_IOS(7_0);

首先创建一个基类PDAnimatorBaseTransition实现UIViewControllerAnimatedTransitioning协议的方法。
UIViewControllerAnimatedTransitioning协议的方法有：

//动画持续时间
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext;
//转场动画实现细节
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;
动画结束时调用
- (void)animationEnded:(BOOL) transitionCompleted;

PDAnimatorBaseTransition.h

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

typedef NS_ENUM(NSInteger, PDAnimationType){
    
    animationTypePresent = 0,
    animationTypeDismiss ,
    animationTypePush ,
    animationTypePop,
};

@interface PDAnimatorBaseTransition : NSObject <UIViewControllerAnimatedTransitioning>

@property (nonatomic, assign)PDAnimationType animationType;

@property (nonatomic, strong)UIView *containerView;

@property (nonatomic, strong)UIViewController *from;

@property (nonatomic, strong)UIViewController *to;

@property (nonatomic, strong)UIView *fromView;

@property (nonatomic, strong)UIView *toView;

@property (nonatomic, weak)id <UIViewControllerContextTransitioning> transitionContext;



@end

PDAnimatorBaseTransition.m

#import "PDAnimatorBaseTransition.h"
@interface PDAnimatorBaseTransition() 
@end
@implementation PDAnimatorBaseTransition

#pragma mark -required
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext{
    
    return 1.f;
}

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{
    
    _transitionContext = transitionContext;
    
    _containerView = [transitionContext containerView];
    
    _from = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    
    _to = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    
    if([transitionContext respondsToSelector:@selector(viewForKey:)]){
        
        _fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
        _toView = [transitionContext viewForKey:UITransitionContextToViewKey];
    }else{
        
        _fromView = _from.view;
        _toView = _to.view;
    }
    
    if(self.animationType == animationTypePresent){
        
        [self animationPresent];
    }else if (self.animationType == animationTypeDismiss){
        
        [self animationDismiss];
    }else if (self.animationType == animationTypePop){
        
        [self animationPop];
    }else{
        
        [self animationPush];
    }
    
}
#pragma mark -optional

//动画结束时回调
- (void)animationEnded:(BOOL) transitionCompleted{   
}
- (void)animationPresent{  
}
- (void)animationDismiss{
}
- (void)animationPop{ 
}
- (void)animationPush{
  
}

然后创建子类PDAnimatorPUshPopTransition继承自PDAnimatorBaseTransition，实现- (void)animationPush，- (void)animationPop方法。

PDAnimatorPUshPopTransition.h

#import "PDAnimatorBaseTransition.h"
#import <UIKit/UIKit.h>

@interface PDAnimatorPUshPopTransition : PDAnimatorBaseTransition
@property (nonatomic, assign)CGPoint itemCenter;

@property (nonatomic, assign)CGSize itemSize;

@property (nonatomic, strong)NSString *imageName;

@end

PDAnimatorPUshPopTransition.m

#import "PDAnimatorPUshPopTransition.h"

@implementation PDAnimatorPUshPopTransition

- (instancetype)init{
    
    self = [super init];
    if(self){
        
        
    }
    
    return self;
}

- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext{
    
    return 5.f;
}

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{
    
    [super animateTransition:transitionContext];
}

- (void)animationPush{
    
    NSTimeInterval duration = [self transitionDuration:self.transitionContext];
    __weak typeof(self) weakSelf = self;
    
    self.containerView.backgroundColor = [UIColor lightGrayColor];
    
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 160)];
    imageView.image = [UIImage imageNamed:self.imageName];
    imageView.center = _itemCenter;
    
    CGFloat initialScale = _itemSize.width / CGRectGetWidth(imageView.frame);
    
    CGAffineTransform transform = CGAffineTransformIdentity;
    
    transform = CGAffineTransformScale(transform, initialScale, initialScale);
    transform = CGAffineTransformRotate(transform, M_PI);
    
    imageView.layer.affineTransform = transform;
    
 //   imageView.transform = CGAffineTransformMakeScale(initialScale, initialScale);
    
    [self.containerView addSubview:imageView];
    
    
    self.toView.frame = [self.transitionContext finalFrameForViewController:self.to];
    CGPoint finalCenter = self.toView.center;
    self.toView.center = finalCenter;
    self.toView.alpha = 0.0;
    //这一句一定要
    [self.containerView addSubview:self.toView];
    
    [UIView animateWithDuration:duration delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
        

        imageView.layer.affineTransform = CGAffineTransformIdentity;
        
        imageView.center = finalCenter;
        
        self.fromView.alpha = 0.0;
        self.containerView.backgroundColor = [UIColor redColor];
    } completion:^(BOOL finished){
        
        [imageView removeFromSuperview];
        
        weakSelf.toView.alpha = 1.0f;
        weakSelf.fromView.alpha = 1.0f;
        
        [weakSelf.transitionContext completeTransition:![weakSelf.transitionContext transitionWasCancelled]];
    }];
    
}

- (void)animationPop{
    
    NSTimeInterval duration = [self transitionDuration:self.transitionContext];
    __weak typeof(self) weakSelf = self;
    
    self.toView.frame = [self.transitionContext finalFrameForViewController:self.to];
    
    [self.containerView insertSubview:self.toView belowSubview:self.fromView];
    
    self.fromView.alpha = 0.0;
    
    self.fromView.backgroundColor = [UIColor clearColor];
    
    [UIView animateWithDuration:duration delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
        
        CGFloat initialScale = _itemSize.width / 200;
        weakSelf.fromView.transform = CGAffineTransformMakeScale(initialScale, initialScale);
        weakSelf.fromView.center = weakSelf.itemCenter;
        
        weakSelf.toView.alpha = 1.0f;
    } completion:^(BOOL finished){
        
        weakSelf.fromView.alpha = 0.0f;
        
        [weakSelf.transitionContext completeTransition:![weakSelf.transitionContext transitionWasCancelled]];
    }];
}


@end

然后我们在需要push的地方实现UINavigationControllerDelegate的协议方法：

- (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
                                            animationControllerForOperation:(UINavigationControllerOperation)operation
                                                         fromViewController:(UIViewController *)fromVC
                                                           toViewController:(UIViewController *)toVC  NS_AVAILABLE_IOS(7_0){
    
    PDAnimatorPUshPopTransition *animationTransition = [[PDAnimatorPUshPopTransition alloc] init];
    if(operation == UINavigationControllerOperationPush){
        
        animationTransition.animationType = animationTypePush;
    }else if (operation == UINavigationControllerOperationPop){
        
        animationTransition.animationType = animationTypePop;
    }
    
    NSArray *indexPaths = [self.collectionView indexPathsForSelectedItems];
    if (indexPaths.count == 0) {
        return nil;
    }
    
    NSIndexPath *selectedIndexPath = indexPaths[0];
    UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:selectedIndexPath];
    
    // 一定要加上convertPoint:toView:操作
    animationTransition.itemCenter = [self.collectionView convertPoint:cell.center toView:self.view];
    animationTransition.itemSize = cell.frame.size;
    animationTransition.imageName = [NSString stringWithFormat:@"%ld", (long)selectedIndexPath.item];
    
    return animationTransition;
}

2 UIViewControllerTransitioningDelegate+UIViewControllerAnimatedTransitioning

首先需要设置被present的Controller的transitionDelegate

DemoViewControllerTransitionPresentedViewController *presentedVC = [[DemoViewControllerTransitionPresentedViewController alloc] init];
presentedVC.transitionDelegate = self;
[self presentViewController:presentedVC animated:YES completion:nil];

UIViewControllerTransitioningDelegate的代理的协议方法有：

//       prenent       
- (id )animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source;
//       pop       
- (id )animationControllerForDismissedController:(UIViewController *)dismissed;
//       prenent       
- (id )interactionControllerForPresentation:(id )animator;
//       pop       
- (nullable id )interactionControllerForDismissal:(id )animator;

创建子类PDAnimationPresentTransitio继承自基类PDAnimatorBaseTransition，实现- (void)animationPresent，- (void)animationDismiss方法。

PDAnimationPresentTransition.h

#import "PDAnimatorBaseTransition.h"

@interface PDAnimationPresentTransition : PDAnimatorBaseTransition

@end

PDAnimationPresentTransition.m

#import "PDAnimationPresentTransition.h"

@implementation PDAnimationPresentTransition

- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext{
    
    return 1.f;
}

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{
    [super animateTransition:transitionContext];
}

- (void)animationPresent{
    
    NSTimeInterval duration = [self transitionDuration:self.transitionContext];
    __weak typeof(self) weakSelf = self;
    
    self.toView.frame = [self.transitionContext initialFrameForViewController:self.to];
    
    self.fromView.frame = [self.transitionContext initialFrameForViewController:self.from];
    
    CGAffineTransform transform = CGAffineTransformIdentity;
    transform = CGAffineTransformScale(transform, 0.001, 0.001);
    self.toView.layer.affineTransform = transform;
    
    [self.containerView addSubview:self.toView];
    
    self.toView.alpha = 0.0;
    
    [UIView animateWithDuration:duration delay:0 usingSpringWithDamping:0.6 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        
        self.toView.layer.affineTransform = CGAffineTransformIdentity;
        self.toView.frame = [self.transitionContext finalFrameForViewController:self.to];
        self.toView.alpha = 1.0;
    } completion:^(BOOL finished){
        
        BOOL wasCancelled = [weakSelf.transitionContext transitionWasCancelled];
        [weakSelf.transitionContext completeTransition:!wasCancelled];
    }];
    
}

然后我们在需要present的地方实现UIViewControllerTransitioningDelegate的代理方法。

- (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{
    
    PDAnimationPresentTransition *animationTransition = [[PDAnimationPresentTransition alloc] init];
    animationTransition.animationType = animationTypePresent;
    return animationTransition;
}

- (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{
    
    PDAnimationPresentTransition *animationTransition = [[PDAnimationPresentTransition alloc] init];
    animationTransition.animationType = animationTypePresent;
    return animationTransition;
}

最后编辑于：2018.04.09 21:14:01

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,772评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,458评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,610评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,640评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,657评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,590评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,962评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,631评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,870评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,611评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,704评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,386评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,969评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,944评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,179评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,742评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,440评论 2赞 342