iOS动画绘制折线图以及渐变色

2017-01-14 15:49:07来源:http://www.jianshu.com/p/799ed52503d7作者:AHLQ人点击

第七城市


有问题联系QQ: 652985191

有问题联系QQ: 652985191

有问题联系QQ: 652985191

说明:

已将折线图封装到了一个UIView子类中,并提供了相应的接口。若你遇到相应的需求可以直接将文件拖到项目中,调用相应的接口即可,感谢@

世俗孤岛

X轴为前7天的时间,动态获取日期,点击坐标点弹出标签

有问题联系QQ: 652985191

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对象),显示折线点的信息

具体实现

折线转折处的点

使用一个类来描述折线转折处的点,代码如下:

#import

@interfaceHLQLineChartPoint :NSObject

@property(nonatomic,assign)CGFloatx;

@property(nonatomic,assign)CGFloaty;

+ (instancetype)pointWithX:(CGFloat)X andY:(CGFloat)Y;

@end

#import"HLQLineChart.h"

@implementationHLQLineChartPoint

+ (instancetype)pointWithX:(CGFloat)X andY:(CGFloat)Y

{

HLQLineChartPoint*point = [[selfalloc]init];

point.x= X;

point.y= Y;

returnpoint;

}

@end

自定义折线图视图

折线图视图是一个自定义的UIView子类,代码如下:

@interfaceHLQLineChart :UIView

//是否点击弹出每个点的数值

@property(nonatomic,assign,getter=isPopupView)BOOLpopupView;

//是否倒序绘制图形,默认为正序

@property(nonatomic,assign,getter=isInvertedOrder)BOOLinvertedOrder;

//绘制图形的时间,默认是1秒

@property(nonatomic,assign)CGFloatdrawTime;

//初始化折线视图

- (instancetype)initWithFrame:(CGRect)frame andCoordinateFigureArray:(NSMutableArray*)coordinateFigureArray

andYAxleArray:(NSMutableArray*)YAxleArray andBackgroudColor:(UIColor*)backgroudColor andFirstChangeColor:(UIColor*)FirstChangeColorandSecondChangeColor:(UIColor*)SecondChangeColor andKFontColor:(UIColor*)fontColor andcolorGradient:(BOOL)isColorGradient;

//开始绘制折线

- (void)startDrawLineChart;

@end

//初始化

- (instancetype)initWithFrame:(CGRect)frame andCoordinateFigureArray:(NSMutableArray*)coordinateFigureArray andYAxleArray:(NSMutableArray*)YAxleArray andBackgroudColor:(UIColor*)backgroudColor andFirstChangeColor:(UIColor*)FirstChangeColorandSecondChangeColor:(UIColor*)SecondChangeColor andKFontColor:(UIColor*)fontColor andcolorGradient:(BOOL)isColorGradient

{

if(coordinateFigureArray) {

self.pointArray= coordinateFigureArray;

}

if(YAxleArray) {

self.yAxisInformationArray= YAxleArray;

}

if(self= [superinitWithFrame:frame]) {

//设置折线图的背景颜色

if(backgroudColor) {

self.backgroundColor= backgroudColor;

}else{

self.backgroundColor=KLineBackgroudColor;

}

if(fontColor) {

self.fontColor= fontColor;

}else{

self.fontColor=KFontColor;

}

if(isColorGradient) {

self.colorGradient= isColorGradient;

}

/**设置渐变背景视图*/

[selfdrawGradientBackgroundViewWithFirstChangeColor:FirstChangeColorandSecondChangeColor:SecondChangeColor];

/**设置折线图层*/

[selfsetupLineChartLayerAppearance];

}

returnself;

}

绘制坐标轴信息

- (void)drawRect:(CGRect)rect {

CGContextRefref =UIGraphicsGetCurrentContext();

//x轴信息

[self.xAxisInformationArrayenumerateObjectsUsingBlock:^(NSString*_Nonnullobj,NSUIntegeridx,BOOL*_Nonnullstop) {

NSMutableDictionary*dictM = [NSMutableDictionarydictionary];

UIFont*font = [UIFontsystemFontOfSize:8];

dictM[NSFontAttributeName] =font;

dictM[NSForegroundColorAttributeName] =self.fontColor;

CGSizeinformationSize = [objsizeWithAttributes:dictM];

//计算绘制起点

CGFloatdrawStartPointX =KPadding+idx*self.xAxisSpacing+(self.xAxisSpacing-informationSize.width)*0.5;

CGFloatdrawStartPointY =self.bounds.size.height-KPadding+(KPadding-informationSize.height)*0.5;

[objdrawAtPoint:CGPointMake(drawStartPointX, drawStartPointY)withAttributes:dictM];

}];

//y轴

[self.yAxisInformationArrayenumerateObjectsUsingBlock:^(NSString*_Nonnullobj,NSUIntegeridx,BOOL*_Nonnullstop) {

NSMutableDictionary*dictM = [NSMutableDictionarydictionary];

UIFont*font = [UIFontsystemFontOfSize:8];

dictM[NSFontAttributeName] =font;

dictM[NSForegroundColorAttributeName] =KFontColor;

CGSizeinformationSize = [objsizeWithAttributes:dictM];

//计算绘制起点

CGFloatdrawStartPointX = (KPadding-informationSize.width)*0.5;

CGFloatdrawStartPointY =self.bounds.size.height-KPadding-idx*self.yAxisSpacing-informationSize.height*0.5;

[objdrawAtPoint:CGPointMake(drawStartPointX, drawStartPointY)withAttributes:dictM];

//横向的标线

CGContextSetRGBStrokeColor(ref,KRedFloat,KGreenFloat,KBlueFloat,KAlaphFloat);

CGContextSetLineWidth(ref,kCoordinateLineWith);

CGContextMoveToPoint(ref,KPadding,self.bounds.size.height-KPadding-(idx*self.yAxisSpacing));

CGContextAddLineToPoint(ref,self.bounds.size.width,self.bounds.size.height-KPadding-(idx*self.yAxisSpacing));

CGContextStrokePath(ref);

}];

}

