利用CoreGraphics模仿微信运动折线图

首先上一张效果图

在原版的基础上，斗胆加了点动画

这里是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必须为一个闭合的路径，折线图其它的地方都可以非常简单的实现。