ios 圆环渐变

1需求

 需要绘制一个下图的圆环,可能圆环看上有点丑,但是加了渐变,对于新手朋友来说,可能也没那么简单。

2分析需求

这里需要用到一些绘画的基础知识,不过,不知道的也没有问题。跟着教程一步步下去,就可以了。

1先用贝塞尔曲线绘制一个圆环

2用CAShapeLayer作为遮罩来将圆环布上去。

3再绘制一个渐变层,将第二步的CAShapeLayer设置为渐变层的遮罩

下图就是我手绘的层级关系,要是有朋友觉得有问题的,可以跟我来讨论一下。

3 实现步骤

就按照需求分析的过来

  1绘制贝赛尔曲线

说到绘制圆环,我得说一下圆的坐标系。

还有这个宏定义的函数 degressToRadius(-90) 具体是这样的:

#define degressToRadius(ang) (M_PI*(ang)/180.0f)//把角度转换成PI的方式


  2用CAShapeLayer作为遮罩来将圆环布上去。

说一下,为什么要将_progressLayer设置为当前试图的成员变量,(因为我不想告诉你们,哈哈哈)

记得设置好遮罩形状层以后记得要指定形状(也就是第一步绘制的贝塞尔曲线)


 3绘制渐变层 (这应该是这里面最难的,不过,也不难)  

先设置一个底部层(也就是我写的grain),来将第二步绘制好的遮罩层设置为当前底部层的遮罩。然后来将左右两个渐变层绘制上去。绘制左边的渐变层,我是从上边向下边渐变的(我又得画图了,哈哈哈哈)

参数说明

先说一下渐变的StartPoint,EndPoint:

看了图应该知道是什么了吧。


Locations的意思就从哪个位置开始到哪个位置会显示渐变的变化。

Colors的意思就是渐变的颜色,你可以设置很多很多很多颜色的,我这里就两个。

最后一步将渐变底层添加到当前视图层上面。

我得将我的代码防到git上面,我还不知道怎么放上去,所以还得去学一下。

额,原来不需要学github地址:GitHub - hnustJoe/CircleGradient

给我帮助的那位朋友的博客地址真的不见了。

附加

地址:GitHub - hnustJoe/CircleGradient_pro

这是我项目用到的给大家看看效果

先稍微解析一下,这个可是有动画的,还有一个背景的层,就是那个灰色的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 先上图 思路 1.自定义view,在- (void)drawRect:(CGRect)rect方法中用贝塞尔曲线画...
    兰州一碗面阅读 2,431评论 3 12
  • 目录: 主要绘图框架介绍 CALayer 绘图 贝塞尔曲线-UIBezierPath CALayer子类 补充:i...
    Ryan___阅读 1,707评论 1 9
  • 前言 此本中收录一些较复杂统计图案例的实现分析,希望能给需要的朋友带来灵感。 曲线动态图 我们可以看到上图的动图是...
    進无尽阅读 1,983评论 0 1
  • 转载:http://www.jianshu.com/p/32fcadd12108 每个UIView有一个伙伴称为l...
    F麦子阅读 6,307评论 0 13
  • 女儿从大前天晚上开始发烧,一直没有间断。一开始体温在37度左右,到昨天下午已经飙到39度1。让人很担心。 ...
    啊攀攀了阅读 153评论 3 0