ios简单渐变圆环，表盘画法
2018-03-15 本文已影响187人
hhjdk
在开发的时候，有时候会用到圆环进度，我的产品还有其他的一些渐变要求，没办法，只有查资料，写代码，完成需求
我把这些画圆环，表盘，简单的封装来一下，下面是效果，
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
