前言：

• 前段時(shí)間因項(xiàng)目需要所以就自己寫(xiě)了一個(gè)很簡(jiǎn)單柱狀圖動(dòng)畫(huà)效果的實(shí)現(xiàn)，使用的基本技術(shù)也就是使用UIBezierPath繪制柱狀圖路徑叹谁，再把CAShapeLayer和UIBezierPath建立關(guān)系兴猩，最后使用CABasicAnimation實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)效果期吓，這就是簡(jiǎn)單地原理，開(kāi)始上代碼倾芝。

先看下效果圖（懶得單獨(dú)錄制了一起看吧）：

Untitled.gif

柱狀圖先不畫(huà)讨勤，我們先美觀下柱狀圖坐標(biāo)系，上代碼晨另。

//畫(huà)x軸坐標(biāo)系潭千，這個(gè)看自己需求定畫(huà)幾條線就循環(huán)幾條唄，我是按照View高度自適應(yīng)畫(huà)
for (int i = 0; i<=rect.size.height/10; i++) {
UIBezierPath *Polyline = [UIBezierPath bezierPath];
//設(shè)置起點(diǎn)借尿，起點(diǎn)的（x刨晴，y）
[Polyline moveToPoint:CGPointMake(0, rect.size.height-i*rect.size.height/10-30)];
//設(shè)置終點(diǎn)，終點(diǎn)的（x路翻，y）他會(huì)自動(dòng)和起點(diǎn)連成一條直線
[Polyline addLineToPoint:CGPointMake(self.bounds.size.width,rect.size.height-i*rect.size.height/10-30)];
//設(shè)置線條顏色顏色（也可以使用RGB格式設(shè)置）這個(gè)不用多講
[[UIColor lightGrayColor] set];
//設(shè)置線條寬度
Polyline.lineWidth = 0.2;
//最后添加到畫(huà)布完成繪畫(huà)
[Polyline stroke];
}

獲取最大值和計(jì)算坐標(biāo)比例是什么概念：

其實(shí)下面這倆句代碼和畫(huà)柱狀圖么什么鳥(niǎo)關(guān)系但是我還是想給大家講講這倆句代碼的重要作用狈癞。

• 比如像咋們這個(gè)教程的效果圖有六條柱狀數(shù)據(jù)，每一條數(shù)據(jù)都是不>定上下限的數(shù)值茂契，考慮到這個(gè)你就要去把你坐標(biāo)系值和你的View做一個(gè)比例劃分蝶桶，算出每一個(gè)Px對(duì)應(yīng)多少值，這樣不管多大的數(shù)值和多小的數(shù)>值我們都可以有條不穩(wěn)的畫(huà)在View掉冶，不至于超出坐標(biāo)系真竖。

//獲取數(shù)據(jù)最大值
float max = [[_valueArray valueForKeyPath:@"@max.intValue"] >floatValue];
//計(jì)算坐標(biāo)比例
float value = (rect.size.height-30-(rect.size.height/10))/max;

下面我們來(lái)坐標(biāo)系：

• 下面代碼是全部繪畫(huà)完成的代碼儡蔓，看我注釋詳解。

循環(huán)創(chuàng)建柱狀圖疼邀，我循環(huán)一個(gè)數(shù)組他的count是6喂江，你們看需求創(chuàng)建柱狀數(shù)。

