跑步轨迹回放

发表于

高德地图跑步轨迹展示的代码在高德官方的3D地图示例中RunningLineViewController类中已经有很好的示例代码，就不再赘述了 下载AMap_iOS_Demo。
这篇主要记录下实现轨迹回放的功能，当然这个方法对于所有地图的轨迹回放都是可用的。

实现回放准备条件：

坐标转换，计算path

-
var coordinateArray: [CLLocationCoordinate2D] = [] // 跑步记录的坐标集合
coordinateArray 转换成视图上的坐标用于创建layer轨迹的CGMutablePath对象

1
2
3
4
5
6
7
8
9
10
11
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
}
let path = CGMutablePath()
path.addLines(between: points)
渐变线

-
自定义CustomGradientLayer，重写draw(in ctx: CGContext)方法。这里要用到Quartz2D的知识点，我在简书里找到了关于Quartz2D讲解可以学习一下。这里用到了路径、颜色与颜色空间、渐变相关技术。
颜色的处理方式采用的是高德demo里面的算法，只是修改了一下偏冷色和偏暖色的值。
(Swift中苹果对CGMutablePath进行了重构，CGMutablePath被定义为了类, 内存这一块就不用我们手动管理了，👍👍👍)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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调用func add(points: [CGPoint], colors: [UIColor]) 函数后调用自身的setNeedsDisplay()方法重绘。我们还需要在Replaying中给layer添加一个蒙板mask(这个属性本身就是个CALayer类型，有和其他图层一样的绘制和布局属性。mask图层定义了父图层的部分可见区域)

1
2
3
4
5
6
7
8
fileprivate func initShapeLayer() {
    self.shapeLayer.lineWidth = 5
    self.shapeLayer.strokeColor = UIColor.clear.cgColor
    self.shapeLayer.fillColor = UIColor.clear.cgColor
    self.shapeLayer.lineJoin = kCALineCapRound
}
self.shapeLayer.path = path
self.gradientLayer.mask = self.shapeLayer

ok，渐变线出来了

动画

动画

1
2
3
4
5
6
7
8
9
10
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
}

下载