先給大家展示下效果圖：
概述
現(xiàn)狀
折線(xiàn)圖的應(yīng)用比較廣泛，為了增強(qiáng)用戶(hù)體驗(yàn)，很多應(yīng)用中都嵌入了折線(xiàn)圖。折線(xiàn)圖可以更加直觀(guān)的表示數(shù)據(jù)的變化。網(wǎng)絡(luò)上有很多繪制折線(xiàn)圖的demo，有的也使用了動(dòng)畫(huà)，但是線(xiàn)條顏色漸變的折線(xiàn)圖的demo少之又少，甚至可以說(shuō)沒(méi)有。該Blog闡述了動(dòng)畫(huà)繪制線(xiàn)條顏色漸變的折線(xiàn)圖的實(shí)現(xiàn)方案，以及折線(xiàn)圖線(xiàn)條顏色漸變的實(shí)現(xiàn)原理，并附以完整的示例。
成果
本人已將折線(xiàn)圖封裝到了一個(gè)UIView子類(lèi)中，并提供了相應(yīng)的接口。該自定義折線(xiàn)圖視圖，基本上可以適用于大部分需要集成折線(xiàn)圖的項(xiàng)目。若你遇到相應(yīng)的需求可以直接將文件拖到項(xiàng)目中，調(diào)用相應(yīng)的接口即可
項(xiàng)目文件中包含了大量的注釋代碼，若你的需求與折線(xiàn)圖的實(shí)現(xiàn)效果有差別，那么你可以對(duì)項(xiàng)目文件的進(jìn)行修改，也可以依照思路定義自己的折線(xiàn)圖視圖
Blog中涉及到的知識(shí)點(diǎn)
CALayer
圖層，可以簡(jiǎn)單的看做一個(gè)不接受用戶(hù)交互的UIView
每個(gè)圖層都具有一個(gè)CALayer類(lèi)型mask屬性，作用與蒙版相似
Blog中主要用到的CALayer子類(lèi)有
CAGradientLayer，繪制顏色漸變的背景圖層
CAShapeLayer，繪制折線(xiàn)圖
CAAnimation
核心動(dòng)畫(huà)的基類(lèi)（不可實(shí)例化對(duì)象），實(shí)現(xiàn)動(dòng)畫(huà)操作
Quartz 2D
一個(gè)二維的繪圖引擎，用來(lái)繪制折線(xiàn)（Path）和坐標(biāo)軸信息（Text）
實(shí)現(xiàn)思路
折線(xiàn)圖視圖
整個(gè)折線(xiàn)圖將會(huì)被自定義到一個(gè)UIView子類(lèi)中
坐標(biāo)軸繪制
坐標(biāo)軸直接繪制到折線(xiàn)圖視圖上，在自定義折線(xiàn)圖視圖的 drawRect 方法中繪制坐標(biāo)軸相關(guān)信息（線(xiàn)條和文字）
注意坐標(biāo)系的轉(zhuǎn)換
線(xiàn)條顏色漸變
失敗的方案
開(kāi)始的時(shí)候，為了實(shí)現(xiàn)線(xiàn)條顏色漸變，我的思考方向是，如何改變路徑（UIBezierPath）的渲染顏色（strokeColor）。但是strokeColor只可以設(shè)置一種，所以最終無(wú)法實(shí)現(xiàn)線(xiàn)條顏色的漸變。
成功的方案
在探索過(guò)程中找到了CALayer的CALayer類(lèi)型的mask（）屬性，最終找到了解決方案，即：使用UIView對(duì)象封裝漸變背景視圖（frame為折線(xiàn)圖視圖的減去坐標(biāo)軸后的frame），創(chuàng)建一個(gè)CAGradientLayer漸變圖層添加到背景視圖上。
創(chuàng)建一個(gè)CAShapeLayer對(duì)象，用于繪制線(xiàn)條，線(xiàn)條的渲染顏色（strokeColor）為whiteColor，填充顏色（fillColor）為clearColor，從而顯示出漸變圖層的顏色。將CAShapeLayer對(duì)象設(shè)置為背景視圖的mask屬性，即背景視圖的蒙版。
折線(xiàn)
使用 UIBezierPath 類(lèi)來(lái)繪制折線(xiàn)
折線(xiàn)轉(zhuǎn)折處尖角的處理，使用 kCALineCapRound 與 kCALineJoinRound 設(shè)置折線(xiàn)轉(zhuǎn)折處為圓角
折線(xiàn)起點(diǎn)與終點(diǎn)的圓點(diǎn)的處理，可以直接在 UIBezierPath 對(duì)象上添加一個(gè)圓，設(shè)置遠(yuǎn)的半徑為路徑寬度的一半，從而保證是一個(gè)實(shí)心的圓而不是一個(gè)圓環(huán)
折線(xiàn)轉(zhuǎn)折處的點(diǎn)
折線(xiàn)轉(zhuǎn)折處點(diǎn)使用一個(gè)類(lèi)來(lái)描述（不使用CGPoint的原因是：折線(xiàn)轉(zhuǎn)折處的點(diǎn)需要放到一個(gè)數(shù)組中）
坐標(biāo)軸信息
X軸、Y軸的信息分別放到一個(gè)數(shù)組中
X軸顯示的是最近七天的日期，Y軸顯示的是最近七天數(shù)據(jù)變化的幅度
動(dòng)畫(huà)
使用CABasicAnimation類(lèi)來(lái)完成繪制折線(xiàn)圖時(shí)的動(dòng)畫(huà)
需要注意的是，折線(xiàn)路徑在一開(kāi)始時(shí)需要社會(huì)線(xiàn)寬為0，開(kāi)始繪制時(shí)才設(shè)置為適當(dāng)?shù)木€(xiàn)寬，保證一開(kāi)折線(xiàn)路徑是隱藏的
標(biāo)簽
在動(dòng)畫(huà)結(jié)束時(shí)，向折線(xiàn)圖視圖上添加一個(gè)標(biāo)簽（UIButton對(duì)象），顯示折線(xiàn)終點(diǎn)的信息
標(biāo)簽的位置，需要根據(jù)折線(xiàn)終點(diǎn)的位置計(jì)算
具體實(shí)現(xiàn)
折線(xiàn)轉(zhuǎn)折處的點(diǎn)
使用一個(gè)類(lèi)來(lái)描述折線(xiàn)轉(zhuǎn)折處的點(diǎn)，代碼如下：
// 接口/** 折線(xiàn)圖上的點(diǎn) */@interface IDLineChartPoint : NSObject/** x軸偏移量 */@property (nonatomic, assign) float x;/** y軸偏移量 */@property (nonatomic, assign) float y;/** 工廠(chǎng)方法 */+ (instancetype)pointWithX:(float)x andY:(float)y;@end// 實(shí)現(xiàn)@implementation IDLineChartPoint+ (instancetype)pointWithX:(float)x andY:(float)y {IDLineChartPoint *point = [[self alloc] init];point.x = x;point.y = y;return point;}@end自定義折線(xiàn)圖視圖
折線(xiàn)圖視圖是一個(gè)自定義的UIView子類(lèi)，代碼如下：
// 接口/** 折線(xiàn)圖視圖 */@interface IDLineChartView : UIView/** 折線(xiàn)轉(zhuǎn)折點(diǎn)數(shù)組 */@property (nonatomic, strong) NSMutableArray<IDLineChartPoint *> *pointArray;/** 開(kāi)始繪制折線(xiàn)圖 */- (void)startDrawlineChart;@end// 分類(lèi)@interface IDLineChartView ()@end// 實(shí)現(xiàn)@implementation IDLineChartView// 初始化- (instancetype)initWithFrame:(CGRect)frame {if (self = [super initWithFrame:frame]) {// 設(shè)置折線(xiàn)圖的背景色self.backgroundColor = [UIColor colorWithRed:243/255.0 green:243/255.0 blue:243/255.0 alpha:1.0];}return self;}@end效果如圖
繪制坐標(biāo)軸信息
與坐標(biāo)軸繪制相關(guān)的常量
/** 坐標(biāo)軸信息區(qū)域?qū)挾?*/static const CGFloat kPadding = 25.0;/** 坐標(biāo)系中橫線(xiàn)的寬度 */static const CGFloat kCoordinateLineWith = 1.0;
在分類(lèi)中添加與坐標(biāo)軸繪制相關(guān)的成員變量
/** X軸的單位長(zhǎng)度 */@property (nonatomic, assign) CGFloat xAxisSpacing;/** Y軸的單位長(zhǎng)度 */@property (nonatomic, assign) CGFloat yAxisSpacing;/** X軸的信息 */@property (nonatomic, strong) NSMutableArray<NSString *> *xAxisInformationArray;/** Y軸的信息 */@property (nonatomic, strong) NSMutableArray<NSString *> *yAxisInformationArray;
與坐標(biāo)軸繪制相關(guān)的成員變量的get方法
- (CGFloat)xAxisSpacing {if (_xAxisSpacing == 0) {_xAxisSpacing = (self.bounds.size.width - kPadding) / (float)self.xAxisInformationArray.count;}return _xAxisSpacing;}- (CGFloat)yAxisSpacing {if (_yAxisSpacing == 0) {_yAxisSpacing = (self.bounds.size.height - kPadding) / (float)self.yAxisInformationArray.count;}return _yAxisSpacing;}- (NSMutableArray<NSString *> *)xAxisInformationArray {if (_xAxisInformationArray == nil) {// 創(chuàng)建可變數(shù)組_xAxisInformationArray = [[NSMutableArray alloc] init];// 當(dāng)前日期和日歷NSDate *today = [NSDate date];NSCalendar *currentCalendar = [NSCalendar currentCalendar];// 設(shè)置日期格式NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];dateFormatter.dateFormat = @"MM-dd";// 獲取最近一周的日期NSDateComponents *components = [[NSDateComponents alloc] init];for (int i = -7; i<0; i++) {components.day = i;NSDate *dayOfLatestWeek = [currentCalendar dateByAddingComponents:components toDate:today options:0];NSString *dateString = [dateFormatter stringFromDate:dayOfLatestWeek];[_xAxisInformationArray addObject:dateString];}}return _xAxisInformationArray;}- (NSMutableArray<NSString *> *)yAxisInformationArray {if (_yAxisInformationArray == nil) {_yAxisInformationArray = [NSMutableArray arrayWithObjects:@"0", @"10", @"20", @"30", @"40", @"50", nil];}return _yAxisInformationArray;}繪制坐標(biāo)軸的相關(guān)信息
- (void)drawRect:(CGRect)rect {// 獲取上下文CGContextRef context = UIGraphicsGetCurrentContext();// x軸信息[self.xAxisInformationArray enumerateObjectsUsingBlock:^(NSString * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {// 計(jì)算文字尺寸UIFont *informationFont = [UIFont systemFontOfSize:10];NSMutableDictionary *attributes = [NSMutableDictionary dictionary];attributes[NSForegroundColorAttributeName] = [UIColor colorWithRed:158/255.0 green:158/255.0 blue:158/255.0 alpha:1.0];attributes[NSFontAttributeName] = informationFont;CGSize informationSize = [obj sizeWithAttributes:attributes];// 計(jì)算繪制起點(diǎn)float drawStartPointX = kPadding + idx * self.xAxisSpacing + (self.xAxisSpacing - informationSize.width) * 0.5;float drawStartPointY = self.bounds.size.height - kPadding + (kPadding - informationSize.height) / 2.0;CGPoint drawStartPoint = CGPointMake(drawStartPointX, drawStartPointY);// 繪制文字信息[obj drawAtPoint:drawStartPoint withAttributes:attributes];}];// y軸[self.yAxisInformationArray enumerateObjectsUsingBlock:^(NSString * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {// 計(jì)算文字尺寸UIFont *informationFont = [UIFont systemFontOfSize:10];NSMutableDictionary *attributes = [NSMutableDictionary dictionary];attributes[NSForegroundColorAttributeName] = [UIColor colorWithRed:158/255.0 green:158/255.0 blue:158/255.0 alpha:1.0];attributes[NSFontAttributeName] = informationFont;CGSize informationSize = [obj sizeWithAttributes:attributes];// 計(jì)算繪制起點(diǎn)float drawStartPointX = (kPadding - informationSize.width) / 2.0;float drawStartPointY = self.bounds.size.height - kPadding - idx * self.yAxisSpacing - informationSize.height * 0.5;CGPoint drawStartPoint = CGPointMake(drawStartPointX, drawStartPointY);// 繪制文字信息[obj drawAtPoint:drawStartPoint withAttributes:attributes];// 橫向標(biāo)線(xiàn)CGContextSetRGBStrokeColor(context, 231 / 255.0, 231 / 255.0, 231 / 255.0, 1.0);CGContextSetLineWidth(context, kCoordinateLineWith);CGContextMoveToPoint(context, kPadding, self.bounds.size.height - kPadding - idx * self.yAxisSpacing);CGContextAddLineToPoint(context, self.bounds.size.width, self.bounds.size.height - kPadding - idx * self.yAxisSpacing);CGContextStrokePath(context);}];}效果如圖
漸變背景視圖
在分類(lèi)中添加與背景視圖相關(guān)的常量
/** 漸變背景視圖 */@property (nonatomic, strong) UIView *gradientBackgroundView;/** 漸變圖層 */@property (nonatomic, strong) CAGradientLayer *gradientLayer;/** 顏色數(shù)組 */@property (nonatomic, strong) NSMutableArray *gradientLayerColors;
在初始化方法中添加調(diào)用設(shè)置背景視圖方法的代碼
設(shè)置漸變視圖方法的具體實(shí)現(xiàn)
- (void)drawGradientBackgroundView {// 漸變背景視圖（不包含坐標(biāo)軸）self.gradientBackgroundView = [[UIView alloc] initWithFrame:CGRectMake(kPadding, 0, self.bounds.size.width - kPadding, self.bounds.size.height - kPadding)];[self addSubview:self.gradientBackgroundView];/** 創(chuàng)建并設(shè)置漸變背景圖層 *///初始化CAGradientlayer對(duì)象，使它的大小為漸變背景視圖的大小self.gradientLayer = [CAGradientLayer layer];self.gradientLayer.frame = self.gradientBackgroundView.bounds;//設(shè)置漸變區(qū)域的起始和終止位置（范圍為0-1），即漸變路徑self.gradientLayer.startPoint = CGPointMake(0, 0.0);self.gradientLayer.endPoint = CGPointMake(1.0, 0.0);//設(shè)置顏色的漸變過(guò)程self.gradientLayerColors = [NSMutableArray arrayWithArray:@[(__bridge id)[UIColor colorWithRed:253 / 255.0 green:164 / 255.0 blue:8 / 255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:251 / 255.0 green:37 / 255.0 blue:45 / 255.0 alpha:1.0].CGColor]];self.gradientLayer.colors = self.gradientLayerColors;//將CAGradientlayer對(duì)象添加在我們要設(shè)置背景色的視圖的layer層[self.gradientBackgroundView.layer addSublayer:self.gradientLayer];}效果如圖
折線(xiàn)
在分類(lèi)中添加與折線(xiàn)繪制相關(guān)的成員變量
/** 折線(xiàn)圖層 */@property (nonatomic, strong) CAShapeLayer *lineChartLayer;/** 折線(xiàn)圖終點(diǎn)處的標(biāo)簽 */@property (nonatomic, strong) UIButton *tapButton;
在初始化方法中添加調(diào)用設(shè)置折線(xiàn)圖層方法的代碼
[self setupLineChartLayerAppearance];
設(shè)置折線(xiàn)圖層方法的具體實(shí)現(xiàn)
- (void)setupLineChartLayerAppearance {/** 折線(xiàn)路徑 */UIBezierPath *path = [UIBezierPath bezierPath];[self.pointArray enumerateObjectsUsingBlock:^(IDLineChartPoint * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {// 折線(xiàn)if (idx == 0) {[path moveToPoint:CGPointMake(self.xAxisSpacing * 0.5 + (obj.x - 1) * self.xAxisSpacing, self.bounds.size.height - kPadding - obj.y * self.yAxisSpacing)];} else {[path addLineToPoint:CGPointMake(self.xAxisSpacing * 0.5 + (obj.x - 1) * self.xAxisSpacing, self.bounds.size.height - kPadding - obj.y * self.yAxisSpacing)];}// 折線(xiàn)起點(diǎn)和終點(diǎn)位置的圓點(diǎn)if (idx == 0 || idx == self.pointArray.count - 1) {[path addArcWithCenter:CGPointMake(self.xAxisSpacing * 0.5 + (obj.x - 1) * self.xAxisSpacing, self.bounds.size.height - kPadding - obj.y * self.yAxisSpacing) radius:2.0 startAngle:0 endAngle:2 * M_PI clockwise:YES];}}];/** 將折線(xiàn)添加到折線(xiàn)圖層上，并設(shè)置相關(guān)的屬性 */self.lineChartLayer = [CAShapeLayer layer];self.lineChartLayer.path = path.CGPath;self.lineChartLayer.strokeColor = [UIColor whiteColor].CGColor;self.lineChartLayer.fillColor = [[UIColor clearColor] CGColor];// 默認(rèn)設(shè)置路徑寬度為0，使其在起始狀態(tài)下不顯示self.lineChartLayer.lineWidth = 0;self.lineChartLayer.lineCap = kCALineCapRound;self.lineChartLayer.lineJoin = kCALineJoinRound;// 設(shè)置折線(xiàn)圖層為漸變圖層的maskself.gradientBackgroundView.layer.mask = self.lineChartLayer;}效果如圖（初始狀態(tài)不顯示折線(xiàn)）
動(dòng)畫(huà)的開(kāi)始與結(jié)束
動(dòng)畫(huà)開(kāi)始
/** 動(dòng)畫(huà)開(kāi)始，繪制折線(xiàn)圖 */- (void)startDrawlineChart {// 設(shè)置路徑寬度為4，使其能夠顯示出來(lái)self.lineChartLayer.lineWidth = 4;// 移除標(biāo)簽，if ([self.subviews containsObject:self.tapButton]) {[self.tapButton removeFromSuperview];}// 設(shè)置動(dòng)畫(huà)的相關(guān)屬性CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];pathAnimation.duration = 2.5;pathAnimation.repeatCount = 1;pathAnimation.removedOnCompletion = NO;pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];// 設(shè)置動(dòng)畫(huà)代理，動(dòng)畫(huà)結(jié)束時(shí)添加一個(gè)標(biāo)簽，顯示折線(xiàn)終點(diǎn)的信息pathAnimation.delegate = self;[self.lineChartLayer addAnimation:pathAnimation forKey:@"strokeEnd"];}動(dòng)畫(huà)結(jié)束，添加標(biāo)簽
/** 動(dòng)畫(huà)結(jié)束時(shí)，添加一個(gè)標(biāo)簽 */- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {if (self.tapButton == nil) { // 首次添加標(biāo)簽（避免多次創(chuàng)建和計(jì)算）CGRect tapButtonFrame = CGRectMake(self.xAxisSpacing * 0.5 + ([self.pointArray[self.pointArray.count - 1] x] - 1) * self.xAxisSpacing + 8, self.bounds.size.height - kPadding - [self.pointArray[self.pointArray.count - 1] y] * self.yAxisSpacing - 34, 30, 30);self.tapButton = [[UIButton alloc] initWithFrame:tapButtonFrame];self.tapButton.enabled = NO;[self.tapButton setBackgroundImage:[UIImage imageNamed:@"bubble"] forState:UIControlStateDisabled];[self.tapButton.titleLabel setFont:[UIFont systemFontOfSize:10]];[self.tapButton setTitle:@"20" forState:UIControlStateDisabled];}[self addSubview:self.tapButton];}集成折線(xiàn)圖視圖
創(chuàng)建折線(xiàn)圖視圖
添加成員變量
/** 折線(xiàn)圖 */@property (nonatomic, strong) IDLineChartView *lineCharView;
在viewDidLoad方法中創(chuàng)建折線(xiàn)圖并添加到控制器的view上
self.lineCharView = [[IDLineChartView alloc] initWithFrame:CGRectMake(35, 164, 340, 170)];[self.view addSubview:self.lineCharView];
添加開(kāi)始繪制折線(xiàn)圖視圖的按鈕
添加成員變量
/** 開(kāi)始繪制折線(xiàn)圖按鈕 */@property (nonatomic, strong) UIButton *drawLineChartButton;
在viewDidLoad方法中創(chuàng)建開(kāi)始按鈕并添加到控制器的view上
self.drawLineChartButton = [UIButton buttonWithType:UIButtonTypeSystem];self.drawLineChartButton.frame = CGRectMake(180, 375, 50, 44);[self.drawLineChartButton setTitle:@"開(kāi)始" forState:UIControlStateNormal];[self.drawLineChartButton addTarget:self action:@selector(drawLineChart) forControlEvents:UIControlEventTouchUpInside];[self.view addSubview:self.drawLineChartButton];開(kāi)始按鈕的點(diǎn)擊事件// 開(kāi)始繪制折線(xiàn)圖- (void)drawLineChart {[self.lineCharView startDrawlineChart];}好了，關(guān)于IOS繪制動(dòng)畫(huà)顏色漸變折線(xiàn)條就給大家介紹這么多，希望對(duì)大家有所幫助！
新聞熱點(diǎn)
疑難解答
圖片精選
