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
这是我项目用到的给大家看看效果
先稍微解析一下,这个可是有动画的,还有一个背景的层,就是那个灰色的