使用CAShapeLayer与UIBezierPath画动态柱状图

</pre><p style="margin-top: 0px; margin-bottom: 0px; line-height: normal; font-family: Menlo;"><pre name="code" class="objc" style="color: rgb(75, 209, 87); font-size: 11px;">//
//  TextView.m
//  练习
//
//  Created by 王文杰 on 16/9/20.
//  Copyright © 2016年 王文杰. All rights reserved.
//

#import "TextView.h"

@implementation TextView


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    
    NSArray * Value = @[@"60",@"90",@"100",@"80",@"200",@"30"];
    NSArray * month = @[@"1月",@"2月",@"3月",@"4月",@"5月",@"6月"];
    //获取数据最大值
    float max = [[Value valueForKeyPath:@"@max.intValue"] floatValue];
    //计算坐标比例
    float value = 140/max;
    //循环创建柱状图
    for (int i = 0; i<Value.count; i++) {
        /**
         *  
         //获得上下文
         CGContextRef ctx=UIGraphicsGetCurrentContext();
         //第二个参数是x轴，第三个是y轴/起点
         CGContextMoveToPoint(ctx, 80+i*50, 200);
         //第二个参数是x轴，第三个是y轴/终点
         CGContextAddLineToPoint(ctx, 80+i*50, self.bounds.size.height-[[cost objectAtIndex:i] floatValue]*value);
         //设置绘图的颜色
         CGContextSetRGBStrokeColor(ctx, 1.0, 0.7, 0.3, 1.0);
         //设置线条的宽度
         CGContextSetLineWidth(ctx, 10);
         //设置线条的起点和终点的样式
         CGContextSetLineCap(ctx, kCGLineCapButt);
         //设置宽度
         CGContextSetLineWidth(ctx, 20);
         //绘制一条空心的线
         CGContextStrokePath(ctx);

         *
         *  @return 第一种方法
         */
        
        
        
        UIBezierPath *Polyline = [UIBezierPath bezierPath];
        //设置起点
        [Polyline moveToPoint:CGPointMake(80+i*50, 200)];
        //设置终点
        [Polyline addLineToPoint:CGPointMake(80+i*50,self.bounds.size.height-[[Value objectAtIndex:i] floatValue]*value)];
        //设置颜色
        [[UIColor clearColor] set];
        //设置宽度
        Polyline.lineWidth = 20;
        //添加到画布
        [Polyline stroke];
        
        //添加CAShapeLayer
        CAShapeLayer *shapeLine = [[CAShapeLayer alloc]init];
        //设置颜色
        shapeLine.strokeColor = [UIColor colorWithRed:0.400 green:1.000 blue:1.000 alpha:0.8].CGColor;
        //设置宽度
        shapeLine.lineWidth = 20.0;
        //把CAShapeLayer添加到当前视图CAShapeLayer
        [self.layer addSublayer:shapeLine];
        //把Polyline的路径赋予shapeLine
        shapeLine.path = Polyline.CGPath;
        
        //开始添加动画
        [CATransaction begin];
        //创建一个strokeEnd路径的动画
        CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        //动画时间
        pathAnimation.duration = 2.0;
        //添加动画样式
        pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        //动画起点
        pathAnimation.fromValue = @0.0f;
        //动画停止位置
        pathAnimation.toValue   = @1.0f;
        //把动画添加到CAShapeLayer
        [shapeLine addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
        //动画终点
        shapeLine.strokeEnd = 1.0;
        //结束动画
        [CATransaction commit];

        
        //柱状图值
        UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(60+i*50, self.bounds.size.height-20-[[Value objectAtIndex:i] floatValue]*value, 40, 20)];
        label.text = [NSString stringWithFormat:@"%@",[Value objectAtIndex:i]];
        label.textAlignment = NSTextAlignmentCenter;
        label.font = [UIFont systemFontOfSize:11];
        [self addSubview:label];
        //x轴坐标
        UILabel * label1 = [[UILabel alloc]initWithFrame:CGRectMake(60+i*50, 200, 40, 20)];
        label1.text = [NSString stringWithFormat:@"%@",[month objectAtIndex:i]];
        label1.textAlignment = NSTextAlignmentCenter;
        label1.font = [UIFont systemFontOfSize:15];
        [self addSubview:label1];
        
    }
    
   
    
    //画x轴
    for (int i = 0; i<15; i++) {
        UIBezierPath *Polyline = [UIBezierPath bezierPath];
        //设置起点
        [Polyline moveToPoint:CGPointMake(0, 200-i*10)];
        //设置终点
        [Polyline addLineToPoint:CGPointMake(self.bounds.size.width,200-i*10)];
        //设置颜色
        [[UIColor grayColor] set];
        //设置宽度
        Polyline.lineWidth = 0.3;
        //添加到画布
        [Polyline stroke];
    }


}


@end

为了方便大家看的简单明白，所以代码比较粗糙，也没有封装，应为需求开发网上找了好多UIBezierPath的资料都看的不是很明白，所以自己研究了半天写出来给大家看看。