iOS 圆形进度条
xyysnybzi
8年前
<p>利用贝塞尔曲线,画一个类似下图的进度条:</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/264dd898476502fa934734d22919827b.png"></p> <p style="text-align: center;">效果图</p> <h2><strong>知识点</strong></h2> <h3><strong>1、贝塞尔曲线画圆</strong></h3> <p style="text-align: center;"><img src="https://simg.open-open.com/show/097733ddfee07a96b9165b6e9a065ff3.png"></p> <p>效果是这样的</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/b6572040a7e399bd85698f7f00e1c1dc.png"></p> <p>在最主要的方法中,参数含义如下</p> <p>center:圆心的坐标</p> <p>radius:半径</p> <p>startAngle:起始的弧度</p> <p>endAngle:圆弧结束的弧度</p> <p>clockwise:YES为顺时针,No为逆时针</p> <p>其实角度是从时钟的3点开始的,如下图:</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/91e6ba306b1991d0d267142695e6106f.png"></p> <p>角度转弧度是这样的:</p> <pre> #define DEGREES_TO_RADOANS(x) (M_PI * (x) / 180.0) // 将角度转为弧度</pre> <h3><strong>2、渐变色遮罩</strong></h3> <p>代码如下:</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/e1224238284d0f3e653325e8db559d8e.png"></p> <p>运行之后,效果是这样的:</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/4c421c5187574779f6c00b80b7977b49.png"></p> <p>在渐变色上添加一个遮罩层,就是画一个圆环,把这个圆环设置成渐变色layer的mask</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/408d57d6810714834f45bd7a48e48f82.png"></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/3f9c1db665f4fe3e15314f9514794c66.png"></p> <p>顺便设置一下整个view的背景色,改变一下圆的半径,得到的效果图如下:</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/6b28051b5f636ee62c272dc02bcc2ddc.png"></p> <p>其中灰色是view的背景色,绿色部分是刚才最开始画的那个</p> <h3> </h3> <p> </p> <p>来自:http://www.jianshu.com/p/ff8786c2dadb</p> <p> </p>