登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

圆环指示器

[复制链接]
来自: malgee 分类: iOS精品源码 上传时间: 2017-8-19 18:49:24
Tag:

项目介绍:

效果图

pictrue

核心步骤讲解

该控件有2部分组成,一个是底部的圆环(MGCircleAnimationView类),另一部指示器(MGIndicatorView)构成

  • 绘制底层的虚线圆

    /**
    ** lineView: 需要绘制成虚线的view
    ** lineWidth: 虚线的宽度
    ** lineSpacing: 虚线的间距
    ** lineColor: 虚线的颜色
    **/

    • (void)drawDashLine:(UIView *)lineView

             lineWidth:(int)lineWidth
           lineSpacing:(int)lineSpacing
             lineColor:(UIColor *)lineColor
                  path:(UIBezierPath *)path

      {

      CAShapeLayer *shapeLayer = [CAShapeLayer layer];
      
      self.bottomLayer = shapeLayer;
      
      [shapeLayer setBounds:lineView.bounds];
      
      [shapeLayer setPosition:CGPointMake(self.width / 2, self.height / 2)];
      
      [shapeLayer setFillColor:[UIColor clearColor].CGColor];
      
      //  设置虚线颜色为blackColor
      [shapeLayer setStrokeColor:lineColor.CGColor];
      
      //  设置虚线长度
      [shapeLayer setLineWidth:8];
      
      [shapeLayer setLineJoin:kCALineJoinRound];
      
      //  设置线宽,线间距
      [shapeLayer setLineDashPattern:[NSArray arrayWithObjects:[NSNumber numberWithInt:lineWidth],
                                      [NSNumber numberWithInt:lineSpacing], nil]];
      
      shapeLayer.strokeColor = lineColor.CGColor;
      
      shapeLayer.path = path.CGPath;
      
      //  把绘制好的虚线添加上来
      [self.layer addSublayer:shapeLayer];

      }

  • 绘制进度

    /**
    ** lineView: 需要绘制成虚线的view
    ** lineWidth: 虚线的宽度
    ** lineSpacing: 虚线的间距
    ** lineColor: 虚线的颜色
    **/

    • (void)drawDashProgressLine:(UIView *)lineView

                     lineWidth:(int)lineWidth
                   lineSpacing:(int)lineSpacing
                     lineColor:(UIColor *)lineColor
                          path:(UIBezierPath *)path

      {

      CAShapeLayer *shapeLayer = [CAShapeLayer layer];
      
      self.progressLayer = shapeLayer;
      
      [shapeLayer setBounds:lineView.bounds];
      
      [shapeLayer setPosition:CGPointMake(self.width / 2, self.height / 2)];
      
      [shapeLayer setFillColor:[UIColor clearColor].CGColor];
      
      //  设置虚线颜色为blackColor
      [shapeLayer setStrokeColor:lineColor.CGColor];
      
      //  设置虚线长度
      [shapeLayer setLineWidth:8];
      
      [shapeLayer setLineJoin:kCALineJoinRound];
      
      //  设置线宽,线间距
      [shapeLayer setLineDashPattern:[NSArray arrayWithObjects:[NSNumber numberWithInt:lineWidth],
                                      [NSNumber numberWithInt:lineSpacing], nil]];
      
      shapeLayer.strokeColor = lineColor.CGColor;
      
      shapeLayer.path = path.CGPath;
      
      shapeLayer.strokeEnd = 0;
      
      [self.layer addSublayer:self.progressLayer];
      

    }

添加指示器,设置弧度动画

  • 添加指示器

    MGIndicatorView 为指示器类

    // 弧形动画

    • (void)circleAnimation
      {

      [CATransaction begin];
      
      /** 对layer层的属性操作,都会形成隐式动画,要使用隐式动画,需要关闭layer层的animation动画属性 */
      [CATransaction setDisableActions:NO]; // 关闭animation动画效果,开启隐式动画
      
      [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
      
      [CATransaction setAnimationDuration:kAnimationTime];
      
      self.progressLayer.strokeEnd = _percent / self.ideallyValue;
      
      [CATransaction commit];
      

    }

github链接地址:DEMO戳这里

相关源码推荐:

我来说两句
*滑动验证:
所有评论(5)
hellokenken 2017-8-21 10:37:55
支持,感谢,祝code4app越来越好~
回复
BlueManlove 2017-8-21 10:38:04
code4app好的内容真的很多~赞
回复
phoiu 2017-8-21 10:38:09
感谢分享,code4app有你更精彩
回复
AlonMessi 2017-8-21 10:38:14
我是来学习的
回复
kengsir 2017-8-21 10:38:36
code4app好的内容真的很多~赞
回复
littleRed 2017-8-21 10:39:38
内容很好,棒棒哒
回复
mapleRao 2017-8-21 14:35:26
淡定,淡定,淡定……
回复
code4app热心网友 2017-8-21 15:13:05
强烈支持楼主ing……
回复
code4app热心网友 2017-8-22 12:55:53
强烈支持楼主ing……
回复
提取码:  下载次数:80 状态:已购或VIP 售价:0(原价:10)金钱 下载权限:初级码农 
1412 0 80
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表