在開發的時候，有時候會用到圓環進度，我的產品還有其他的一些漸變要求，沒辦法，只有查資料，寫代碼，完成需求
我把這些畫圓環，表盤，簡單的封裝來一下，下面是效果，
2018-03-15 14_01_44.gif
簡單的步驟如下
創建背景圖層（CAShapeLayer）
創建填充圖層 （CAShapeLayer）
創建顏色漸變層（CAGradientLayer）
背景貝塞爾曲線繪制（UIBezierPath）
填充貝塞爾曲線繪制（UIBezierPath）
實線虛線判斷
正圓和七分圓的判斷
開始漸變動畫
這里是一些初始化方法
typedef NS_ENUM(NSInteger,CirleProgressType_)
{
CirleProgressType_SolidLine = 0 , /// 實線
CirleProgressType_DottedLine = 1, /// 虛線
CirleProgressType_DottedLine7Round = 2, // 虛線七分圓
CirleProgressType_SolidLine7Round = 3, // 實線七分圓
};
/**
初始化圓環
@param frame frame
@param lineType 圓環類型
@param beginColor 初始化漸變顏色
@param endColor 結束漸變顏色
@return self
*/
- (instancetype)initWithFrame:(CGRect)frame LineType:(CirleProgressType_)lineType BeginColor:(UIColor*)beginColor EndColor:(UIColor *)endColor;
/**
設置背景圓環的寬度，和進度圓環的寬度
@param progressStrokeWidth 進度圓環寬度
@param backWidth 背景圓環的寬度
*/
- (void)setProgressStrokeWidth:(CGFloat)progressStrokeWidth backstrokWidth:(CGFloat)backWidth;
/**
開始漸變動畫
*/
- (void)stroke;
圖層相關初始化
- (instancetype)initWithFrame:(CGRect)frame LineType:(CirleProgressType_)lineType BeginColor:(UIColor*)beginColor EndColor:(UIColor *)endColor;
{
if (self = [super initWithFrame:frame])
{
self.curCirleLine = lineType;
self.progressBeginColor = beginColor;
self.progressEndColor = endColor;
self.curPoint = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);
[self setUp];
NSLog(@" x==== %f y===== %f",self.center.x,self.center.y);
}
return self;
}
/**
* 初始化創建圖層
*/
- (void)setUp
{
//創建背景圖層
backGroundLayer = [CAShapeLayer layer];
backGroundLayer.fillColor = nil;
backGroundLayer.frame = self.bounds;
backGroundLayer.lineCap = kCALineCapRound;
backGroundLayer.lineJoin = kCALineJoinRound;
//創建填充圖層
frontFillLayer = [CAShapeLayer layer];
frontFillLayer.fillColor = nil;
frontFillLayer.frame = self.bounds;
frontFillLayer.lineCap = kCALineCapRound; //線終點
frontFillLayer.lineJoin = kCALineJoinRound; // 線拐角
// 如果是虛線
if (self.curCirleLine == CirleProgressType_DottedLine7Round || self.curCirleLine == CirleProgressType_DottedLine) {
backGroundLayer.lineDashPattern = @[@2,@6]; ///
frontFillLayer.lineDashPattern = @[@2,@6]; ///
// frontFillLayer.lineCap = kCALineJoinBevel;
backGroundLayer.lineCap = kCALineJoinMiter;
frontFillLayer.lineCap = kCALineJoinMiter;
[self.layer addSublayer:backGroundLayer];
[self.layer addSublayer:frontFillLayer];
}
else
{
[self.layer addSublayer:backGroundLayer];
// [self.layer addSublayer:frontFillLayer];// 不用漸變
//
if (self.curCirleLine == CirleProgressType_SolidLine) {
[self drawGradientLayer]; // 漸變
gradientLayer.mask = frontFillLayer;
[self.layer insertSublayer:backGroundLayer atIndex:0];
}
else if (self.curCirleLine == CirleProgressType_SolidLine7Round)
{
[self drawGradientLayer]; // 漸變
gradientLayer.mask = frontFillLayer;
[self.layer insertSublayer:backGroundLayer atIndex:0];
// [self.layer insertSublayer:backGroundLayer atIndex:0];
// [self.layer addSublayer:frontFillLayer];// 不用漸變
}
}
}
設置圓環背景顏色并畫出圓環
- (void)setProgressTrackColor:(UIColor *)progressTrackColor
{
_progressTrackColor = progressTrackColor;
backGroundLayer.strokeColor = progressTrackColor.CGColor;
// 判斷是七分圓還是十分圓
if (self.curCirleLine == CirleProgressType_DottedLine7Round || self.curCirleLine == CirleProgressType_SolidLine7Round) {
backGroundBezierPath = [UIBezierPath bezierPathWithArcCenter:self.curPoint radius:(CGRectGetWidth(self.bounds)-self.progressStrokeWidth)/2.f startAngle:M_PI_4* 3 endAngle:M_PI_4 clockwise:YES];
}
else
{
backGroundBezierPath = [UIBezierPath bezierPathWithArcCenter:self.curPoint radius:(CGRectGetWidth(self.bounds)-self.progressStrokeWidth)/2.f startAngle: - M_PI_2 endAngle: M_PI_2 * 3 clockwise:YES]; // 背景和進度開始要保持一致
}
backGroundLayer.path = backGroundBezierPath.CGPath;
}
設置圓環進度顏色（漸變之后這些顏色無效）并畫出圓環
/*****
設置圓弧進度百分比
ArcCenter: 原點
radius: 半徑
startAngle: 開始角度
endAngle: 結束角度
clockwise: 是否順時針方向 */
- (void)setProgressValue:(CGFloat)progressValue
{
_progressValue = progressValue;
// 判斷是七分圓還是十分圓
if (self.curCirleLine == CirleProgressType_DottedLine7Round || self.curCirleLine == CirleProgressType_SolidLine7Round)
{
frontFillBezierPath = [UIBezierPath bezierPathWithArcCenter:self.curPoint radius:(CGRectGetWidth(self.bounds)-self.progressStrokeWidth)/2.f startAngle: M_PI_4 * 3 endAngle:(3*M_PI_2)*progressValue + M_PI_4 * 3 clockwise:YES];
}
else
{
frontFillBezierPath = [UIBezierPath bezierPathWithArcCenter:self.curPoint radius:(CGRectGetWidth(self.bounds)-self.progressStrokeWidth)/2.f startAngle: - M_PI_2 endAngle:(2*M_PI)*progressValue - M_PI_2 clockwise:YES];
}
frontFillLayer.path = frontFillBezierPath.CGPath;
}
繪制漸變圖層
-(void)drawGradientLayer{
gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = self.bounds;
gradientLayer.colors = @[(id)self.progressBeginColor.CGColor,(id)self.progressEndColor.CGColor];
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(0, 1);
[self.layer insertSublayer:gradientLayer atIndex:0];
}
開始漸變動畫
/// 動畫效果
- (void)stroke
{
//畫圖動畫
self.hidden = NO;
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = kAnimationDuration;
animation.fromValue = @0.0f;
animation.toValue = @1.0f;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.removedOnCompletion = YES;
[frontFillLayer addAnimation:animation forKey:@"circleAnimation"];
}
調用使用
@interface ViewController ()
{
CirleProgeressView *solidprogressView;
CirleProgeressView *dottedprogressView;
CirleProgeressView *solid7progressView;
CirleProgeressView *dotted7progressView;
}
@end
#pragma 實線漸變圓環
- (void)solidLine
{
solidprogressView = [[CirleProgeressView alloc]initWithFrame:CGRectMake(50,50, 90, 90) LineType:(CirleProgressType_SolidLine) BeginColor:homeRingBegincolor EndColor:homeRingEndcolor];
//solidprogressView.backgroundColor = [UIColor yellowColor];
solidprogressView.progressColor = homeRingBegincolor;
[solidprogressView setProgressStrokeWidth:15 backstrokWidth:15];
solidprogressView.progressTrackColor = [UIColor grayColor];
[self.view addSubview:solidprogressView];
solidprogressView.progressValue = 0.7;
[solidprogressView stroke];/// 開始圓環動畫
}
#pragma 虛線圓環
- (void)dottedLine
{
dottedprogressView = [[CirleProgeressView alloc]initWithFrame:CGRectMake(50,150, 90, 90) LineType:(CirleProgressType_DottedLine) BeginColor:homeRingBegincolor EndColor:homeRingEndcolor];
//dottedprogressView.backgroundColor = [UIColor yellowColor];
dottedprogressView.progressColor = homeRingBegincolor;
[dottedprogressView setProgressStrokeWidth:15 backstrokWidth:15];
dottedprogressView.progressTrackColor = [UIColor grayColor];
[self.view addSubview:dottedprogressView];
dottedprogressView.progressValue = 0.7;
[dottedprogressView stroke];/// 開始圓環動畫
}
#pragma 虛線七分圓環
- (void)dottedLineRound7
{
solid7progressView = [[CirleProgeressView alloc]initWithFrame:CGRectMake(50,250, 90, 90) LineType:(CirleProgressType_DottedLine7Round) BeginColor:homeRingBegincolor EndColor:homeRingEndcolor];
//solid7progressView.backgroundColor = [UIColor blueColor];
solid7progressView.progressColor = homeRingBegincolor;
[solid7progressView setProgressStrokeWidth:15 backstrokWidth:15];
solid7progressView.progressTrackColor = [UIColor grayColor];
[self.view addSubview:solid7progressView];
solid7progressView.progressValue = 0.7;
[solid7progressView stroke];/// 開始圓環動畫
}
#pragma 實線七分圓環
- (void)solidLineRound7
{
dotted7progressView = [[CirleProgeressView alloc]initWithFrame:CGRectMake(50,350, 90, 90) LineType:(CirleProgressType_SolidLine7Round) BeginColor:homeRingBegincolor EndColor:homeRingEndcolor];
//dotted7progressView.backgroundColor = [UIColor redColor];
dotted7progressView.progressColor = homeRingBegincolor;
[dotted7progressView setProgressStrokeWidth:15 backstrokWidth:15];
dotted7progressView.progressTrackColor = [UIColor grayColor];
[self.view addSubview:dotted7progressView];
dotted7progressView.progressValue = 0.7;
[dotted7progressView stroke];/// 開始圓環動畫
}
下面是完整demo地址
demo
