首先上一张效果图
在原版的基础上，斗胆加了点动画
这里是Demo的地址（地址），如果能够帮到你的话，请大爷上赏一个Star再走吧。
折线图结构
底部渐变层 CAGradientLayer
上中下的三条线条为CAShapeLayer
折线图有四层CALayer
最底层CAShaper，用于控制Frame来实现动画效果
折线内容部分的渐变层，CAGradientLayer。
折线，CAShapeLayer
转折点,CAShapeLayer
如何实现不规整的渐变
我这里使用的是layer的mask实现的裁剪
CAShapeLayer *clipLayer = [CAShapeLayer layer];
clipLayer.path = clipPath;
CGPathRelease(clipPath);
self.white2ClearLayer.mask = clipLayer;
注意
因为clipLayer是white2ClearLayer的mask，所以clipLayer的path中的点一定是以white2ClearLayer为基准的，然后path必须为一个闭合的路径，折线图其它的地方都可以非常简单的实现。
网友评论