动画的开始与结束

- (void)startDrawLineChart

{

//self.lineChartLayer.lineWidth = 1.0;

if(self.isDrawing) {

return;

}

if(self.tapButton) {

[self.tapButtonremoveFromSuperview];

}

self.lineChartLayer.fillColor= [UIColorclearColor].CGColor;

CABasicAnimation*pathAnimation;

//设置动画的相关属性

if(self.isInvertedOrder) {

pathAnimation = [CABasicAnimationanimationWithKeyPath:@"strokeStart"];

}else{

pathAnimation = [CABasicAnimationanimationWithKeyPath:@"strokeEnd"];

}

if(self.drawTime) {

pathAnimation.duration=self.drawTime;

}else{

pathAnimation.duration=1.0;

}

pathAnimation.repeatCount=1;

pathAnimation.removedOnCompletion=NO;

pathAnimation.timingFunction= [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseIn];

if(self.isInvertedOrder) {

pathAnimation.fromValue= [NSNumbernumberWithInt:1.0];

pathAnimation.toValue= [NSNumbernumberWithInt:0.0];

}else{

pathAnimation.fromValue= [NSNumbernumberWithInt:0.0];

pathAnimation.toValue= [NSNumbernumberWithInt:1.0];

}

pathAnimation.delegate=self;

[self.lineChartLayeraddAnimation:pathAnimationforKey:@"strokeEnd"];

}

//动画开始

- (void)animationDidStart:(CAAnimation*)anim

{

self.Drawing=YES;

}

//动画结束之后

- (void)animationDidStop:(CAAnimation*)anim finished:(BOOL)flag

{

if(self.iscolorGradient) {

self.lineChartLayer.fillColor= [UIColorwhiteColor].CGColor;

}

self.Drawing=NO;

}

集成折线图视图

//绘制渐变背景颜色

- (void)drawGradientBackgroundViewWithFirstChangeColor:(UIColor*)FirstChangeColorandSecondChangeColor:(UIColor*)SecondChangeColor

{

self.gradientBackgroundView= [[UIViewalloc]initWithFrame:CGRectMake(KPadding,0,self.bounds.size.width-KPadding,self.bounds.size.height-KPadding)];

[selfaddSubview:self.gradientBackgroundView];

self.gradientLayer= [CAGradientLayerlayer];

self.gradientLayer.frame=self.gradientBackgroundView.bounds;

self.gradientLayer.startPoint=CGPointMake(0,0.0);

self.gradientLayer.endPoint=CGPointMake(1.0,0);

//设置颜色的渐变过程

if(FirstChangeColor&&SecondChangeColor) {

self.gradientLayerColors= [NSMutableArrayarrayWithArray:@[(__bridgeid)FirstChangeColor.CGColor,

(__bridgeid)SecondChangeColor.CGColor]];

}else{

self.gradientLayerColors= [NSMutableArrayarrayWithArray:@[(__bridgeid)KFirstChangeColor.CGColor,

(__bridgeid)KSecondChangeColor.CGColor]];

}

self.gradientLayer.colors=self.gradientLayerColors;

[self.gradientBackgroundView.layeraddSublayer:self.gradientLayer];

}

- (void)setupLineChartLayerAppearance

{

UIBezierPath*path = [UIBezierPathbezierPath];

[self.pointArrayenumerateObjectsUsingBlock:^(HLQLineChartPoint*_Nonnullobj,NSUIntegeridx,BOOL*_Nonnullstop) {

//所有的点的位置以及圆心点

CGPointallPoint =CGPointMake(self.xAxisSpacing*0.5+(obj.x-1)*self.xAxisSpacing,self.bounds.size.height-KPadding-obj.y*self.yAxisSpacing);

//从x轴起点或终点的坐标

CGPointxFromWithEndPoint =CGPointMake(self.xAxisSpacing*0.5+(obj.x-1)*self.xAxisSpacing,self.bounds.size.height-KPadding);

//折线

if(idx ==0) {

[pathmoveToPoint:xFromWithEndPoint];

[pathaddLineToPoint:allPoint];

[pathaddArcWithCenter:allPointradius:4.0startAngle:0endAngle:M_PI*2clockwise:YES];

}elseif(idx ==self.pointArray.count-1){

[pathaddArcWithCenter:allPointradius:4.0startAngle:0endAngle:M_PI*2clockwise:YES];

[pathaddLineToPoint:allPoint];

[pathaddLineToPoint:xFromWithEndPoint];

}else{

[pathaddArcWithCenter:allPointradius:4.0startAngle:0endAngle:M_PI*2clockwise:YES];

[pathaddLineToPoint:allPoint];

}

}];

self.lineChartLayer= [CAShapeLayerlayer];

self.lineChartLayer.path= path.CGPath;

self.lineChartLayer.strokeColor= [UIColorblueColor].CGColor;

if(!self.iscolorGradient) {

self.lineChartLayer.fillColor= [UIColorclearColor].CGColor;

}

self.lineChartLayer.lineWidth=2.0;

self.lineChartLayer.lineCap=kCALineCapRound;

self.lineChartLayer.lineJoin=kCALineJoinRound;

//设置折线图层为渐变背景的mask

self.gradientBackgroundView.layer.mask=self.lineChartLayer;

}







第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台