先上Demo地址
圓形進(jìn)度條：https://github.com/DrunkenMouse/-
速度表盤：https://github.com/DrunkenMouse/speed
正文：
前不久的前不久，有一個(gè)哥們問(wèn)了我這么一個(gè)問(wèn)題：
用三個(gè)不同顏色的等比例圓弧拼成一個(gè)圓怎么畫？
當(dāng)時(shí)我很認(rèn)真的想了想后不解的反問(wèn)他：為什么不把一個(gè)圓等比例的分成三份，每一份的顏色不同那？
我看到他貌似思索了一下后皺了皺眉頭：也對(duì)啊。。那你會(huì)嗎？
然后我就寫了這么一份Demo出來(lái)了，想分成幾份就分成幾份 畫完之后還會(huì)自動(dòng)旋轉(zhuǎn)。
就連圓弧的顏色都是隨機(jī)產(chǎn)生的~
原理很簡(jiǎn)單，先初始化開始角度與結(jié)束角度為0
隨后通過(guò)接收到的要求繪制的圓弧量Num來(lái)實(shí)現(xiàn)一個(gè)for循環(huán)
//初始化起點(diǎn)位置
CGFloat startAngle = 0.0;
//初始化結(jié)束位置
CGFloat endAngle = 0.0;
//通過(guò)for循環(huán)繪制圓弧
for (int i=0;i<num;i++){
}
在for循環(huán)的內(nèi)部
書寫圓弧的繪制與動(dòng)畫效果
//每個(gè)圓弧的顏色隨機(jī)產(chǎn)生并設(shè)置繪制色為隨機(jī)色
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];
//每次繪制時(shí)，開始角度為上次的結(jié)束角度
startAngle = endAngle;
//每次繪制的結(jié)束角度為360°/num+開始角度
endAngle =? M_PI*2/num + startAngle;
//獲取當(dāng)前View的中心，用self.center會(huì)出錯(cuò)
CGPoint centers = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);
//設(shè)置貝茲路徑
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:centers radius:100 startAngle:startAngle endAngle:endAngle clockwise:1];
//畫一根到 圓心的線
[path addLineToPoint:centers];
//通過(guò)layer繪制
CAShapeLayer *layer = [CAShapeLayer layer];
layer.path = path.CGPath;
//設(shè)置填充色為自定義顏色
layer.fillColor = color.CGColor;
//開始繪制
[self.layer addSublayer:layer];
//添加一個(gè)動(dòng)畫為旋轉(zhuǎn)
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
//旋轉(zhuǎn)的時(shí)間
basic.duration = 10;
//旋轉(zhuǎn)的角度
CGFloat angle? = M_PI * 10;
basic.toValue = @(angle);
//旋轉(zhuǎn)的模式
basic.timingFunction = [CAMediaTimingFunction functionWithName:@"default"];
//給自身添加旋轉(zhuǎn)動(dòng)畫
[self.layer addAnimation:basic forKey:@"animation"];
而后直接調(diào)用此方法傳入要求繪制的數(shù)量Num就可以畫出了。
然后我那哥們看了看后沉思許久，又問(wèn)我：那你能不能動(dòng)態(tài)的繪制一個(gè)圓形進(jìn)度條出來(lái)？
我想了想，而后又反問(wèn)他：這個(gè)，難嗎？
于是又一份Demo出來(lái)了：
關(guān)于滑動(dòng)條Slider的數(shù)值改變而繪制相對(duì)應(yīng)的圓弧
首先需要定義一個(gè)View，并設(shè)置一個(gè)屬性progress
而后通過(guò)在slider的ValueChange調(diào)用的方法里對(duì)屬性progress進(jìn)行賦值
-(void)sliderValueChange:(UISlider *)sender{
//修改繪制路徑View的進(jìn)度
self.proView.progress = sender.value;
}
隨后通過(guò)重寫progress的set方法來(lái)繪制對(duì)應(yīng)的圓弧
//圓心
CGPoint centers = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);
//起點(diǎn)位置
CGFloat startAngle = 0;
//結(jié)束位置? ? ? ? 進(jìn)度條的數(shù)據(jù) * 360 度
CGFloat endAngle = self.progress * M_PI * 2 + startAngle;? //默認(rèn)是 0;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:centers radius:100 startAngle:startAngle endAngle:endAngle clockwise:1];
//畫一根到 圓心的線
[path addLineToPoint:centers];
//通過(guò)layer繪制
CAShapeLayer *layer = [CAShapeLayer layer];
layer.path = path.CGPath;
layer.fillColor = [UIColor blueColor].CGColor;
//給自身Layer添加并保存自定義的Layer
[self.layer addSublayer:layer];
self.layers = layer;
而后當(dāng)我把這份Demo交給我那哥們的時(shí)候，我那哥們又問(wèn)了。
哥們：那個(gè)。。最近又有新要求了，你能幫我寫個(gè)速度表盤嗎？
我：。。。。。
我：你說(shuō)什么？！風(fēng)太大我聽不見！對(duì)了我還有事！先撤了！
然而即使如此，我還是寫了一個(gè)表盤出來(lái)
詳情可以參考這位大大的講解：http://www.lxweimin.com/p/7655315620f7
