實(shí)現(xiàn)效果圖
實(shí)現(xiàn)思路
1. 自定義 View
2. 添加 Label
3. 使用 CAShapeLayer 繪制兩個(gè)同心圓
4. 加動(dòng)畫
核心代碼
1.設(shè)置 圓形 路徑
[UIBezierPath bezierPathWithArcCenter:<(CGPoint)> radius:<(CGFloat)> startAngle:<(CGFloat)> endAngle:<(CGFloat)> clockwise:<(BOOL)>
這個(gè)工廠方法用于畫弧荐操，參數(shù)說明如下：
center: 弧線中心點(diǎn)的坐標(biāo)
radius: 弧線所在圓的半徑
startAngle: 弧線開始的角度值
endAngle: 弧線結(jié)束的角度值
clockwise: 是否順時(shí)針畫弧線
2.創(chuàng)建 CAshapeLayer(繪制兩個(gè)同心圓)
```
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.設(shè)置漸變圖層
```
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.設(shè)置動(dòng)畫
```
// 復(fù)原
[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];
```
總結(jié)
注意為了適應(yīng)在 Xib 中創(chuàng)建 的View,需要在 layoutSubview 重新去設(shè)置 View 的 Frame.
