IOS 导航动画之转场效果

今天卓爷感触颇深的说:我现在才发现时间才是最宝贵的。虽然还没有这么深的感触,但也让我意识到不能再这么浪费了。
是时候继续学习总结之路了。

先开个贴,后续补全,结束导航栏动画效果相关的内容。

导航栏自定义动画的方案:

1.我们可以实现navigationController的delegate协议方法:

//这个代理方法是自定义 push/pop 方法时转场的动画效果的
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC;

//这个方法是看名字大概就是自定义 侧滑返回时 的转场动画效果的了
- (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
                                   interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController;

2.这两个协议方法都需要返回一个实现了UIViewControllerAnimatedTransitioning/UIViewControllerInteractiveTransitioning的id类。所以我们专门建一个NSObject类声明实现上述协议。

//这几个方法是Transitioning协议里面必须实现的方法

#pragma mark UIViewControllerAnimatedTransitioning
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext;

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

#pragma mark UIViewControllerInteractiveTransitioning
- (void)startInteractiveTransition:(id <UIViewControllerContextTransitioning>)transitionContext;

3.上述几个方法都提到了一个<UIViewControllerContextTransitioning>协议,到这里也许我们还需要创建一个NSObject<UIViewControllerContextTransitioning >类,而这个类里面有几个熟悉的方法:

//侧滑返回的动画应该就是在这里面定制了吧!
- (void)updateInteractiveTransition:(CGFloat)percentComplete;
- (void)finishInteractiveTransition;
- (void)cancelInteractiveTransition;

这里用了很多也许大概之类的词,因为还只是在浏览UINavigaionController类里面的内容时做的猜测。待代码写出来我再po出来

8.23 更新代码

定制push与pop动画

  1. 声明UINavigationControllerDelegate协议,给UINavigationController设置代理(略),实现下面这个协议方法。该协议方法返回一个实现了UIViewControllerAnimatedTransitioning协议的对象。
#pragma mark UINavigationControllerDelegate
//通过push/pop方法跳转界面调用该协议方法
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC {
    
    self.transition.isPop = (operation == UINavigationControllerOperationPop);
    return self.transition;
}

2.创建实现<UIViewControllerAnimatedTransitioning>协议的类:
(了解CATransform3D与position,anchorPoint)

#pragma mark UIViewControllerAnimatedTransitioning
//设置动画的时间
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext {
    return 0.35;
}

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
  
    UIView *fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
    UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];
    

//需要完成的动画在这里对fromView和toView作用即可完成push/pop自定义动画。
    //这里写的动画以是push动画。
    CATransform3D toTranslation = CATransform3DMakeRotation(M_PI_2, 0, 0, 1);;
    CATransform3D fromTranslation = CATransform3DIdentity;//CATransform3DMakeTranslation(-375 * 0.33, 0, 0);
    
    //判断是否为pop,如果是pop需要把toView加在fromView的下面,如果是push则把toView加在fromView的上面
    NSLog(@"position:%@, anchorPoint:%@", NSStringFromCGPoint(fromView.layer.position), NSStringFromCGPoint(fromView.layer.anchorPoint));
    if (self.isPop) {
        [transitionContext.containerView insertSubview:toView atIndex:0];
        fromView.layer.anchorPoint = CGPointMake(1, 1);
        fromView.layer.position = CGPointMake(fromView.bounds.size.width, fromView.bounds.size.height);
        
        //pop动画与push动画相反,交换toTransition/fromTransition即可做到
        CATransform3D exchange = toTranslation;
        toTranslation = fromTranslation;
        fromTranslation = exchange;
    }else {
        [transitionContext.containerView addSubview:toView];
        toView.layer.anchorPoint = CGPointMake(1, 1);
        toView.layer.position = CGPointMake(toView.bounds.size.width, toView.bounds.size.height);
    }

    //如果不清楚fromView和toView具体是哪个,可以设置背景色观察
    toView.layer.transform = toTranslation;
//    fromView.backgroundColor = [UIColor cyanColor];
    

    [UIView animateWithDuration:0.35 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
            fromView.layer.transform = fromTranslation;
            toView.layer.transform = CATransform3DIdentity;
    } completion:^(BOOL finished) {
        
        [transitionContext completeTransition:YES];
        fromView.layer.transform = CATransform3DIdentity;
//        fromView.backgroundColor = [UIColor whiteColor];
    }];
}

到这里自定义push/pop动画就已经完成了效果如下


push/pop.gif

定制交互动画(侧滑返回手势的动画)

1.同样还是实现navigationController的delegate协议方法:

