实现效果图
实现思路
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.
