美文网首页
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自定义带动画效果的模态框

    iOS自定义带动画效果的模态框 iOS自定义带动画效果的模态框

  • iOS 模态动画2

    效果: 新建一个类MJAnimationVertical基于NSObject 重写 剪切界面的方法 将剪切的lin...

  • iOS13 适配总结

    1、iOS 13中 presentViewController 模态动画,跳转问题修复 iOS 13之前 pres...

  • iOS13 适配总结

    1、iOS 13中 presentViewController 模态动画,跳转问题修复 iOS 13之前 pres...

  • Flutter开发小技巧

    1.iOS中的模态视图 简单方法,设置fullscreenDialog属性 复杂方法,就是自己重写转场动画 2.一...

  • ios动画

    ios动画 ios动画2 ios动画3

  • iOS 模态动画1

    基于模态跳转 新建个项目 new一个新的vc扔在一边先不去管它好吧 现在之前的那个VC中放个按钮添加个target...

  • iOS 模态动画3

    效果: 主要用到了物理引擎。 新建动画类MJAinimationRect在头文件中声明下面两个属性,一个是动画上下...

  • iOS12 使用 StoryBoard 显示模态 ViewCon

    iOS12 使用 StoryBoard 显示模态 ViewController 初学iOS开发,想实现弹出模态窗口...

  • UIKit - UIViewController

    模态跳转的动画设置model

网友评论

      本文标题:iOS 模态动画2

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