圓形進(jìn)度條
QQ20170726-151612.gif
1，畫圓：CAShapeLayer與UIBezierPath配合使用
CAShapeLayer 是 CALayer 的子類，她比 CALayer 更靈活，可以畫出各種圖形，最簡單就是和UIBezierPath配合使用。
例（畫矩形）：
矩形
@interface CycleView : UIView
@property(nonatomic,strong)CAShapeLayer * progressLayer;
@property(nonatomic,assign)float progress;
@end
#define PROGRESS_LINE_WIDTH 4 //弧線的寬度
#define RYUIColorWithRGB(r,g,b) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:1]
#import "CycleView.h"
@implementation CycleView
//UIBezierPath
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, frame.size.width, frame.size.height)];
//CAShapeLayer
CAShapeLayer *shapLayer = [CAShapeLayer layer];
shapLayer.path = path.CGPath;
shapLayer.fillColor = [UIColor clearColor].CGColor;//圖形填充色
UIColor *grayColor = [UIColor colorWithRed:155/255.0 green:155/255.0 blue:155/255.0 alpha:1];
shapLayer.strokeColor = grayColor.CGColor;//邊線顏色
[self.layer addSublayer:shapLayer];
那么我們開始第一步：畫出最底層的灰色圓
底層灰色圓形
//UIBezierPath
CGPoint arcCenter = CGPointMake(frame.size.width/2, frame.size.width/2);
CGFloat radius = frame.size.width/2;
//圓形路徑
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:arcCenter
radius:radius
startAngle:0
endAngle:M_PI*2
clockwise:YES];
//CAShapeLayer
CAShapeLayer *shapLayer = [CAShapeLayer layer];
shapLayer.path = path.CGPath;
shapLayer.fillColor = [UIColor clearColor].CGColor;//圖形填充色
UIColor *grayColor = [UIColor colorWithRed:155/255.0 green:155/255.0 blue:155/255.0 alpha:1];
shapLayer.strokeColor = grayColor.CGColor;//邊線顏色
[self.layer addSublayer:shapLayer];
第二步：添加顏色漸變層CAGradientLayer。
CAGradientLayer是CALayer的子類，用來做漸變色的，用法請參考：
http://www.cnblogs.com/YouXianMing/p/3793913.html?utm_source=tuicool&utm_medium=referral。這篇帖子中介紹的很詳細(xì)，就不做介紹了。
//漸變圖層 漸變：RYUIColorWithRGB(140, 94, 0) >> RYUIColorWithRGB(229, 168, 46) >> RYUIColorWithRGB(140, 94, 0)
CALayer * grain = [CALayer layer];
[self.layer addSublayer:grain];
//我們是兩種漸變色，所以我么要用一個(gè)grain 對象將兩個(gè)漸變圖層放到一起。
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = CGRectMake(-PROGRESS_LINE_WIDTH, -PROGRESS_LINE_WIDTH, frame.size.width/2+PROGRESS_LINE_WIDTH*2, frame.size.height+PROGRESS_LINE_WIDTH*2);
[gradientLayer setColors:[NSArray arrayWithObjects:
(id)[RYUIColorWithRGB(140, 94, 0) CGColor],
(id)[RYUIColorWithRGB(229, 168, 46) CGColor], nil]];// 顏色分配
[gradientLayer setLocations:@[@0.1,@0.9]];// 顏色分割線
[gradientLayer setStartPoint:CGPointMake(0.05, 1)];// 起始點(diǎn)
[gradientLayer setEndPoint:CGPointMake(0.9, 0)]; // 結(jié)束點(diǎn)
[grain addSublayer:gradientLayer];
CAGradientLayer * gradientLayer1 = [CAGradientLayer layer];
gradientLayer1.frame = CGRectMake(self.bounds.size.width/2-PROGRESS_LINE_WIDTH, -PROGRESS_LINE_WIDTH, frame.size.width/2+PROGRESS_LINE_WIDTH*2, frame.size.height+PROGRESS_LINE_WIDTH*2);
[gradientLayer1 setColors:[NSArray arrayWithObjects:
(id)[RYUIColorWithRGB(229, 168, 46) CGColor],
(id)[RYUIColorWithRGB(140, 94, 0) CGColor], nil]];// 顏色分配
[gradientLayer1 setLocations:@[@0.3,@1]];// 顏色分割線
[gradientLayer1 setStartPoint:CGPointMake(0.9, 0.05)];// 起始點(diǎn)
[gradientLayer1 setEndPoint:CGPointMake(1, 1)];// 結(jié)束點(diǎn)
[grain addSublayer:gradientLayer1];
第三步：設(shè)置遮罩層。
layer的遮罩層介紹：設(shè)置遮罩層:CALayer的mask屬性，設(shè)置遮罩層后，layer.mask = maskLayer；maskLayer透明的地方layer不顯示，maskLayer不透明的地方layer顯示。例：下面是遮罩層介紹，代碼和本文介紹的圓形進(jìn)度條無關(guān)。
未設(shè)置遮罩層時(shí)：
UIView *bgView = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
[self.view addSubview:bgView];
bgView.layer.borderColor = [UIColor blackColor].CGColor;
bgView.layer.borderWidth = 1;
//底層被遮罩的layer
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
[bgView.layer addSublayer:gradientLayer];
gradientLayer.frame = CGRectMake(0, 0, 100, 100);
gradientLayer.backgroundColor = [UIColor redColor].CGColor;
效果圖顯示如下：
Simulator Screen Shot 2017年9月4日 15.44.03.png
設(shè)置遮罩層后
//遮罩層
CALayer *maskLayer = [CALayer layer];
maskLayer.frame = CGRectMake(0, 10, 100, 10);
gradientLayer.mask = maskLayer;
效果圖：（由于未設(shè)置遮罩層顏色，故底層紅色layer不顯示）
Simulator Screen Shot 2017年9月4日 15.50.33.png
遮罩層設(shè)置顏色后：
遮罩層有顏色的地方顯示下面的layer，透明的地方反而不顯示
maskLayer.backgroundColor = [UIColor blackColor].CGColor;
Simulator Screen Shot 2017年9月4日 15.50.59.png
下面進(jìn)入正題，設(shè)置底層漸變layer,即：grain的遮蓋層。
//進(jìn)度layer 即：遮蓋layer
_progressLayer = [CAShapeLayer layer];
[self.layer addSublayer:_progressLayer];
_progressLayer.path = _circlePath.CGPath;
_progressLayer.strokeColor = [UIColor blueColor].CGColor;
_progressLayer.fillColor = [[UIColor clearColor] CGColor];
_progressLayer.lineWidth = PROGRESS_LINE_WIDTH;
_progressLayer.strokeEnd = 0.f;
最后一步。設(shè)置遮罩layer：_progressLayer 的動畫。
//設(shè)置_progressLayer的進(jìn)度
-(void)setProgress:(float)progress
{
[self startAninationWithPro:progress];
}
//根據(jù)進(jìn)度progress做動畫
-(void)startAninationWithPro:(CGFloat)pro
{
//增加動畫
CABasicAnimation *pathAnimation=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 3;
pathAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
pathAnimation.fromValue=[NSNumber numberWithFloat:0.0f];
pathAnimation.toValue=[NSNumber numberWithFloat:pro];
pathAnimation.autoreverses=NO;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;
pathAnimation.repeatCount = 1;
[_progressLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
}
OVER。效果圖如下：
QQ20170726-151612.gif
代碼示例下載地址：
https://pan.baidu.com/s/1eSkuL0Y
