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

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坐标的值呢，图形的走势是反的，原因是View的原点在左上，我们常识中的折线图是左下。但这些都不是我要写篇文章的要点，我只是想用用CAShapeLayer和CAGradientLayer。

以下是示例代码：

import UIKit

class KKLineChart: UIView {
    
    
    var granLayer = CAGradientLayer()
    var maskLayer = CAShapeLayer()
    var lineLayer = CAShapeLayer()
    
    var timer: Timer?
    
    var currentIndex: Int = 1

    private lazy var dataArray:[CGPoint] = {
    
        var floatArray:[CGPoint] = []
        for i in 1...20{
            let x: CGFloat = CGFloat(i * 15)
            let y: CGFloat = CGFloat(arc4random() % 100) + 20
            let point = CGPoint(x: x, y: y)
            floatArray.append(point)
        }
        
        return floatArray
        
    }()
    
    
    override func didMoveToSuperview() {
        super.didMoveToSuperview()
        
        granLayer.colors = [#colorLiteral(red: 1, green: 0.4664840698, blue: 0.2368942201, alpha: 1).cgColor,#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1).cgColor]
        granLayer.startPoint = CGPoint(x: 0.5, y: 0)
        granLayer.endPoint = CGPoint(x: 0.5, y: 1)
        
        maskLayer.fillColor = UIColor.black.cgColor
    
        lineLayer.strokeColor = #colorLiteral(red: 1, green: 0.4664840698, blue: 0.2368942201, alpha: 1).cgColor
        lineLayer.fillColor = UIColor.clear.cgColor
        
        layer.addSublayer(granLayer)
        granLayer.mask = maskLayer
        layer.addSublayer(lineLayer)
        
        drawLine()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()

        granLayer.frame = bounds
        maskLayer.frame = granLayer.bounds
        lineLayer.frame = bounds
        
        
    }
    
    private func drawLine(){
    
        currentIndex = 1
        timer = Timer.scheduledTimer(withTimeInterval: 0.03, repeats: true, block: { (timer) in
            let path = UIBezierPath()
            let fistPoint = self.dataArray[0]
            let lastPoint = self.dataArray[self.currentIndex]
            
            path.move(to: fistPoint)
            for (index,point) in self.dataArray.enumerated(){
                if self.currentIndex < index {break}
                if index != 0 {
                    path.addLine(to: point)
                }
            }
            self.lineLayer.path = path.cgPath
            
            let fistX = CGPoint(x: fistPoint.x, y: self.bounds.height)
            let lastX = CGPoint(x: lastPoint.x, y: self.bounds.height)
            path.addLine(to: lastX)
            path.addLine(to: fistX)
            path.addLine(to: fistPoint)
            self.maskLayer.path = path.cgPath
            
            self.currentIndex += 1
            if self.currentIndex == self.dataArray.count{timer.invalidate()}
        })
        
       
    }
    
    
}