如何实现MKMapView坐标移动及点击触发的缩放切换动画？

我刚好做过类似的需求，其实实现起来核心是利用MKMapView的区域动画能力，再配合CATransaction来串联两个连续的动画步骤，下面给你详细说下具体怎么做（以Swift为例，OC思路完全一致）：

1. 监听地图的点击事件 #

因为我们要监听的是地图上任意点的点击（而非标注点），可以给MKMapView添加一个UITapGestureRecognizer来捕获点击动作：

// 在viewDidLoad或地图初始化时添加手势
override func viewDidLoad() {
    super.viewDidLoad()
    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleMapTap(_:)))
    mapView.addGestureRecognizer(tapGesture)
}

2. 实现连续缩放动画逻辑 #

核心思路是：先执行第一个“放大到空间范围”的动画，等它完全完成后，再启动第二个“缩小到点击点”的动画。MKMapView的setRegion(_:animated:)是异步执行的，所以我们可以用CATransaction来监听第一个动画的完成事件，从而无缝触发第二个动画。

关键代码实现： #

@objc private func handleMapTap(_ gesture: UITapGestureRecognizer) {
    // 1. 获取点击的坐标
    let tapPoint = gesture.location(in: mapView)
    let tappedCoordinate = mapView.convert(tapPoint, toCoordinateFrom: mapView)
    
    // 2. 定义第一个动画的目标区域（放大至空间范围）
    // 这里的“空间范围”我默认设为点击点周围的近距离区域（即放大效果），你可以调整span的倍数来控制放大程度
    let currentRegion = mapView.region
    let zoomInSpan = MKCoordinateSpan(
        latitudeDelta: currentRegion.span.latitudeDelta * 0.3, // 跨度越小，地图放大程度越高
        longitudeDelta: currentRegion.span.longitudeDelta * 0.3
    )
    // 用regionThatFits确保区域在地图允许的缩放范围内
    let zoomInRegion = mapView.regionThatFits(
        MKCoordinateRegion(center: tappedCoordinate, span: zoomInSpan)
    )
    
    // 3. 定义第二个动画的目标区域（缩小到点击点，即拉远地图）
    let zoomOutSpan = MKCoordinateSpan(
        latitudeDelta: currentRegion.span.latitudeDelta * 1.2, // 跨度越大，地图缩小程度越高
        longitudeDelta: currentRegion.span.longitudeDelta * 1.2
    )
    let zoomOutRegion = mapView.regionThatFits(
        MKCoordinateRegion(center: tappedCoordinate, span: zoomOutSpan)
    )
    
    // 4. 串联两个动画
    CATransaction.begin()
    // 设置第一个动画完成后的回调
    CATransaction.setCompletionBlock { [weak self] in
        guard let self = self else { return }
        // 执行第二个缩小动画
        self.mapView.setRegion(zoomOutRegion, animated: true)
    }
    // 执行第一个放大动画
    mapView.setRegion(zoomInRegion, animated: true)
    CATransaction.commit()
}

一些细节调整建议： #

• 自定义“空间范围”：如果你说的“空间范围”是指包含当前地图可见区域和点击点的更大范围（即先拉远看整体），可以用下面的方法计算这个区域：

  private func getInclusiveRegion(for coordinate: CLLocationCoordinate2D) -> MKCoordinateRegion {
      let visibleRect = mapView.visibleMapRect
      // 获取当前可见区域的东北、西南坐标
      let northEast = MKCoordinateForMapPoint(MKMapPoint(x: visibleRect.maxX, y: visibleRect.minY))
      let southWest = MKCoordinateForMapPoint(MKMapPoint(x: visibleRect.minX, y: visibleRect.maxY))
      
      // 计算包含当前区域和点击点的最小/最大经纬度
      let minLat = min(southWest.latitude, coordinate.latitude)
      let maxLat = max(northEast.latitude, coordinate.latitude)
      let minLon = min(southWest.longitude, coordinate.longitude)
      let maxLon = max(northEast.longitude, coordinate.longitude)
      
      // 生成区域并添加缓冲，避免内容贴边
      let center = CLLocationCoordinate2D(latitude: (minLat + maxLat)/2, longitude: (minLon + maxLon)/2)
      let span = MKCoordinateSpan(
          latitudeDelta: (maxLat - minLat) * 1.1,
          longitudeDelta: (maxLon - minLon) * 1.1
      )
      return mapView.regionThatFits(MKCoordinateRegion(center: center, span: span))
  }
  

  然后把第一步的zoomInRegion替换成这个函数的返回值即可。

• 自定义动画时长：如果需要调整动画的快慢，可以在CATransaction中单独设置每个动画的时长：

  CATransaction.begin()
  CATransaction.setAnimationDuration(0.5) // 第一个动画的时长
  CATransaction.setCompletionBlock {
      CATransaction.begin()
      CATransaction.setAnimationDuration(0.8) // 第二个动画的时长
      self.mapView.setRegion(zoomOutRegion, animated: true)
      CATransaction.commit()
  }
  mapView.setRegion(zoomInRegion, animated: true)
  CATransaction.commit()
  

• 防止重复动画：如果用户快速多次点击，可以添加一个布尔标志位，在动画执行期间忽略新的点击事件，避免动画队列混乱。

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