iOS柱状图/折线图/彩虹图/水波球带动画实现

前言：

• 前段时间因项目需要所以就自己写了一个很简单柱状图动画效果的实现，使用的基本技术也就是使用UIBezierPath绘制柱状图路径，再把CAShapeLayer和UIBezierPath建立关系，最后使用CABasicAnimation实现简单的动画效果，这就是简单地原理，开始上代码。

先看下效果图（懒得单独录制了一起看吧）：

Untitled.gif

柱状图先不画，我们先美观下柱状图坐标系，上代码。

//画x轴坐标系，这个看自己需求定画几条线就循环几条呗，我是按照View高度自适应画
for (int i = 0; i<=rect.size.height/10; i++) {
UIBezierPath *Polyline = [UIBezierPath bezierPath];
//设置起点，起点的（x，y）
[Polyline moveToPoint:CGPointMake(0, rect.size.height-i*rect.size.height/10-30)];
//设置终点，终点的（x，y）他会自动和起点连成一条直线
[Polyline addLineToPoint:CGPointMake(self.bounds.size.width,rect.size.height-i*rect.size.height/10-30)];
//设置线条颜色颜色（也可以使用RGB格式设置）这个不用多讲
[[UIColor lightGrayColor] set];
//设置线条宽度
Polyline.lineWidth = 0.2;
//最后添加到画布完成绘画
[Polyline stroke];
}

获取最大值和计算坐标比例是什么概念：

其实下面这俩句代码和画柱状图么什么鸟关系但是我还是想给大家讲讲这俩句代码的重要作用。

• 比如像咋们这个教程的效果图有六条柱状数据，每一条数据都是不>定上下限的数值，考虑到这个你就要去把你坐标系值和你的View做一个比例划分，算出每一个Px对应多少值，这样不管多大的数值和多小的数>值我们都可以有条不稳的画在View，不至于超出坐标系。

//获取数据最大值
float max = [[_valueArray valueForKeyPath:@"@max.intValue"] >floatValue];
//计算坐标比例
float value = (rect.size.height-30-(rect.size.height/10))/max;

下面我们来坐标系：

• 下面代码是全部绘画完成的代码，看我注释详解。

循环创建柱状图，我循环一个数组他的count是6，你们看需求创建柱状数。

for (int i = 0; i<_valueArray.count; i++) {
//柱状值，这个label是柱状上面那个最终值这个你们看需求做就好
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轴坐标值，这个是下面那个月份，看需求你们自己来不用多讲

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];

下面是正式开始画柱状图

• 创建UIBezierPath

UIBezierPath *Polyline = [UIBezierPath bezierPath];
//设置起点，这个和上面画x轴坐标系一样把柱状的起点和终点路径先绘制出来
[Polyline moveToPoint:CGPointMake(((XWSCREENW-(5*20+5*(XWSCREENW == 320 ? 25:40)))/2)+(i*20)+(i*(XWSCREENW == 320 ? 25:40)), rect.size.height-30)];
//设置终点
[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)];
//设置线条颜色，这个为什么我会设置clearColor这个颜色呢？是因为我们只是绘制一个路径在路上走得并不是它所以不需要它显示在UI效果上面
[[UIColor clearColor] set];
//设置线条宽度，这个没必要说自己懂，算了说说吧，我设置20呢是因为我相让他和后面CAShapeLayer宽度一样，并无卵用，因为还是那句话在路上走得并不是它而是CAShapeLayer所以设置宽度为多少都无所谓。
Polyline.lineWidth = 20;
//添加到画布，你懂得
[Polyline stroke];

• 创建CAShapeLayer

//添加CAShapeLayer，这就是一个创建CAShapeLayer对象你们看得懂
CAShapeLayer *shapeLine=[[CAShapeLayer alloc]init];
//设置线条颜色，这个颜色是要设置的，因为在UI上显示的是它，我做个判断是因为最后一条柱是其他颜色的所以判断了一下， 这个不是重点自动忽略。
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;
}
//设置线条宽度，这个必须设置。
shapeLine.lineWidth = 20.0;
//把CAShapeLayer添加到当前视图CAShapeLayer，建立关联。
[self.layer addSublayer:shapeLine];
//把Polyline的路径赋予shapeLine
shapeLine.path = Polyline.CGPath;

• 开始添加动画，从这开始就是做动画效果。

[CATransaction begin];
//创建一个strokeEnd路径的动画，至于后面这个key是“strokeEnd”其实就是一个动画的类型，自己百度吧很多种。
CABasicAnimation*pathAnimation=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
//动画时间，就是开始到结束的时间，按需求自己设置。
pathAnimation.duration = 2.0;
//添加动画样式
 pathAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//动画起点，让CAShapeLayer在UIBezierPath得0开始动画
pathAnimation.fromValue = @0.0f;
//动画停止位置，为什么是停止而不是终点，他就是停止一下而已别多想。后面的值得0~1（CAShapeLayer走UIBezierPath的百分之多少）
pathAnimation.toValue  = @1.0f;
//把动画添加到CAShapeLayer
[shapeLine addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
//动画终点，这个才是终点，不懂的话自己去设置试试就知道啦。
shapeLine.strokeEnd = 1.0;
//结束动画
[CATransaction commit];
}

这个我们就绘制完这个简单的柱状图形了，估计大家看着迷糊，我来给大家总结下：

• 首先是用UIBezierPath绘制一条路再使用CAShapeLayer绘制一个人，再给这个人用CABasicAnimation添加一个走路的方式方法，重点是柱状图是一个进度展示，所以展示多少是路说了算。简单粗暴的比例将就着看吧。

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