ios 圆环渐变

1需求

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

ios 圆环渐变_第1张图片

2分析需求

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

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

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

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

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

3 实现步骤

就按照需求分析的过来

  1绘制贝赛尔曲线

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

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

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


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

ios 圆环渐变_第2张图片

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

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


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

ios 圆环渐变_第3张图片

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

参数说明

先说一下渐变的StartPoint,EndPoint:

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


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

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

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

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

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

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

附加

地址:GitHub - hnustJoe/CircleGradient_pro

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

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

ios 圆环渐变_第4张图片

你可能感兴趣的:(ios 圆环渐变)