Mapbox地图上的抖动画布动画

我正在尝试在Mapbox地图(Mapbox gl)上沿路线设置画布标记的动画。 但是画布动画看起来真的很不稳定,尤其是当动画很慢的时候。

这是一个例子 https://codepen.io/vps-dev/pen/MWzqpRx

画布图像创建:

const canvasMarker = {
      width: size,
      height: size,
      data: new Uint8Array(size * size * 4),
      context: null,

      // When the layer is added to the map,
      // get the rendering context for the map canvas.
      onAdd: function () {
        const canvas = document.createElement('canvas')
        canvas.width = this.width
        canvas.height = this.height
        this.context = canvas.getContext('2d')
      },

      // Call once before every frame where the icon will be used.
      render: function () {
        const context = this.context
        if (!context) return false

        context.clearRect(0, 0, context.canvas.width, context.canvas.height)
        context.beginPath()

        context.font = '30px Arial'
        context.fillText('Hello World', 0, 20)
        context.rect(0, 40, this.width, 10)
        context.rect(0, 55, this.width, 10)
        context.fillStyle = '#000'
        context.fill()

        this.data = context.getImageData(0, 0, this.width, this.height).data
        
        map.triggerRepaint()

        // Return `true` to let the map know that the image was updated.
        return true
      },
    };

正在地图上添加图像:

map.addImage('canvas-marker', canvasMarker, { pixelRatio: 2 })
      
map.addLayer({
 'id': 'point',
 'source': 'point',
 'type': 'symbol',
 'layout': {
   'icon-image': 'canvas-marker',
   'icon-size': 1.5,
    'icon-allow-overlap': true,
    'icon-ignore-placement': true
  }
});

然后使用requestAnimationFrame设置点的动画

你能支持我吗?我做错了什么? 谢谢你的帮助!