iOS 圆形进度条

xyysnybzi 7年前
   <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>