//通过交互手势(侧滑返回)返回调用该协议方法
- (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
                                   interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController{
    return self.interactive;
}

2.创建实现了<UIViewControllerInteractiveTransitioning>协议的类。这里苹果建议用UIPercentDrivenInteractiveTransition,在它的基础上做我们需要的动画定制即可。


#import <UIKit/UIKit.h>

@interface YHHTransitionAnimation : UIPercentDrivenInteractiveTransition <UIViewControllerInteractiveTransitioning>

@end
#import "YHHTransitionAnimation.h"

@implementation YHHTransitionAnimation {
    id<UIViewControllerContextTransitioning> _transitionContext;
    UIView *_toView;
    UIView *_fromView;

    CATransform3D _toTranslation;
    CATransform3D _fromTranslation;
}

// 交互动画开启时会调用,在这里完成一些动画初始化操作
- (void)startInteractiveTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
    _transitionContext = transitionContext;
    _toView = [transitionContext viewForKey:UITransitionContextToViewKey];
    _fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
    [transitionContext.containerView insertSubview:_toView atIndex:0];
    
// 定制自己想要的动画,这里只有pop动画
    _toTranslation = CATransform3DMakeTranslation(0, -667*0.33, 0);
    _fromTranslation = CATransform3DMakeTranslation(0, 667, 0);
    NSLog(@"%f",_fromTranslation.m42);
    NSLog(@"动画响应");
}

/*
 *手指滑动过程中会不断调用updateInteractiveTransition方法,更新toView/fromView的位置
 *@prama percentComplete: 动画完成百分比
**/
- (void)updateInteractiveTransition:(CGFloat)percentComplete {
    [super updateInteractiveTransition:percentComplete];
    CATransform3D toTranslation = CATransform3DMakeTranslation(_toTranslation.m41 * (1-percentComplete), _toTranslation.m42 * (1-percentComplete), _toTranslation.m43 * (1-percentComplete));
    CATransform3D fromTranslation = CATransform3DMakeTranslation(_fromTranslation.m41 * percentComplete, _fromTranslation.m42 * percentComplete, _fromTranslation.m43 * percentComplete);
    
    NSLog(@"%f",_fromTranslation.m42);
    
    _toView.layer.transform = toTranslation;
    _fromView.layer.transform = fromTranslation;
}

// 松手时动画完成pop动画调用finishInteractiveTransition
- (void)finishInteractiveTransition {
    [super finishInteractiveTransition];
    [UIView animateWithDuration:0.35 * (1-self.percentComplete) delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        
        _fromView.layer.transform = _fromTranslation;
        _toView.layer.transform = CATransform3DIdentity;
    } completion:^(BOOL finished) {
        [_transitionContext completeTransition:YES];
        NSLog(@"finish");
    }];
}

// 松手时动画取消pop动画调用cancelInteractiveTransition
- (void)cancelInteractiveTransition {
    [super cancelInteractiveTransition];
    [UIView animateWithDuration:0.35 * self.percentComplete delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        
        _fromView.layer.transform = CATransform3DIdentity;
        _toView.layer.transform = _toTranslation;
    } completion:^(BOOL finished) {
        [_transitionContext completeTransition:NO];
        NSLog(@"cancel");
    }];
}

- (void)dealloc {
    NSLog(@"动画销毁");
}
@end

3.创建手势

    _screenEdgePanGesture = [[UIScreenEdgePanGestureRecognizer alloc] initWithTarget:self action:@selector(panView:)];
    _screenEdgePanGesture.edges = UIRectEdgeLeft;
    _screenEdgePanGesture.delegate = self;
    [self.view addGestureRecognizer:_screenEdgePanGesture];
- (void)panView:(UIPanGestureRecognizer *)pan {
    CGFloat xTranslation = [pan translationInView:self.view].x - 20;
    CGFloat xVelocity = [pan velocityInView:pan.view].x;
    
    if (pan.state == UIGestureRecognizerStateBegan) {
        self.interactive = [[YHHTransitionAnimation alloc] init];
        [self popViewControllerAnimated:YES];
        NSLog(@"手势开始");
    }else if (pan.state == UIGestureRecognizerStateChanged) {
        // 设置一个起触点,防止误触。
        if (xTranslation > 0) {
            [self.interactive updateInteractiveTransition:(xTranslation + 10)/Screen_Width];
        }
//        NSLog(@"%f",xTranslation);
    }else if (pan.state == UIGestureRecognizerStateEnded) {
        // 设置阻力加速度f,通过速度与阻力作出最终位置的预测
        CGFloat f = 2.0;
        CGFloat preXTranslation = (xTranslation + 10) + (0.5 * xVelocity / f);
        
        if (preXTranslation >= 375 * 0.5) {
            [self.interactive finishInteractiveTransition];
        }else {
            [self.interactive cancelInteractiveTransition];
        }
        self.interactive = nil;
        NSLog(@"手势结束");
    }
}

这里的关键在于:为什么要self.interactive要在手势开始时创建,手势结束时销毁:(这里可以分别在下列方法里打上断点调试一下)A在B之前调用,而如果B return的不为nil则不会响应A。
意思是:如果self.interactive在pop完成后不销毁,则无法完成之后的pop/push动画了。

- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC;
2-----方法A.


- (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
                                   interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController;
3-----方法B.

- (void)panView:(UIPanGestureRecognizer *)pan;-----1

-----?表示调用顺序
交互手势.gif

github

这里只讲解了UINavigationController的转场动画定制。但是UITabBarController切换childController、ViewController的Present动画都可以通过分别实现UITabBarControllerDelegate、UIViewControllerTransitioningDelegate里对应的协议方法实现。

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

推荐阅读更多精彩内容