美文网首页
iOS 模态动画2

iOS 模态动画2

作者: 马大俊不是啥好人 | 来源:发表于2017-11-06 11:07 被阅读33次

    效果:


    11月-06-2017 11-06-14.gif

    新建一个类MJAnimationVertical基于NSObject

    重写

    
    - (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext {
        return 2.0f;
    }
    - (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext 
    {
        //获取fromVC与toVC
        UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
        UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
        
        //通过上下文获取跳转的view
        UIView *containerView = [transitionContext containerView];
        
        //将fromVC截图
        UIView *mainSnap = [fromVC.view snapshotViewAfterScreenUpdates:NO];
        
        //fromVC分割成宽度为5的view
        NSArray *outgoingLineViews = [self cutView:mainSnap intoSlicesOfWidth:5];
        
        //将分割出来的view加入到主页面,用作动画
        for (int i = 0; i <outgoingLineViews.count;i++) {
            [containerView addSubview:(UIView*)outgoingLineViews[i]];
        }
        
        //toVC的view加入到跳转页面的view中,并放到分隔view到后面
        UIView *toView = [toVC view];
        toView.frame = [transitionContext finalFrameForViewController:toVC];
        [containerView addSubview:toView];
        [containerView sendSubviewToBack:toView];
        
        
        CGFloat toViewStartY = toView.frame.origin.y;
        toView.alpha = 0;
        
        //因为已用分割view界面,所以本来到fromview久不需要显示了
        fromVC.view.hidden = YES;
        
        
        [UIView animateWithDuration:1 delay:0.0 options:UIViewAnimationOptionCurveEaseIn animations:^{
        } completion:^(BOOL finished) {
            
            //将toView切割保存
            toVC.view.alpha = 1;
            UIView *mainInSnap = [toView snapshotViewAfterScreenUpdates:YES];
            NSArray *incomingLineViews = [self cutView:mainInSnap intoSlicesOfWidth:5];
            
            //切割出来的line位置参差排列并添加到跳转view
            [self repositionViewSlices:incomingLineViews moveFirstFrameUp:NO];
            for (UIView *v in incomingLineViews) {
                [containerView addSubview:v];
            }
            toView.hidden = YES;
            
            [UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
                //fromview的line以动画形式出界面,toview的line以动画形式复原fram也就是回到界面
                [self repositionViewSlices:outgoingLineViews moveFirstFrameUp:YES];
                [self resetViewSlices:incomingLineViews toYOrigin:toViewStartY];
            } completion:^(BOOL finished) {
                fromVC.view.hidden = NO;
                toView.hidden = NO;
                [toView setNeedsUpdateConstraints];
                for (UIView *v in incomingLineViews) {
                    [v removeFromSuperview];
                }
                for (UIView *v in outgoingLineViews) {
                    [v removeFromSuperview];
                }
                [transitionContext completeTransition:YES];
            }];
            
        }];
    
    }
    

    剪切界面的方法

    -(NSMutableArray *)cutView:(UIView *)view intoSlicesOfWidth:(float)width{
        
        CGFloat lineHeight = CGRectGetHeight(view.frame);
        
        NSMutableArray *lineViews = [NSMutableArray array];
        UIView *subsnapshot;
        for (int x=0; x<CGRectGetWidth(view.frame); x+=width) {
            CGRect subrect = CGRectMake(x, 0, width, lineHeight);
            subsnapshot = nil;
            subsnapshot = [view resizableSnapshotViewFromRect:subrect afterScreenUpdates:YES withCapInsets:UIEdgeInsetsZero];
            subsnapshot.frame = subrect;
            [lineViews addObject:subsnapshot];
        }
        return lineViews;
        
    }
    
    

    将剪切的line参差分不到界面
    用在从fromView的消失动画上

    -(void)repositionViewSlices:(NSArray *)views moveFirstFrameUp:(BOOL)startUp{
        
        BOOL up = startUp;
        CGRect frame;
        float height;
        for (UIView *line in views) {
            frame = line.frame;
            height = CGRectGetHeight(frame) * RANDOM_FLOAT(1.0, 4.0);
            
            frame.origin.y += (up)?-height:height;
            line.frame = frame;
            
            up = !up;
        }
    }
    

    将参差不齐的line统一到界面
    用在toView的出现动画上

    -(void)resetViewSlices:(NSArray *)views toYOrigin:(CGFloat)y{
        
        CGRect frame;
        for (UIView *line in views) {
            frame = line.frame;
            frame.origin.y = y;
            line.frame = frame;
        }
    }
    

    在两个VC之中的调用方式,跟上一文章没差

    //返回一个管理动画过渡的对象
    -(nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source
    {
        if (!self.animationVertical) {
            self.animationVertical = [MJAnimationVertical new];
        }
        return self.animationVertical;
    }
    
    - (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{
        if(!self.animationVertical){
            self.animationVertical = [[MJAnimationVertical alloc] init];
        }
        return self.animationVertical;
    }
    

    相关文章

      网友评论

          本文标题:iOS 模态动画2

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