iOS MapView中MKPolyline的方向动画如何实现？Swift可行吗？

当然可以用Swift实现这个折线方向动画！我之前也处理过类似的需求，核心思路是利用MKOverlayRenderer的重绘机制配合CADisplayLink来驱动动画——毕竟它继承自NSObject，没法直接用UIView的动画API。下面给你详细的实现方案：

因为MKOverlayRenderer是通过draw(_:zoomScale:in:)方法绘制内容的，我们没法直接给它加UIView动画。所以我们需要：

• 自定义MKPolylineRenderer子类，添加动画进度变量和帧更新驱动（用CADisplayLink，它能和屏幕刷新率同步，动画更流畅）
• 每帧更新动画进度，调用setNeedsDisplay()触发重绘
• 在重绘时根据当前进度，只绘制折线的一部分（或者修改线条样式），模拟方向流动的效果

先写一个带动画能力的折线渲染器：

import MapKit
import QuartzCore

class AnimatedPolylineRenderer: MKPolylineRenderer {
    // 动画进度（0到1，0是起点，1是终点）
    private var animationProgress: CGFloat = 0.0
    // 驱动动画的帧链接
    private var displayLink: CADisplayLink?
    // 动画时长，可根据需求调整
    private let animationDuration: TimeInterval = 2.0
    
    /// 启动方向动画
    func startAnimation() {
        guard displayLink == nil else { return }
        animationProgress = 0.0
        displayLink = CADisplayLink(target: self, selector: #selector(updateAnimationFrame))
        displayLink?.add(to: .main, forMode: .common)
    }
    
    /// 停止动画并重置状态
    func stopAnimation() {
        displayLink?.invalidate()
        displayLink = nil
        animationProgress = 0.0
        setNeedsDisplay()
    }
    
    @objc private func updateAnimationFrame() {
        guard let link = displayLink else { return }
        // 根据帧间隔更新进度
        animationProgress += CGFloat(link.duration / animationDuration)
        
        // 进度超过1时，要么重置循环，要么停止动画
        if animationProgress >= 1.0 {
            // 如果需要循环动画，就重置进度；否则调用stopAnimation()
            animationProgress = 0.0
            // stopAnimation()
        }
        
        // 触发重绘
        setNeedsDisplay()
    }
    
    override func draw(_ rect: CGRect, zoomScale: MKZoomScale, in context: CGContext) {
        // 先绘制基础的灰色折线
        super.draw(rect, zoomScale: zoomScale, in: context)
        
        context.saveGState()
        defer { context.restoreGState() }
        
        guard let path = self.path else { return }
        
        // 获取折线的完整描边路径（用来计算长度）
        let fullStrokePath = path.copy(strokingWithWidth: self.lineWidth, lineCap: self.lineCap, lineJoin: self.lineJoin, miterLimit: self.miterLimit)
        let totalPathLength = fullStrokePath.length
        let currentDrawLength = totalPathLength * animationProgress
        
        // 裁剪出当前进度对应的子路径
        if let animatedPath = fullStrokePath.trimmedPath(from: 0, to: currentDrawLength) {
            // 设置动画线条的样式（比如蓝色高亮）
            context.setStrokeColor(UIColor.systemBlue.cgColor)
            context.setLineWidth(self.lineWidth)
            context.setLineCap(self.lineCap)
            context.setLineJoin(self.lineJoin)
            
            context.addPath(animatedPath)
            context.strokePath()
        }
    }
}

在你的地图视图代理方法里，返回自定义的渲染器：

extension YourMapViewController: MKMapViewDelegate {
    func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
        guard let polyline = overlay as? MKPolyline else {
            return MKOverlayRenderer(overlay: overlay)
        }
        
        let renderer = AnimatedPolylineRenderer(polyline: polyline)
        // 设置基础折线样式
        renderer.strokeColor = .lightGray
        renderer.lineWidth = 3.0
        return renderer
    }
}

当用户选中对应的标注时，找到关联的折线渲染器并启动动画：

func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
    // 这里需要你根据自己的业务逻辑，找到当前标注关联的MKPolyline
    // 示例：假设你把polyline存在annotation的自定义属性里
    guard let customAnnotation = view.annotation as? YourCustomAnnotation,
          let relatedPolyline = customAnnotation.relatedPolyline,
          let renderer = mapView.renderer(for: relatedPolyline) as? AnimatedPolylineRenderer else {
        return
    }
    
    // 先停止之前的动画（如果有的话），再启动新动画
    renderer.stopAnimation()
    renderer.startAnimation()
}

// 示例自定义Annotation类（根据你的实际情况调整）
class YourCustomAnnotation: MKPointAnnotation {
    var relatedPolyline: MKPolyline?
}

如果你想要的是“一段高亮线条沿着折线移动”的效果，可以修改draw(_:zoomScale:in:)方法：

override func draw(_ rect: CGRect, zoomScale: MKZoomScale, in context: CGContext) {
    // 先绘制基础折线
    super.draw(rect, zoomScale: zoomScale, in: context)
    
    context.saveGState()
    defer { context.restoreGState() }
    
    guard let path = self.path else { return }
    
    // 设置虚线样式：一段实线（20pt）+ 一段超长空白（确保只显示一段）
    let dashPattern: [CGFloat] = [20, 1000]
    // 根据进度计算虚线偏移量，让实线段沿着折线移动
    let dashOffset = -animationProgress * path.length
    
    // 设置高亮线条样式
    context.setStrokeColor(UIColor.systemRed.cgColor)
    context.setLineWidth(self.lineWidth + 1)
    context.setLineDash(phase: dashOffset, lengths: dashPattern)
    
    context.addPath(path)
    context.strokePath()
}

• 记得在不需要动画的时候调用stopAnimation()，比如折线被移除、视图控制器销毁时，避免CADisplayLink导致内存泄漏
• 可以根据需求调整animationDuration、线条颜色、宽度等参数，适配你的UI风格
• 如果折线很长，trimmedPath可能会有性能问题，你可以考虑分段处理或者简化路径

内容的提问来源于stack exchange，提问作者Abin Baby