先上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<num;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
网友评论