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()}
})
}
}
