最近項(xiàng)目中遇到了一個(gè)需求放刨，在做車況的檢查動(dòng)畫時(shí)工秩，開始以為時(shí)非常簡(jiǎn)單的動(dòng)畫通過UIBezierPath幾句代碼就搞定的事，最后UI出來的時(shí)候 才發(fā)現(xiàn)事情要稍微麻煩一點(diǎn)點(diǎn)宏榕，就因?yàn)閁I給的圖是水平的平角 如果用系統(tǒng)的直接畫圖是實(shí)現(xiàn)不了這個(gè)效果的拓诸，沒辦法那就只有麻煩點(diǎn)計(jì)算下擼唄，先看下效果圖：
其實(shí)要做這個(gè)也不是很麻煩麻昼，做完之后其實(shí)就其中的畫弧角度需要運(yùn)動(dòng)三角函數(shù)關(guān)系計(jì)算下角度問題。其次是車況分?jǐn)?shù)的漸變效果是根據(jù)分?jǐn)?shù)漸變最后一部分小弧度的馋辈。
主要代碼部分：
其中角度offsetAngle就是偏移的角度：如圖 具體的就不闡述了抚芦。
#define DEGREES_TO_RADIANS(degrees) ((degrees)*M_PI)/180
#define RADIANS_TO_DEGREES(radians) ((radians) * (180.0/ M_PI))
#define STARTANGLE(radians)180-radians
#define ENDANGLE(radians)(360-(90-radians)*2)
//外層
-(void)drowOuter
{
doubleoffsetAngle = [selfcalculateAngleValueRadius:self.circleRadiusdifRadius:1];
UIBezierPath*path = [UIBezierPathbezierPath];
[pathaddArcWithCenter:CGPointMake(_centerCircleX,_centerCircleY)radius:self.circleRadiusstartAngle:DEGREES_TO_RADIANS(STARTANGLE(_endAngle))endAngle:DEGREES_TO_RADIANS(_startAngle+ENDANGLE(_endAngle))clockwise:YES];
[pathaddArcWithCenter:CGPointMake(_centerCircleX,_centerCircleY)radius:self.circleRadius-2startAngle:DEGREES_TO_RADIANS(STARTANGLE(offsetAngle)+ENDANGLE(offsetAngle))endAngle:DEGREES_TO_RADIANS(180-offsetAngle)clockwise:NO];
[pathclosePath];
CAShapeLayer*arc = [CAShapeLayerlayer];
arc.path= path.CGPath;
arc.fillColor=self.fillColor.CGColor;
arc.strokeColor=self.fillColor.CGColor;
[self.layeraddSublayer:arc];
}
//內(nèi)層背景
-(void)drowBottom
{
UIBezierPath*path = [selfgetProgressPath:1.0];
CAShapeLayer*arc = [CAShapeLayerlayer];
arc.path= path.CGPath;
arc.fillColor=self.fillColor.CGColor;
arc.strokeColor=self.fillColor.CGColor;
[self.layeraddSublayer:arc];
}
//內(nèi)層進(jìn)度
-(void)drowProgress
{
UIBezierPath*path = [selfgetProgressPath:0.0];
CAShapeLayer*arc = [CAShapeLayerlayer];
_progressLayer= arc;
arc.path= path.CGPath;
CAGradientLayer*gradientLayer = [CAGradientLayerlayer];
_gradientLayer= gradientLayer;
gradientLayer.frame=self.frame;
gradientLayer.colors=@[(__bridgeid)[UIColorcolorWithWhite:1alpha:0.4].CGColor,(__bridgeid)[UIColorcolorWithWhite:1alpha:1].CGColor];
gradientLayer.startPoint=CGPointMake(0,0.5);
gradientLayer.endPoint=CGPointMake(1,0.5);
CALayer*lay = [CALayerlayer];
[layaddSublayer:gradientLayer];
lay.mask=_progressLayer;
[self.layeraddSublayer:lay];
}
-(UIBezierPath*)getProgressPath:(CGFloat)progress
{
UIBezierPath*path = [UIBezierPathbezierPath];
[pathsetLineWidth:1.0];
[pathaddArcWithCenter:CGPointMake(_centerCircleX,_centerCircleY)radius:_progressRadiusstartAngle:DEGREES_TO_RADIANS(STARTANGLE(_offsetOutAngle))endAngle:DEGREES_TO_RADIANS(180-_offsetOutAngle+ENDANGLE(_offsetOutAngle)*progress)clockwise:YES];
[pathaddArcWithCenter:CGPointMake(_centerCircleX,_centerCircleY)radius:_progressRadius-7startAngle:DEGREES_TO_RADIANS(STARTANGLE(_offsetAngle)+ENDANGLE(_offsetAngle)*progress)endAngle:DEGREES_TO_RADIANS(180-_offsetAngle)clockwise:NO];
returnpath;
}
//計(jì)算角度
-(double)calculateAngleValueRadius:(CGFloat)radius difRadius:(CGFloat)difRadius
{
doubleoffsetAngle =0.0;
//double x1 = self.width/2 + radius*cos(DEGREES_TO_RADIANS(_startAngle));
doubley1 =_centerCircleY+ radius*sin(DEGREES_TO_RADIANS(_startAngle));
doublevalueA =fabs(sqrt((radius-difRadius)*(radius-difRadius)-((y1-_centerCircleY)*(y1-_centerCircleY))) -_centerCircleX);
//利用余弦定理求角弧度
doublefa = radius*sin(DEGREES_TO_RADIANS(_startAngle));
doublefb = radius-difRadius;
doublefc = (_centerCircleX- valueA);
double offsetRadian =acos((fb*fb+fc*fc-fa*fa)/(2*fb*fc));
offsetAngle =RADIANS_TO_DEGREES(offsetRadian);
return offsetAngle;
}
漸變部分代碼 由于和進(jìn)度有關(guān)系所以用到了比例：
floatvalue = [currentProgressfloatValue];
UIBezierPath*path = [selfgetProgressPath:value];
_progressLayer.path= path.CGPath;
_gradientLayer.locations=@[@(value*0.5),@(value*0.75)];
intvalueNum =round(value*100.0);
[selfsetValueForLable:@(valueNum)];
if(valueNum >=0&& valueNum <60) {
self.backgroundColor=MAIN_RED_COLOR;
}elseif(valueNum >=60&& valueNum <80){
self.backgroundColor=MAIN_ORANGE_COLOR;
}else{
self.backgroundColor=MAIN_GREEN_COLOR;
}
為了數(shù)字聯(lián)動(dòng)和弧度動(dòng)畫效果用到了定時(shí)器其中的具體代碼和效果圖見GitHub地址：https://github.com/loveWang/WCarProgress.git
