高德地圖跑步軌跡展示的代碼在高德官方的3D地圖示例中RunningLineViewController類中已經(jīng)有很好的示例代碼，就不再贅述了 下載AMap_iOS_Demo裆针。今天主要講一下實現(xiàn)軌跡回放留美。當然這個方法對于所有地圖的軌跡回放都是可用的窗价。
實現(xiàn)回放功能的準備工作：
1. 新建一個處理回放的class
新建一個class，我這里命名未Replaying
2. 坐標數(shù)組太雨、坐標對應(yīng)的顏色數(shù)組
額，坐標數(shù)組自己整理吧魁蒜。顏色我這里的處理方式采用的是高德demo里面的算法囊扳，只是修改了一下偏冷色和偏暖色的值。
var coordinateArray: [CLLocationCoordinate2D] = []
var colorArray: [UIColor] = []
coordinateArray 轉(zhuǎn)換坐標
fileprivate func pointsForCoordinates() ->[CGPoint] {
var points: [CGPoint] = []
for coordinate in self.coordinateArray {
guard let map_view = self.mapView else { return [] }
let point = map_view.convert(coordinate, toPointTo: map_view)
points.append(point)
}
return points
}
3. 漸變線
自定義CALayer兜看，重寫draw(in ctx: CGContext)方法锥咸。這里要用到Quartz2D的知識點，我在簡書里找到了關(guān)于Quartz2D講解可以學習一下细移。這里用到了路徑搏予、顏色與顏色空間、漸變相關(guān)技術(shù)弧轧。
(Swift中蘋果對CGMutablePath進行了重構(gòu)雪侥，CGMutablePath被定義為了類, 內(nèi)存這一塊就不用我們手動管理了，??????)
這個類關(guān)鍵代碼：
func add(points: [CGPoint], colors: [UIColor]) {
self._points = points
self._colors = colors
}
override func draw(in ctx: CGContext) {
var pcolor: UIColor?
var ccolor: UIColor?
for i in 0..<self._points.count {
let point: CGPoint = self._points[i]
let path: CGMutablePath = CGMutablePath()
ccolor = self._colors[i]
if i == 0 {
path.move(to: CGPoint(x: point.x, y: point.y), transform: .identity)
} else {
let prevPoint: CGPoint = self._points[i - 1]
path.addLine(to: CGPoint(x: point.x, y: point.y), transform: .identity)
var pc_r: CGFloat = 0
var pc_g: CGFloat = 0
var pc_b: CGFloat = 0
var pc_a: CGFloat = 0
var cc_r: CGFloat = 0
var cc_g: CGFloat = 0
var cc_b: CGFloat = 0
var cc_a: CGFloat = 0
pcolor?.getRed(&pc_r, green: &pc_g, blue: &pc_b, alpha: &pc_a)
ccolor?.getRed(&cc_r, green: &cc_g, blue: &cc_b, alpha: &cc_a)
let gradientColors: [CGFloat] = [pc_r, pc_g, pc_b, pc_a, cc_r, cc_g, cc_b, cc_a]
let gradientLocation: [CGFloat] = [0, 1]
ctx.saveGState()
let lineWidth: CGFloat = ctx.convertToUserSpace(CGSize(width: 5, height: 5)).width
let pathToFill: CGPath = path.copy(strokingWithWidth: lineWidth, lineCap: .round, lineJoin: .round, miterLimit: 10, transform: .identity)
ctx.addPath(pathToFill)
ctx.clip()
let colorSpace: CGColorSpace = CGColorSpaceCreateDeviceRGB()
if let gradient = CGGradient(colorSpace: colorSpace, colorComponents: gradientColors, locations: gradientLocation, count: 2) {
let gradientStart: CGPoint = prevPoint
let gradientEnd: CGPoint = point
ctx.drawLinearGradient(gradient, start: gradientStart, end: gradientEnd, options: .drawsAfterEndLocation)
}
ctx.restoreGState()
}
pcolor = ccolor
}
}
在gradientLayer調(diào)用func add(points: [CGPoint], colors: [UIColor]) 函數(shù)后調(diào)用自身的setNeedsDisplay()方法重繪精绎。我們還需要在Replaying中給layer添加一個蒙板mask(這個屬性本身就是個CALayer類型速缨，有和其他圖層一樣的繪制和布局屬性。mask圖層定義了父圖層的部分可見區(qū)域)
fileprivate func initShapeLayer() {
self.shapeLayer.lineWidth = 5
self.shapeLayer.strokeColor = UIColor.clear.cgColor
self.shapeLayer.fillColor = UIColor.clear.cgColor
self.shapeLayer.lineJoin = kCALineCapRound
}
fileprivate func pathForPoints(points: [CGPoint]) -> CGMutablePath {
let path = CGMutablePath()
path.addLines(between: points)
return path
}
self.shapeLayer.path = path
self.gradientLayer.mask = self.shapeLayer
ok捺典，漸變線出來了
4. 動畫
動畫
let shapeLayerAnimation = self.constructShapeLayerAnimation()
self.shapeLayer.add(shapeLayerAnimation, forKey: "shape")
fileprivate func constructShapeLayerAnimation() -> CAAnimation {
let annimation = CABasicAnimation(keyPath: "strokeEnd")
annimation.duration = self.duration
annimation.fromValue = 0.0
annimation.toValue = 1.0
return annimation
}
