zoukankan      html  css  js  c++  java
  • iOS | CAShapeLayer转场动画

    什么也不说了,作为一名乐于分享技术的小开发,直接先上个样式最为直观贴切,有需要的朋友可以直接拿过去用。

    自定义转场.gif

    需要demo请点击这里 :github

    在这个demo中,核心为选用画布CAShapeLayer,因为一般都是用它来处理形状之类的动画,结合了贝塞尔曲线来控制路径,然后使用CABasicAnimation核心动画来产生所有效果。

    首先封装一个自定义的动画。
    ///动画自定义封装
    -(void)animationWithView:(UIView *)view{
        //1.创建layer
        CAShapeLayer *layer = [[CAShapeLayer alloc]init];
        
        //2.创建贝塞尔路径(参数为圆的外接矩形)
        //间距
        CGFloat margin = 20;
        //半径
        CGFloat radius = 25;
        //屏幕尺寸
        CGFloat viewWidth = [UIScreen mainScreen].bounds.size.width;
        //屏幕高度
        CGFloat viewHeight = [UIScreen mainScreen].bounds.size.height;
        //屏幕对角线
        CGFloat endRadius =sqrt(viewHeight*viewHeight +viewWidth*viewWidth);
        
        //起始路径
        CGRect startRect = CGRectMake(viewWidth-2*radius-margin, margin, radius*2, radius*2);
        UIBezierPath *startPath = [UIBezierPath bezierPathWithOvalInRect:startRect];
        //终止路径
        UIBezierPath *endPath = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(startRect, -endRadius, -endRadius) ];
        
        //3.设置贝塞尔属性
        //填充颜色
        layer.fillColor = [UIColor redColor].CGColor;
        //4.将贝塞尔作为layer的路径
        layer.path = startPath.CGPath;
        //将layer作为父视图的遮罩图层.
        view.layer.mask = layer;
        //5.将path添加到视图中
        //[self.view.layer addSublayer:layer];
        
        //使用核心动画实现
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
        //这个属性是判断是动画之前还是动画之后的。
        if (self.isPresent) {
            animation.fromValue = (__bridge id _Nullable)(startPath.CGPath);
            animation.toValue = (__bridge id _Nullable)(endPath.CGPath);
        }else{
            animation.fromValue = (__bridge id _Nullable)(endPath.CGPath);
            animation.toValue = (__bridge id _Nullable)(startPath.CGPath);
        }
        animation.delegate = self;
        
        //设置动画属性
        animation.fillMode = kCAFillModeForwards;
        
        animation.duration = 2;
        
        animation.removedOnCompletion = NO;
        
        //添加动画到图层
        [layer addAnimation:animation forKey:nil];
    }
    

    ! 这里要注意这个mask的属性,设置之后就不需要再额外的add进去,它是一种用于遮罩视图的效果,并且设置的颜色会失效

    在这个动画中,有三个重要的属性,号称“转场三剑客”。

    UIViewControllerAnimatedTransitioning,主要负责转场的动画时间和动画具体内容。

    #pragma mark - UIViewControllerAnimatedTransitioning
    ///转场动画时间
    - (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext{
        return 2;
    }
    ///转场动画的内容
    - (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{
        
        //1.获取上下文的容器视图
        UIView *containerView = transitionContext.containerView;
        //2.获取目标视图
        UIView *fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
        UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];
        
        //3.将目标视图添加到容器视图
        UIView *aniView = self.isPresent?toView:fromView;
        
        [containerView addSubview:aniView];
        
        //4.开始动画
        [self animationWithView:aniView];
        
        
        
        self.context = transitionContext;
    }
    

    CAAnimationDelegate,主要负责监控动画开始和动画结束之后。

    #pragma mark - CAAnimationDelegate
    ///动画开始
    - (void)animationDidStart:(CAAnimation *)anim{
        
    }
    
    ///每次动画结束调用
    - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
        //5.告诉上下文完成转场,否则上下文将会一直等待系统通知是否完成.
        [self.context completeTransition:YES];
    }
    

    UIViewControllerTransitioningDelegate,主要负责告诉系统由哪个控制器提供转场,哪个控制器来解除转场。

    #pragma mark - UIViewControllerTransitioningDelegate
    ///告诉由谁提供转场
    - (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{
        
        self.isPresent = YES;
        return self;
    }
    ///由谁解除转场
    - (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{
        
        self.isPresent = NO;
        return self;
    }
    

    最后只需要在需要转场的控制器中使用这个封装的类即可

    -(void)awakeFromNib{
        [super awakeFromNib];
        
        //1.设置跳转样式
        self.modalPresentationStyle = UIModalPresentationCustom;
        //2.设置代理
        self.animation = [[JanCustomAnimation alloc]init];
        
        self.transitioningDelegate = self.animation;
    }
    
    -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
        [self dismissViewControllerAnimated:YES completion:nil];
    }
    

    需要注意的是设置样式和代理,必须要优先于viewdidload之前设置,因为这里涉及到控制器的生命周期的问题

    好了,到这里就可以实现完整的自定义转场的酷炫效果了。

  • 相关阅读:
    JS完整获取IE浏览器信息
    C# DataSet和DataTable详解
    linux下mysql导入数据
    Linux上安装mysql
    JDK6+tomcat7+mysql官网下载地址
    Linux常用命令
    mysql 授权
    tomcat7.0学习笔记
    struts2 <s:property/>标签的使用输出时间格式转换
    Linux如何查找软件安装路径?
  • 原文地址:https://www.cnblogs.com/JanChuJun/p/10102260.html
Copyright © 2011-2022 走看看