IOS绘制动画颜色渐变折线条
先给大家展示下效果图:
概述
现状
折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图。折线图可以更加直观的表示数据的变化。网络上有很多绘制折线图的demo,有的也使用了动画,但是线条颜色渐变的折线图的demo少之又少,甚至可以说没有。该blog阐述了动画绘制线条颜色渐变的折线图的实现方案,以及折线图线条颜色渐变的实现原理,并附以完整的示例。
成果
本人已将折线图封装到了一个uiview子类中,并提供了相应的接口。该自定义折线图视图,基本上可以适用于大部分需要集成折线图的项目。若你遇到相应的需求可以直接将文件拖到项目中,调用相应的接口即可
项目文件中包含了大量的注释代码,若你的需求与折线图的实现效果有差别,那么你可以对项目文件的进行修改,也可以依照思路定义自己的折线图视图
blog中涉及到的知识点
calayer
图层,可以简单的看做一个不接受用户交互的uiview
每个图层都具有一个calayer类型mask属性,作用与蒙版相似
blog中主要用到的calayer子类有
cagradientlayer,绘制颜色渐变的背景图层
cashapelayer,绘制折线图
caanimation
核心动画的基类(不可实例化对象),实现动画操作
quartz 2d
一个二维的绘图引擎,用来绘制折线(path)和坐标轴信息(text)
实现思路
折线图视图
整个折线图将会被自定义到一个uiview子类中
坐标轴绘制
坐标轴直接绘制到折线图视图上,在自定义折线图视图的 drawrect 方法中绘制坐标轴相关信息(线条和文字)
注意坐标系的转换
线条颜色渐变
失败的方案
开始的时候,为了实现线条颜色渐变,我的思考方向是,如何改变路径(uibezierpath)的渲染颜色(strokecolor)。但是strokecolor只可以设置一种,所以最终无法实现线条颜色的渐变。
成功的方案
在探索过程中找到了calayer的calayer类型的mask()属性,最终找到了解决方案,即:使用uiview对象封装渐变背景视图(frame为折线图视图的减去坐标轴后的frame),创建一个cagradientlayer渐变图层添加到背景视图上。
创建一个cashapelayer对象,用于绘制线条,线条的渲染颜色(strokecolor)为whitecolor,填充颜色(fillcolor)为clearcolor,从而显示出渐变图层的颜色。将cashapelayer对象设置为背景视图的mask属性,即背景视图的蒙版。
折线
使用 uibezierpath 类来绘制折线
折线转折处尖角的处理,使用 kcalinecapround 与 kcalinejoinround 设置折线转折处为圆角
折线起点与终点的圆点的处理,可以直接在 uibezierpath 对象上添加一个圆,设置远的半径为路径宽度的一半,从而保证是一个实心的圆而不是一个圆环
折线转折处的点
折线转折处点使用一个类来描述(不使用cgpoint的原因是:折线转折处的点需要放到一个数组中)
坐标轴信息
x轴、y轴的信息分别放到一个数组中
x轴显示的是最近七天的日期,y轴显示的是最近七天数据变化的幅度
动画
使用cabasicanimation类来完成绘制折线图时的动画
需要注意的是,折线路径在一开始时需要社会线宽为0,开始绘制时才设置为适当的线宽,保证一开折线路径是隐藏的
标签
在动画结束时,向折线图视图上添加一个标签(uibutton对象),显示折线终点的信息
标签的位置,需要根据折线终点的位置计算
具体实现
折线转折处的点
使用一个类来描述折线转折处的点,代码如下:
// 接口 /** 折线图上的点 */ @interface idlinechartpoint : nsobject /** x轴偏移量 */ @property (nonatomic, assign) float x; /** y轴偏移量 */ @property (nonatomic, assign) float y; /** 工厂方法 */ + (instancetype)pointwithx:(float)x andy:(float)y; @end // 实现 @implementation idlinechartpoint + (instancetype)pointwithx:(float)x andy:(float)y { idlinechartpoint *point = [[self alloc] init]; point.x = x; point.y = y; return point; } @end
自定义折线图视图
折线图视图是一个自定义的uiview子类,代码如下:
// 接口 /** 折线图视图 */ @interface idlinechartview : uiview /** 折线转折点数组 */ @property (nonatomic, strong) nsmutablearray<idlinechartpoint *> *pointarray; /** 开始绘制折线图 */ - (void)startdrawlinechart; @end // 分类 @interface idlinechartview () @end // 实现 @implementation idlinechartview // 初始化 - (instancetype)initwithframe:(cgrect)frame { if (self = [super initwithframe:frame]) { // 设置折线图的背景色 self.backgroundcolor = [uicolor colorwithred:243/255.0 green:243/255.0 blue:243/255.0 alpha:1.0]; } return self; } @end
效果如图
绘制坐标轴信息
与坐标轴绘制相关的常量
/** 坐标轴信息区域宽度 */ static const cgfloat kpadding = 25.0; /** 坐标系中横线的宽度 */ static const cgfloat kcoordinatelinewith = 1.0;
在分类中添加与坐标轴绘制相关的成员变量
/** x轴的单位长度 */ @property (nonatomic, assign) cgfloat xaxisspacing; /** y轴的单位长度 */ @property (nonatomic, assign) cgfloat yaxisspacing; /** x轴的信息 */ @property (nonatomic, strong) nsmutablearray<nsstring *> *xaxisinformationarray; /** y轴的信息 */ @property (nonatomic, strong) nsmutablearray<nsstring *> *yaxisinformationarray;
与坐标轴绘制相关的成员变量的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) { // 创建可变数组 _xaxisinformationarray = [[nsmutablearray alloc] init]; // 当前日期和日历 nsdate *today = [nsdate date]; nscalendar *currentcalendar = [nscalendar currentcalendar]; // 设置日期格式 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; }
绘制坐标轴的相关信息
- (void)drawrect:(cgrect)rect { // 获取上下文 cgcontextref context = uigraphicsgetcurrentcontext(); // x轴信息 [self.xaxisinformationarray enumerateobjectsusingblock:^(nsstring * _nonnull obj, nsuinteger idx, bool * _nonnull stop) { // 计算文字尺寸 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]; // 计算绘制起点 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) { // 计算文字尺寸 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]; // 计算绘制起点 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]; // 横向标线 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); }]; }
效果如图
渐变背景视图
在分类中添加与背景视图相关的常量
/** 渐变背景视图 */ @property (nonatomic, strong) uiview *gradientbackgroundview; /** 渐变图层 */ @property (nonatomic, strong) cagradientlayer *gradientlayer; /** 颜色数组 */ @property (nonatomic, strong) nsmutablearray *gradientlayercolors;
在初始化方法中添加调用设置背景视图方法的代码
设置渐变视图方法的具体实现
- (void)drawgradientbackgroundview { // 渐变背景视图(不包含坐标轴) self.gradientbackgroundview = [[uiview alloc] initwithframe:cgrectmake(kpadding, 0, self.bounds.size.width - kpadding, self.bounds.size.height - kpadding)]; [self addsubview:self.gradientbackgroundview]; /** 创建并设置渐变背景图层 */ //初始化cagradientlayer对象,使它的大小为渐变背景视图的大小 self.gradientlayer = [cagradientlayer layer]; self.gradientlayer.frame = self.gradientbackgroundview.bounds; //设置渐变区域的起始和终止位置(范围为0-1),即渐变路径 self.gradientlayer.startpoint = cgpointmake(0, 0.0); self.gradientlayer.endpoint = cgpointmake(1.0, 0.0); //设置颜色的渐变过程 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对象添加在我们要设置背景色的视图的layer层 [self.gradientbackgroundview.layer addsublayer:self.gradientlayer]; }
效果如图
折线
在分类中添加与折线绘制相关的成员变量
/** 折线图层 */ @property (nonatomic, strong) cashapelayer *linechartlayer; /** 折线图终点处的标签 */ @property (nonatomic, strong) uibutton *tapbutton;
在初始化方法中添加调用设置折线图层方法的代码
[self setuplinechartlayerappearance];
设置折线图层方法的具体实现
- (void)setuplinechartlayerappearance { /** 折线路径 */ uibezierpath *path = [uibezierpath bezierpath]; [self.pointarray enumerateobjectsusingblock:^(idlinechartpoint * _nonnull obj, nsuinteger idx, bool * _nonnull stop) { // 折线 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)]; } // 折线起点和终点位置的圆点 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]; } }]; /** 将折线添加到折线图层上,并设置相关的属性 */ self.linechartlayer = [cashapelayer layer]; self.linechartlayer.path = path.cgpath; self.linechartlayer.strokecolor = [uicolor whitecolor].cgcolor; self.linechartlayer.fillcolor = [[uicolor clearcolor] cgcolor]; // 默认设置路径宽度为0,使其在起始状态下不显示 self.linechartlayer.linewidth = 0; self.linechartlayer.linecap = kcalinecapround; self.linechartlayer.linejoin = kcalinejoinround; // 设置折线图层为渐变图层的mask self.gradientbackgroundview.layer.mask = self.linechartlayer; }
效果如图(初始状态不显示折线)
动画的开始与结束
动画开始
/** 动画开始,绘制折线图 */ - (void)startdrawlinechart { // 设置路径宽度为4,使其能够显示出来 self.linechartlayer.linewidth = 4; // 移除标签, if ([self.subviews containsobject:self.tapbutton]) { [self.tapbutton removefromsuperview]; } // 设置动画的相关属性 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]; // 设置动画代理,动画结束时添加一个标签,显示折线终点的信息 pathanimation.delegate = self; [self.linechartlayer addanimation:pathanimation forkey:@"strokeend"]; }
动画结束,添加标签
/** 动画结束时,添加一个标签 */ - (void)animationdidstop:(caanimation *)anim finished:(bool)flag { if (self.tapbutton == nil) { // 首次添加标签(避免多次创建和计算) 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]; }
集成折线图视图
创建折线图视图
添加成员变量
/** 折线图 */ @property (nonatomic, strong) idlinechartview *linecharview;
在viewdidload方法中创建折线图并添加到控制器的view上
self.linecharview = [[idlinechartview alloc] initwithframe:cgrectmake(35, 164, 340, 170)]; [self.view addsubview:self.linecharview];
添加开始绘制折线图视图的按钮
添加成员变量
/** 开始绘制折线图按钮 */ @property (nonatomic, strong) uibutton *drawlinechartbutton;
在viewdidload方法中创建开始按钮并添加到控制器的view上
self.drawlinechartbutton = [uibutton buttonwithtype:uibuttontypesystem]; self.drawlinechartbutton.frame = cgrectmake(180, 375, 50, 44); [self.drawlinechartbutton settitle:@"开始" forstate:uicontrolstatenormal]; [self.drawlinechartbutton addtarget:self action:@selector(drawlinechart) forcontrolevents:uicontroleventtouchupinside]; [self.view addsubview:self.drawlinechartbutton]; 开始按钮的点击事件 // 开始绘制折线图 - (void)drawlinechart { [self.linecharview startdrawlinechart]; }
好了,关于ios绘制动画颜色渐变折线条就给大家介绍这么多,希望对大家有所帮助!