iOS 自定义比例的圆弧绘制并旋转、圆形进度条与速度表盘Demo

先上Demo地址

圆形进度条：https://github.com/DrunkenMouse/-

速度表盘：https://github.com/DrunkenMouse/speed

正文：

前不久的前不久，有一个哥们问了我这么一个问题：

用三个不同颜色的等比例圆弧拼成一个圆怎么画？

当时我很认真的想了想后不解的反问他：为什么不把一个圆等比例的分成三份，每一份的颜色不同那？

我看到他貌似思索了一下后皱了皱眉头：也对啊。。那你会吗？

然后我就写了这么一份Demo出来了，想分成几份就分成几份 画完之后还会自动旋转。

就连圆弧的颜色都是随机产生的~

原理很简单，先初始化开始角度与结束角度为0

随后通过接收到的要求绘制的圆弧量Num来实现一个for循环

//初始化起点位置

CGFloat startAngle = 0.0;

//初始化结束位置

CGFloat endAngle = 0.0;

//通过for循环绘制圆弧

for (int i=0;i

}

在for循环的内部

书写圆弧的绘制与动画效果

//每个圆弧的颜色随机产生并设置绘制色为随机色

UIColor *color = [UIColor colorWithRed:((float)arc4random_uniform(256)/255.0) green:((float)arc4random_uniform(256)/255.0) blue:((float)arc4random_uniform(256)/255.0) alpha:1.0];

//每次绘制时，开始角度为上次的结束角度

startAngle = endAngle;

//每次绘制的结束角度为360°/num+开始角度

endAngle =  M_PI*2/num + startAngle;

//获取当前View的中心，用self.center会出错

CGPoint centers = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);

//设置贝兹路径

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:centers radius:100 startAngle:startAngle endAngle:endAngle clockwise:1];

//画一根到 圆心的线

[path addLineToPoint:centers];

//通过layer绘制

CAShapeLayer *layer = [CAShapeLayer layer];

layer.path = path.CGPath;

//设置填充色为自定义颜色

layer.fillColor = color.CGColor;

//开始绘制

[self.layer addSublayer:layer];

//添加一个动画为旋转

CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];

//旋转的时间

basic.duration = 10;

//旋转的角度

CGFloat angle  = M_PI * 10;

basic.toValue = @(angle);

//旋转的模式

basic.timingFunction = [CAMediaTimingFunction functionWithName:@"default"];

//给自身添加旋转动画

[self.layer addAnimation:basic forKey:@"animation"];

而后直接调用此方法传入要求绘制的数量Num就可以画出了。

然后我那哥们看了看后沉思许久，又问我：那你能不能动态的绘制一个圆形进度条出来？

我想了想，而后又反问他：这个，难吗？

于是又一份Demo出来了：

关于滑动条Slider的数值改变而绘制相对应的圆弧

首先需要定义一个View，并设置一个属性progress

而后通过在slider的ValueChange调用的方法里对属性progress进行赋值

-(void)sliderValueChange:(UISlider *)sender{

//修改绘制路径View的进度

self.proView.progress = sender.value;

}

随后通过重写progress的set方法来绘制对应的圆弧

//圆心

CGPoint centers = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);

//起点位置

CGFloat startAngle = 0;

//结束位置        进度条的数据 * 360 度

CGFloat endAngle = self.progress * M_PI * 2 + startAngle;  //默认是 0;

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:centers radius:100 startAngle:startAngle endAngle:endAngle clockwise:1];

//画一根到 圆心的线

[path addLineToPoint:centers];

//通过layer绘制

CAShapeLayer *layer = [CAShapeLayer layer];

layer.path = path.CGPath;

layer.fillColor = [UIColor blueColor].CGColor;

//给自身Layer添加并保存自定义的Layer

[self.layer addSublayer:layer];

self.layers = layer;

而后当我把这份Demo交给我那哥们的时候，我那哥们又问了。

哥们：那个。。最近又有新要求了，你能帮我写个速度表盘吗？

我：。。。。。

我：你说什么？！风太大我听不见！对了我还有事！先撤了！

然而即使如此，我还是写了一个表盘出来

详情可以参考这位大大的讲解：http://www.jianshu.com/p/7655315620f7