美文网首页iOS 开发随笔iOS Development
iOS 封装打勾和打叉状态动画

iOS 封装打勾和打叉状态动画

作者: Alger_梁 | 来源:发表于2017-09-08 19:28 被阅读71次

    没啥知识点说的,就是利用UIBezierPath和CAShapeLayer划线,然后动画,直接贴代码。

    @implementation LQYSuccessView
    {
        UIView * _logoView;
    }
    - (instancetype)initWithFrame:(CGRect)frame withState:(BOOL)state
    {
        self = [super initWithFrame:frame];
        if (self) {
            if (state) {
                [self drawSuccessLine];
    
            }else
            {
                [self drawFailLine];
     
            }
        }
        return self;
    }
    
    

    对勾方法

    -(void)drawSuccessLine
    {
        [_logoView removeFromSuperview];
        
        _logoView=[[UIView alloc]initWithFrame:self.frame];
        //曲线建立开始点和结束点
        //1. 曲线的中心
        //2. 曲线半径
        //3. 开始角度
        //4. 结束角度
        //5. 顺/逆时针方向
        UIBezierPath * path=[UIBezierPath bezierPathWithArcCenter:CGPointMake(self.centerX, self.centerY) radius:self.frame.size.width/2 startAngle:0 endAngle:M_PI*2 clockwise:YES];
        //对拐角和中心处理
        path.lineCapStyle=kCGLineCapRound;
        path.lineJoinStyle=kCGLineCapRound;
        
        
        //对号第一部分的起始
        
        [path moveToPoint:CGPointMake(self.frame.size.width/5, self.frame.size.width/2)];
        CGPoint pl =CGPointMake(self.frame.size.width/5*2, self.frame.size.width/4*3);
        [path addLineToPoint:pl];
        
        //对号第二部分起始
        CGPoint p2 = CGPointMake(self.frame.size.width/8.0*7, self.frame.size.width/4.0+8);
        [path addLineToPoint:p2];
        CAShapeLayer *layer = [[CAShapeLayer alloc] init];
        //内部填充颜色
        layer.fillColor = [UIColor clearColor].CGColor;
        //线条颜色
        layer.strokeColor = [UIColor colorWithHexString:@"60b0ff"].CGColor;
        //线条宽度
        layer.lineWidth = 5;
        layer.path = path.CGPath;
        //动画设置
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:NSStringFromSelector(@selector(strokeEnd))];
        animation.fromValue = @0;
        animation.toValue = @1;
        animation.duration = 1;
        [layer addAnimation:animation forKey:NSStringFromSelector(@selector(strokeEnd))];
        
        [_logoView.layer addSublayer:layer];
        [self addSubview:_logoView];
                                
        
        
        
        
        
    }
    

    叉号方法

    叉号和对号的区别就是调整一下会吐的起点和结束点

    -(void)drawFailLine
    {
        [_logoView removeFromSuperview];
        
        _logoView=[[UIView alloc]initWithFrame:self.frame];
        //曲线建立开始点和结束点
        //1. 曲线的中心
        //2. 曲线半径
        //3. 开始角度
        //4. 结束角度
        //5. 顺/逆时针方向
        UIBezierPath * path=[UIBezierPath bezierPathWithArcCenter:CGPointMake(self.centerX, self.centerY) radius:self.frame.size.width/2 startAngle:0 endAngle:M_PI*2 clockwise:YES];
        //对拐角和中心处理
        path.lineCapStyle=kCGLineCapRound;
        path.lineJoinStyle=kCGLineCapRound;
        
        
        //对号第一部分的起始
        
        [path moveToPoint:CGPointMake(self.frame.size.width/4, self.frame.size.width/4)];
        CGPoint pl =CGPointMake(self.frame.size.width/4*3, self.frame.size.width/4*3);
        [path addLineToPoint:pl];
        
        
        //对号第二部分起始
    
        [path moveToPoint:CGPointMake(self.frame.size.width/4*3, self.frame.size.width/4)];
    
        CGPoint p2 = CGPointMake(self.frame.size.width/4.0, self.frame.size.width/4*3);
        [path addLineToPoint:p2];
        
        CAShapeLayer *layer = [[CAShapeLayer alloc] init];
        //内部填充颜色
        layer.fillColor = [UIColor clearColor].CGColor;
        //线条颜色
        layer.strokeColor = [UIColor colorWithHexString:@"60b0ff"].CGColor;
        //线条宽度
        layer.lineWidth = 5;
        layer.path = path.CGPath;
        //动画设置
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:NSStringFromSelector(@selector(strokeEnd))];
        animation.fromValue = @0;
        animation.toValue = @1;
        animation.duration = 1;
        [layer addAnimation:animation forKey:NSStringFromSelector(@selector(strokeEnd))];
        
        [_logoView.layer addSublayer:layer];
        [self addSubview:_logoView];
        
    
    }
    

    代码里用了YYKit 里面的属性,如果你项目里没有YYKit,修改一下self.centerX和self.centerX就行 。

    具体项目地址请点击demo

    相关文章

      网友评论

      本文标题:iOS 封装打勾和打叉状态动画

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