美文网首页收藏ios
IOS 导航动画之转场效果

IOS 导航动画之转场效果

作者: 损失了成吨智商的小海Jy | 来源:发表于2017-08-19 01:38 被阅读490次

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

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

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

    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里对应的协议方法实现。

    相关文章

      网友评论

        本文标题:IOS 导航动画之转场效果

        本文链接:https://www.haomeiwen.com/subject/mdtorxtx.html