openlayers实现图标移动动画

let animationFrameId = null;
function startAnimation(targetLonLat) {
  // 将目标经纬度坐标转换为地图上的坐标
  const newCoordinates = fromLonLat(targetLonLat);

  // 获取要素当前的坐标作为起始坐标
  const oldCoordinates = feature.getGeometry().getCoordinates();

  // 定义动画持续的时间，单位为毫秒
  const duration = 500;

  // 初始化一个变量 start，用于记录动画开始的时间戳
  let start = null;

  // 定义一个递归函数 animate，用于执行动画效果
  const animate = (timestamp) => {
    // 如果 start 为 null，则将当前时间戳赋给 start，表示动画开始
    if (!start) start = timestamp;

    // 计算从动画开始到当前时间的时间差
    const elapsed = timestamp - start;

    // 判断动画是否仍在进行中
    if (elapsed < duration) {
      // 计算动画完成的比例
      const fraction = elapsed / duration;

      // 计算当前坐标
      const currentCoordinates = [
        oldCoordinates[0] + (newCoordinates[0] - oldCoordinates[0]) * fraction,
        oldCoordinates[1] + (newCoordinates[1] - oldCoordinates[1]) * fraction,
      ];

      // 更新要素位置
      feature.getGeometry().setCoordinates(currentCoordinates);

      // 继续请求下一帧动画
      animationFrameId = requestAnimationFrame(animate);
    } else {
      // 动画结束，将要素移动到目标位置
      feature.getGeometry().setCoordinates(newCoordinates);
    }
  };

  // 开始执行动画
  animationFrameId = requestAnimationFrame(animate);
}

思路就是用windows的浏览器动画api实现。   如果哪位大佬有更好的方法敬请指教