IOS实战 (2) 之 环形渐变色 进度展示条

实现效果图

---

实现思路

---

1. 自定义 View

2. 添加 Label

3. 使用 CAShapeLayer 绘制两个同心圆

4. 加动画

核心代码

1.设置 圆形 路径

[UIBezierPath bezierPathWithArcCenter:<(CGPoint)> radius:<(CGFloat)> startAngle:<(CGFloat)> endAngle:<(CGFloat)> clockwise:<(BOOL)>

这个工厂方法用于画弧，参数说明如下：

center: 弧线中心点的坐标

radius: 弧线所在圆的半径

startAngle: 弧线开始的角度值

endAngle: 弧线结束的角度值

clockwise: 是否顺时针画弧线

2.创建 CAshapeLayer(绘制两个同心圆)

```

self.garyCircleLayer = [CAShapeLayer layer];

self.garyCircleLayer.frame = self.bounds;

self.garyCircleLayer.fillColor = [[UIColor            clearColor] CGColor];

//圆形边界颜色

self.garyCircleLayer.strokeColor = [[UIColor  colorWithHex:0xd5e0e2] CGColor] ;

self.garyCircleLayer.opacity = 0.5;

self.garyCircleLayer.lineCap = kCALineCapRound;

self.garyCircleLayer.lineWidth = _grayCircleLineWidth;

self.garyCircleLayer.path = [garypath CGPath];

[self.layer addSublayer:self.garyCircleLayer];

```

3.设置渐变图层

```

self.gradientLayer = [CAGradientLayer layer];

self.gradientLayer.frame = self.bounds;

[self.gradientLayer setColors:[NSArray arrayWithObjects: (id)[[UIColor colorWithHex:0xe2962c] CGColor], (id)[[UIColor colorWithHex:0xf5eb70 ] CGColor],nil]];

[self.gradientLayer setLocations:@[@0.2, @0.5, @0.7, @1]];

[self.gradientLayer setStartPoint:CGPointMake(0, 0)];

[self.gradientLayer setEndPoint:CGPointMake(1, 0)];

[self.gradientLayer setMask:self.progressLayer];

```

4.设置动画

```

// 复原

[CATransaction begin];

[CATransaction setDisableActions:NO];

[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];

[CATransaction setAnimationDuration:0];

self.progressLayer.strokeEnd = 0;

[CATransaction commit];

[CATransaction begin];

[CATransaction setDisableActions:NO];

[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction  functionWithName:kCAMediaTimingFunctionLinear]];

[CATransaction  setAnimationDuration:kAnimationTime];

self.progressLayer.strokeEnd = _percent ;

[CATransaction commit];

```

总结

---

注意为了适应在 Xib 中创建 的View,需要在 layoutSubview 重新去设置 View 的 Frame.

源码下载

---

源码下载地址