for (int i = 0; i<_valueArray.count; i++) {
//柱狀值旁振，這個(gè)label是柱狀上面那個(gè)最終值這個(gè)你們看需求做就好
UILabel*label=[[UILabel alloc]initWithFrame:CGRectMake((((XWSCREENW-(5*20+5*(XWSCREENW == 320 ? 25:40)))/2)+(i*20)+(i*(XWSCREENW == 320 ? 25:40)))-20, self.bounds.size.height-45-[[_valueArray objectAtIndex:i] floatValue]*value, 40, 20)];
label.text = [NSString stringWithFormat:@"%@",[_valueArray objectAtIndex:i]];
label.textAlignment = NSTextAlignmentCenter;
label.font = [UIFont systemFontOfSize:11];
[self addSubview:label];

//x軸坐標(biāo)值获询，這個(gè)是下面那個(gè)月份，看需求你們自己來(lái)不用多講

UILabel *label1 = [[UILabel alloc]initWithFrame:CGRectMake((((XWSCREENW-(5*20+5*(XWSCREENW == 320 ? 25:40)))/2)+(i*20)+(i*(XWSCREENW == 320 ? 25:40)))-20, rect.size.height-25, 40, 20)];

label1.text= [NSString stringWithFormat:@"%@",[_monthArray objectAtIndex:i]];
label1.textAlignment = NSTextAlignmentCenter;
label1.font = [UIFont systemFontOfSize:15];
[self addSubview:label1];

下面是正式開(kāi)始畫(huà)柱狀圖

• 創(chuàng)建UIBezierPath

UIBezierPath *Polyline = [UIBezierPath bezierPath];
//設(shè)置起點(diǎn)拐袜，這個(gè)和上面畫(huà)x軸坐標(biāo)系一樣把柱狀的起點(diǎn)和終點(diǎn)路徑先繪制出來(lái)
[Polyline moveToPoint:CGPointMake(((XWSCREENW-(5*20+5*(XWSCREENW == 320 ? 25:40)))/2)+(i*20)+(i*(XWSCREENW == 320 ? 25:40)), rect.size.height-30)];
//設(shè)置終點(diǎn)
[Polyline addLineToPoint:CGPointMake(((XWSCREENW-(5*20+5*(XWSCREENW == 320 ? 25:40)))/2)+(i*20)+(i*(XWSCREENW == 320 ? 25:40)),rect.size.height-30-[[_valueArray objectAtIndex:i] floatValue]*value)];
//設(shè)置線條顏色吉嚣，這個(gè)為什么我會(huì)設(shè)置clearColor這個(gè)顏色呢？是因?yàn)槲覀冎皇抢L制一個(gè)路徑在路上走得并不是它所以不需要它顯示在UI效果上面
[[UIColor clearColor] set];
//設(shè)置線條寬度蹬铺，這個(gè)沒(méi)必要說(shuō)自己懂尝哆，算了說(shuō)說(shuō)吧，我設(shè)置20呢是因?yàn)槲蚁嘧屗秃竺鍯AShapeLayer寬度一樣甜攀，并無(wú)卵用秋泄，因?yàn)檫€是那句話在路上走得并不是它而是CAShapeLayer所以設(shè)置寬度為多少都無(wú)所謂。
Polyline.lineWidth = 20;
//添加到畫(huà)布规阀，你懂得
[Polyline stroke];

• 創(chuàng)建CAShapeLayer

//添加CAShapeLayer恒序，這就是一個(gè)創(chuàng)建CAShapeLayer對(duì)象你們看得懂
CAShapeLayer *shapeLine=[[CAShapeLayer alloc]init];
//設(shè)置線條顏色，這個(gè)顏色是要設(shè)置的谁撼，因?yàn)樵赨I上顯示的是它歧胁，我做個(gè)判斷是因?yàn)樽詈笠粭l柱是其他顏色的所以判斷了一下， 這個(gè)不是重點(diǎn)自動(dòng)忽略厉碟。
if (i == _valueArray.count-1) {
shapeLine.strokeColor = [UIColor colorWithRed:254/255.0 green:210/255.0 blue:161/255.0 alpha:0.8].CGColor;
}else{
shapeLine.strokeColor = [UIColor colorWithRed:0.400 green:1.000 blue:1.000 alpha:0.6].CGColor;
}
//設(shè)置線條寬度喊巍，這個(gè)必須設(shè)置。
shapeLine.lineWidth = 20.0;
//把CAShapeLayer添加到當(dāng)前視圖CAShapeLayer箍鼓，建立關(guān)聯(lián)逢并。
[self.layer addSublayer:shapeLine];
//把Polyline的路徑賦予shapeLine
shapeLine.path = Polyline.CGPath;

• 開(kāi)始添加動(dòng)畫(huà)之剧，從這開(kāi)始就是做動(dòng)畫(huà)效果。

[CATransaction begin];
//創(chuàng)建一個(gè)strokeEnd路徑的動(dòng)畫(huà)砍聊，至于后面這個(gè)key是“strokeEnd”其實(shí)就是一個(gè)動(dòng)畫(huà)的類(lèi)型背稼，自己百度吧很多種。
CABasicAnimation*pathAnimation=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
//動(dòng)畫(huà)時(shí)間玻蝌，就是開(kāi)始到結(jié)束的時(shí)間蟹肘，按需求自己設(shè)置词疼。
pathAnimation.duration = 2.0;
//添加動(dòng)畫(huà)樣式
 pathAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//動(dòng)畫(huà)起點(diǎn)，讓CAShapeLayer在UIBezierPath得0開(kāi)始動(dòng)畫(huà)
pathAnimation.fromValue = @0.0f;
//動(dòng)畫(huà)停止位置贰盗，為什么是停止而不是終點(diǎn)阳欲，他就是停止一下而已別多想舵盈。后面的值得0~1（CAShapeLayer走UIBezierPath的百分之多少）
pathAnimation.toValue  = @1.0f;
//把動(dòng)畫(huà)添加到CAShapeLayer
[shapeLine addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
//動(dòng)畫(huà)終點(diǎn)，這個(gè)才是終點(diǎn)球化，不懂的話自己去設(shè)置試試就知道啦秽晚。
shapeLine.strokeEnd = 1.0;
//結(jié)束動(dòng)畫(huà)
[CATransaction commit];
}

這個(gè)我們就繪制完這個(gè)簡(jiǎn)單的柱狀圖形了，估計(jì)大家看著迷糊巢掺，我來(lái)給大家總結(jié)下：

• 首先是用UIBezierPath繪制一條路再使用CAShapeLayer繪制一個(gè)人句伶，再給這個(gè)人用CABasicAnimation添加一個(gè)走路的方式方法，重點(diǎn)是柱狀圖是一個(gè)進(jìn)度展示陆淀，所以展示多少是路說(shuō)了算熄阻。簡(jiǎn)單粗暴的比例將就著看吧。

• GitHub下載地址：https://github.com/QQ396368888/Graphics-animation-collection.git