小弟才疏学浅，第一次写简书文章，内容难免有错误或者不妥，欢迎大家来指点江山。。。
先来看一下最终的效果：
特点：圆环是顺时针旋转，旋转的过程中，始终保持圆环的开始端颜色最浅（白色），圆环的结尾是最深（0xEC1161）.
在刚开始要做这个东西的时候，是因为想做一个下拉刷新的动画，这个动画要做到在下拉的过程中，有一个颜色渐变的圆环在变大，而且是要始终保湿圆环的开头是白色，圆环的结尾是0xEC1161最深色。
想了几个方法，都不太理想，其中包括在圆环的底部放置一个圆环图片，下拉过程中，拖过CALayer的mask功能来把需要显示的圆环给扣出来显示，最终我采用了最简单的方式，就是直接无限旋转一个圆环图片，醉了。。
这事完了之后，我不甘心，决定好好来实现以下这个动画效果，就来了这个；下面简要分析写这个动画的实现逻辑（可能对后续要实现一个进度条或者类似于360安全卫士清理时的进度条有一定的帮助）。
1. 这个圆环底部是一个UIView，在UIView上添加N（N>=2）个扇形的渐变CAGradientLayer，并让这几个扇形渐变的层正好布满这个圆；
2. 这一系列扇形的CAGradientLayer的制作方法是：
a) 先画一个UIView上半部分大小的CAGradientLayer；
b) 计算CAGradientLayer的startPoint和endPoint，这俩值的大小是根据1中的N决定的，N越大，endPoint.x-startPoint.x越小，而且endPoint.x和startPoint.x是以0.5为中心向两边偏移相等的距离，startPoint.x=0.5-sin(1.f/N*M_PI)/2.f，endPoint.x=0.5+sin(1.f/N*M_PI)/2.f，这里用到了简单的直角三角形的sin函数计算；
c) 制作一个扇形的Layer，并把这个扇形Layer作为CAGradientLayer的mask，扇形Layer的UIBezierPath的绘制也是以中间为轴，向两边偏移，偏移的大小b中的计算是一样的，startAngle=(-90.f/180.f*M_PI - 1.f/N*M_PI)， endAngle=(-90.f/180.f*M_PI + 1.f/N*M_PI)
d) 最后，按照添加的次序，依次旋转CAGradientLayer，使得N个Layer正好铺成一个圆；
3. 然后在最上层添加一个CAShapeLayer，并且让这个layer的frame的大小比最底层的UIView的frame稍微小一点（这个差值就是圆环的粗细），同时让这个Layer的position等于UIView的center；
4. 稍微旋转下最上层的CAShapeLayer，以做到等下针对该Layer的strokeStart做动画时，能够从中标的0点钟位置开始，顺时针方向做动画;
5. 下面是动画的部分，动画分为两个步骤，一个是针对oval.strokeStart的动画，一个是针对N各扇形layer的locations的动画
a) 针对oval.strokeStart的动画简单，执行N个单位时间，直接添加该动画即可；
b) 针对N各扇形的动画，是依次延迟 i (i从0开始)执行的，执行N-i个单位时间，并且每一个扇形的locations的开始值得第一个值是-i，第二个值是0，而且结束值得第一个值不变，第二个值是N-1,这是为什么呢？是因为要做到N个扇形的颜色能够无缝衔接，具体原因上代码（Talk is cheap, show me the code.），大家一看便明了(注：在初始化扇形Layer的时候，已经指定过了layer.locations=@[@(-i),@0.f]);
至此，大功告成，GradientLayerCount的值就是N，可以随意修改配置，但是要保证大于等于2.
最后附上项目完整代码链接（https://github.com/ShakeShakeMe/CircleProcessBar）。
修改：修改为可以手动执行动画（也就是通过滑块来执行动画）。
（欢迎大家来踩）
网友评论