layui做折线图_简单实现带渐变色的折线图

tip：仅仅是CAShapeLayer,CAGradientLayer的简单使用案例

先上效果图：

就是这个小东西.gif

原理：

实现中用到的两个Layer，一个CAGradientLayer用来生成渐变色，两个CAShapeLayer，一个用来划线，另一个用来做CAGradientLayer的mask用于显示出所划线下面的渐变区域。动画，直接通过timer，循环递增点来实现。

具体实现：

设置layer：

添加layer.png

这个没啥可说的，给View的layer添加一个GradientLayer和一个LineLayer，给GradientLayer添加一个mask

画线：

画线.png

(1)currentIndex是当前已经画到的点,当画到currentIndex时，刚好得到第一个点到currentIndex点的线路径，这时给lineLayer赋值Path，

(2)继续从currentIndex点依次连接currentIndex和第一个点对应的X轴点，然后回到第一个点。此时Path是一个封闭的图形，这时给MaskLayer赋值。

整个路径就算画完了，继续进行下一个点。循环就生成动画。

然后就写完了，太简单了。可能是还有好多事没做。比如，一个图怎么能没有X、Y坐标的值