iOS自定义转场动画之Pop,Push

苹果在iOS7就开放了转场动画的API,最近看了TransitionAnimation自定义转场动画这篇文章,学习了一波,决定自己做个笔记。

以上也是引用那位老哥的图,转场的主要方法都在这了

设置代理

既然是要自定义转场动画,首先就是要设置代理。转场代理有三种:
-<UINavigationControllerDelegate>
-< UITabBarControllerDelegate >
-< UIViewControllerTransitioningDelegate >
你要写哪种控制器的转场,就在要转场的控制器里遵循哪种代理。我这是写的push 、pop,就遵循<UINavigationControllerDelegate>

@interface ViewController ()<UINavigationControllerDelegate,UIViewControllerTransitioningDelegate>

@end

- (void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    //保证代理不被别的控制器拿走
    self.navigationController.delegate = self;
}

- (void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    self.navigationController.delegate = nil;
}

#pragma mark - UINavigationControllerDelegate

- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC{
    if (operation == UINavigationControllerOperationPush)
    {
        return [CustomTransition initWithType:KWTransitionTypePush];
    }
    else if (operation == UINavigationControllerOperationPop)
    {
        return [CustomTransition initWithType:KWTransitionTypePop];
    }
    return nil;
}

编写转场动画类

这是核心部分,这个类就是实现转场各种花里胡哨的转场效果。要遵循<UIViewControllerAnimatedTransitioning>协议。一下是.h头文件:

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

typedef NS_ENUM(NSUInteger, KWTransitionType) {// 区分转场类型
    KWTransitionTypePush = 0,
    KWTransitionTypePop,
    
};

@interface CustomTransition : NSObject<UIViewControllerAnimatedTransitioning>

+ (instancetype)initWithType:(KWTransitionType)type;

@end

<UIViewControllerAnimatedTransitioning>协议有两个必须实现的方法,我们来看看这两个方法的作用,以下是.m的部分内容:

#pragma mark - UIViewControllerAnimatedTransitioning

/**
 转场动画时长
 */
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext{
    return 0.5;
}

/**
 执行动画
 */
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{
    switch (self.type) {
        case KWTransitionTypePush:
            [self push:transitionContext];
            break;
        case KWTransitionTypePop:
            [self pop:transitionContext];
            break;
            
        default:
            break;
    }
    
}

在写转场动画之前,我要要先知道下:转场动画的本质就是下个场景的视图(toView)替换当前场景的视图(fromView),这些动画都是在containerView里面展现的。
举个例子:A控制器push B控制器,那么A.view就是(fromView),B.view就是(toView)。了解这些后,我们就可以写具体的转场动画了。

Push实现

- (void)push:(id<UIViewControllerContextTransitioning>)transitionContext{
    // 获取目标视图
    UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];
    UIView *fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
    
    // 将目标视图添加到容器containerView内
    UIView *contentView = [transitionContext containerView];
    [contentView addSubview:fromView];
    [contentView addSubview:toView];
    
    CGFloat width = contentView.frame.size.width;
    toView.transform = CGAffineTransformMakeTranslation(width, 0);
    
    NSTimeInterval duration = [self transitionDuration:transitionContext];
    
    [UIView animateWithDuration:duration animations:^{
        fromView.transform = CGAffineTransformMakeScale(0.9, 0.9);
        toView.transform = CGAffineTransformIdentity;
    } completion:^(BOOL finished) {
        
        fromView.transform = CGAffineTransformIdentity;
        // 标记是否成功,否则系统会认为转场失败,造成无法交互
        [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
    }];
}
}

Pop实现

B控制器popA控制器,这时候fromViewB.viewtoViewA.view,这点要注意下。

- (void)pop:(id<UIViewControllerContextTransitioning>)transitionContext{
    // 获取目标视图
    UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];
    UIView *fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
    
    // 将目标视图添加到容器containerView内
    UIView *contentView = [transitionContext containerView];
    // 先将目标视图缩放
    toView.transform = CGAffineTransformMakeScale(0.9, 0.9);
    [contentView addSubview:toView];
    [contentView addSubview:fromView];
    
    CGFloat width = contentView.frame.size.width;
    NSTimeInterval duration = [self transitionDuration:transitionContext];
    
    [UIView animateWithDuration:duration animations:^{
        toView.transform = CGAffineTransformIdentity;
        fromView.transform = CGAffineTransformMakeTranslation(width, 0);
    } completion:^(BOOL finished) {
        
        toView.transform = CGAffineTransformIdentity;
        // 标记是否成功,否则系统会认为转场失败,造成无法交互
        [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
    }];
}

来看看最终效果


Untitled.gif

但是!

但是,单单这样实现的话,你会发现我无法用手势返回,只能点击左上角返回按钮。体验实在不好,这时候就要引入交互转场UIPercentDrivenInteractiveTransition配合手势实现。
首先声明一个UIPercentDrivenInteractiveTransition属性。

@property (nonatomic, strong) UIPercentDrivenInteractiveTransition *interactiveTransition;

然后在给self.view添加手势

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    [self.view addGestureRecognizer:pan];
}

- (void)pan:(UIPanGestureRecognizer *)pan{
    //产生百分比
    CGFloat process = [pan translationInView:self.view].x / ([UIScreen mainScreen].bounds.size.width);
    CGFloat xStart = [pan locationInView:self.view].x;
    // 触摸起点在50以内,才触发pop事件
    BOOL shouldPop = xStart < 50 ? YES : NO;
    if (!shouldPop) return;

    process = MIN(1.0,(MAX(0.0, process)));
    if (pan.state == UIGestureRecognizerStateBegan) {
        self.interactiveTransition = [UIPercentDrivenInteractiveTransition new];
        shouldPop ? [self.navigationController popViewControllerAnimated:YES] : nil;
    }
    else if (pan.state == UIGestureRecognizerStateChanged){
        [self.interactiveTransition updateInteractiveTransition:process];
    }
    else if (pan.state == UIGestureRecognizerStateEnded || pan.state == UIGestureRecognizerStateCancelled){
        process > 0.4 ? [self.interactiveTransition finishInteractiveTransition] : [self.interactiveTransition cancelInteractiveTransition];
        self.interactiveTransition = nil;
        
    }
}

以上就可以手势返回了。但是每个控制器都要遵循<UINavigationControllerDelegate,UIViewControllerTransitioningDelegate>代理,实现代理方法,实在是多此一举,我们可以写在基类控制器里面,就不用写多余的代码了,美滋滋。
这些笔记只是抛砖引玉,之后会跟新Modal转场。
这里是Demo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容