iOS 渐变色的圆绘制

我们会经常看到渐变色的圆形加载条，类似于下面这种，这种效果是怎么实现的呢？下面我带大家一步一步实现这种效果。



提到渐变色，我们脑海中首先想到的就是利用CAGradientLayer来实现，可是CAGradientLayer只能实现线性渐变，指定一个startPoint和endPoint，没法实现弧形的渐变效果。这里我们取个巧，把一个矩形区域等分成4个小矩形，

如图所示



假设大矩形的frame为（0，0，100，100），把4个CAGradientLayer添加到大矩形上第一个gradientLayer1 设置startPpoint 为（50,0）endPoint为（0，50），第二个GradientLayer2startPoint为（0，50），endPoint为（50，100），依次类推。代码如下所示：

CAGradientLayer *gradientLayer1 = [self gradientLayerWithIndex:0];
gradientLayer1.position = CGPointMake(_layerWidth/4.0, _layerHeight/4.0);
gradientLayer1.startPoint = CGPointMake(1, 0);
gradientLayer1.endPoint = CGPointMake(0, 1);

CAGradientLayer *gradientLayer2 = [self gradientLayerWithIndex:1];
gradientLayer2.position = CGPointMake(_layerWidth/4.0, _layerHeight/4.0*3);
gradientLayer2.startPoint = CGPointMake(0, 0);
gradientLayer2.endPoint = CGPointMake(1, 1);

CAGradientLayer *gradientLayer3 = [self gradientLayerWithIndex:2];
gradientLayer3.position = CGPointMake(_layerWidth/4.0*3, _layerHeight/4.0*3);
gradientLayer3.startPoint = CGPointMake(0, 1);
gradientLayer3.endPoint = CGPointMake(1, 0);

CAGradientLayer *gradientLayer4 = [self gradientLayerWithIndex:3];
gradientLayer4.position = CGPointMake(_layerWidth/4.0*3, _layerHeight/4.0);
gradientLayer4.startPoint = CGPointMake(1, 1);
gradientLayer4.endPoint = CGPointMake(0, 0);

设置好每个layer的startPoint和endPoint以后，接下来还要设置gradient.colors属性，是一个数组，保存着渐变色的起始和终止色。设置起始色为

fromColor

, 终止色为

toColor

, 以上图 为例，起始色蓝色，终止色白色。用插值计算方法可得，layer1的起始色为fromColor ，终止色为

fromColor+(toColor - fromColor)/4.0

。layer2的起始色为layer1的终止色，layer2的终止色为

fromColor + (toColor - fromColor)/4.0 *2

，依次类推。可是UIColor是没有办法直接进行计算的，所以要把fromColor 和 toColor 的red、green、blue、alpha属性取出来分别进行插值计算，代码如下所示：

-(UIColor *)colorWithIndex:(NSInteger)index
{
CGFloat fromRed,fromGreen,fromBlue,fromAlpha,toRed,toGreen,toBlue,toAlpha;
[self.fromColor getRed:&fromRed green:&fromGreen blue:&fromBlue alpha:&fromAlpha];
[self.toColor getRed:&toRed green:&toGreen blue:&toBlue alpha:&toAlpha];
return [UIColor colorWithRed:gradientColor(fromRed, toRed, index) green:gradientColor(fromGreen, toGreen, index) blue:gradientColor(fromBlue, toBlue, index) alpha:gradientColor(fromAlpha, toAlpha, index)];
}

static float __attribute__((always_inline)) gradientColor(float fromColor, float toColor, int index)
{
float color = (toColor - fromColor)/4.0 * index + fromColor;
return color;
}

有了4个这样的渐变图以后，只需再创建一个圆形的CAShaperLayer，作为self.view.layer 的mask，即可显示出效果。mask属性，会根据传进来的的layer的外形对当前的layer进行遮罩，类似于你拿一个模具去往一堆泥上扣，这堆泥会变成你模具的形状。代码如下所示：

self.shapeLayer = [CAShapeLayer layer];
self.shapeLayer.frame = self.bounds;

UIBezierPath *bezierPath = [UIBezierPath bezierPath];
CGPoint center = CGPointMake(_layerWidth/2.0, _layerHeight/2.0);
[bezierPath addArcWithCenter:center radius:_layerWidth/2.0-2 startAngle:3*M_PI_2 endAngle:-M_PI_2 clockwise:NO];

CAShapeLayer *shapeLayer = self.shapeLayer;
shapeLayer.path = bezierPath.CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.strokeColor = [UIColor purpleColor].CGColor;
shapeLayer.lineWidth = 4.0;
shapeLayer.strokeStart = 0.0;
shapeLayer.strokeEnd = 0.99;
self.layer.mask = self.shapeLayer;

最后添加动画效果，我们选择CABasicAnimation，设置其keyPath为”transform.rotation”,toValue为PI*2，动画执行次数为一直执行，直到被移除。代码如下：

CABasicAnimation *rotation = [CABasicAnimation animation];
rotation.keyPath = @"transform.rotation";
rotation.toValue = @(M_PI*2);
rotation.duration = 2.0;
rotation.repeatCount = INFINITY;
[self.layer addAnimation:rotation forKey:@"rotation"];

到此整个效果完成，完整代码在此下载。