如何平滑地平移/动画mapboxgl JS点图层符号的更新位置

// 创建地图对象
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [lng, lat], // 地图中心点坐标
  zoom: 10 // 地图缩放级别
});

// 添加点图层
map.on('load', function() {
  map.addSource('point', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [{
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [lng, lat] // 初始位置坐标
        },
        properties: {}
      }]
    }
  });

  map.addLayer({
    id: 'point-layer',
    type: 'circle',
    source: 'point',
    paint: {
      'circle-radius': 10,
      'circle-color': '#f00'
    }
  });
});

// 定义动画循环
function animate() {
  // 获取当前位置坐标
  var currentCoordinates = map.getSource('point')._data.features[0].geometry.coordinates;

  // 计算目标位置坐标
  var targetCoordinates = [newLng, newLat]; // 根据自己的算法计算目标位置坐标

  // 更新点的位置坐标
  map.getSource('point').setData({
    type: 'FeatureCollection',
    features: [{
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: currentCoordinates
      },
      properties: {}
    }]
  });

  // 判断是否到达目标位置，如果未到达则继续动画循环
  if (currentCoordinates[0] !== targetCoordinates[0] || currentCoordinates[1] !== targetCoordinates[1]) {
    requestAnimationFrame(animate);
  }
}

// 启动动画循环
animate();