SwiftUI MapKit标注位置平滑动画实现问题求助

核心问题分析 #

你的代码中每次更新标注时都会创建全新的DisplayedAnnotation实例，即使ID相同，默认的Equatable实现会比较所有属性（包括位置），导致SwiftUI将其识别为新元素而非现有元素的属性更新，因此不会触发平滑动画，而是直接替换视图。

解决方案步骤 #

1. 自定义DisplayedAnnotation的Equatable实现

让Equatable仅通过id判断相等性，确保SwiftUI识别同一ID的标注为同一个视图元素：

struct DisplayedAnnotation : Identifiable, Equatable, Animatable {
    // 自定义Equatable，仅比较id
    static func == (lhs: DisplayedAnnotation, rhs: DisplayedAnnotation) -> Bool {
        lhs.id == rhs.id
    }

    var animatableData: AnimatablePair<CLLocationDegrees, CLLocationDegrees> {
        get { AnimatablePair(position.latitude, position.longitude) }
        set {
            position.latitude = newValue.first
            position.longitude = newValue.second
        }
    }

    let id: String
    let number: String
    var position: CLLocationCoordinate2D
    let foreground: Color
    let background: Color
}

2. 修改ViewModel的标注更新逻辑

不再重建整个标注数组，而是更新现有标注的位置，新增/删除需要变更的标注：

init(source: SourceSubject) {
    cancellable = source
        .receive(on: DispatchQueue.main)
        .sink { subjectData in 
            let newPlaceIds = Set(subjectData.places.map { $0.number })
            
            // 移除已不存在的标注
            self.annotations.removeAll { !newPlaceIds.contains($0.id) }
            
            // 更新或添加标注
            for place in subjectData.places {
                if let index = self.annotations.firstIndex(where: { $0.id == place.number }) {
                    // 使用withAnimation包裹位置更新，触发平滑动画
                    withAnimation(.linear(duration: 1.0)) {
                        self.annotations[index].position = place.position
                    }
                } else {
                    self.annotations.append(DisplayedAnnotation(
                        id: place.number, 
                        number: place.number, 
                        position: place.position, 
                        foreground: .white, 
                        background: .red
                    ))
                }
            }
        }
}

3. 调整View中的动画配置

移除Map外层的.animation修饰符（因为我们已经在更新时用withAnimation指定了动画参数），确保动画仅作用于标注的位置变化：

var body: some View {
    Map(initialPosition: MapCameraPosition.camera(mapCamera), bounds: mapCameraBounds, interactionModes: [.rotate, .zoom, .pan]) {
        ForEach(viewModel.annotations) { annotation in
            Annotation("", coordinate: annotation.position, anchor: .center) {
                Text(annotation.number)
                    .padding(4)
                    .background(annotation.background)
                    .font(.caption)
                    .bold()
                    .foregroundStyle(annotation.foreground)
                    .fontWidth(.condensed)
                    .clipShape(Circle())
                    .mapOverlayLevel(level: .aboveRoads)
            }
        }
    }
    .mapControls {
        MapScaleView()
        MapZoomStepper()
    }
    .controlSize(.regular)
    .mapStyle(.imagery)
    .mapStyle(.standard(pointsOfInterest: .excludingAll))
    .navigationTitle(viewModel.selectedTrack.name)
}

是否需要降级到UIViewRepresentable？ #

不需要。上述修改后，SwiftUI原生MapKit会识别标注的位置变化并触发平滑动画，完全不需要依赖UIKit的MKMapView封装。如果你的项目针对iOS 17及以上版本，原生Map的动画支持已经足够稳定。

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