fabric.js画布中两个人物图标 同时移动

图片中每次都是第一个图片移动完，第二个图片才会移动，我想让他们同时间移动，想知道用什么方法解决这个问题。目前用的是两个for 循环各自的坐标来实现移动的 😭。请求大佬指点一下。(已经解决)

在循环一个新元素的时候重置runningDuration的值

  
<script>


          var runningDuration = 0;
          //获取画布中的元素并设置该元素的属性
  
          console.log(canvas.setActiveObject()._objects);

          //载入坐标循环
          for (let i = 0; i < keyPoint[0].length; i++) {
            let animationDefinition = keyPoint[0][i];
            let fn = function (
              animationDefinition,
              imgInstance,
              xm_Instance,
              block
            ) {
              return function () {
                //移动人物1图标
                {
                  imgInstance.animate("left", animationDefinition.x, {
                    duration: animationDefinition.duration,
                    zIndex: 299,
                    onChange: canvas.renderAll.bind(canvas),
                  });
                  imgInstance.animate("top", animationDefinition.y, {
                    duration: animationDefinition.duration,
                    zIndex: 299,
                    onChange: canvas.renderAll.bind(canvas),
                  });
                }
                //姓名移动标签

                {
                  xm_Instance.animate("left", animationDefinition.x + 2, {
                    duration: animationDefinition.duration,
                    onChange: canvas.renderAll.bind(canvas),
                  });
                  xm_Instance.animate("top", animationDefinition.y - 12, {
                    duration: animationDefinition.duration,
                    onChange: canvas.renderAll.bind(canvas),
                  });
                }
                //心率移动标签

                {
                  console.log(block.opacity);
                  block.animate("left", animationDefinition.x + 2, {
                    duration: animationDefinition.duration,
                    onChange: canvas.renderAll.bind(canvas),
                  });
                  block.animate("top", animationDefinition.y - 22, {
                    duration: animationDefinition.duration,
                    onChange: canvas.renderAll.bind(canvas),
                  });
                }
              };
            };

            window.setTimeout(
              fn(animationDefinition, imgInstance, xm_Instance, block),
              runningDuration
            );
            runningDuration += animationDefinition.duration;
          }
          for (let i = 0; i < keyPoint[1].length; i++) {
            let animationDefinition = keyPoint[1][i];
            let fn = function (
              animationDefinition,
              ppInstance,
              xm_Instance,
              block
            ) {
              return function () {
                console.log(xm_Instance,block)
                //移动人物2图标
                {
                  ppInstance.animate("left", animationDefinition.x, {
                    duration: animationDefinition.duration,
                    zIndex: 299,
                    onChange: canvas.renderAll.bind(canvas),
                  });
                  ppInstance.animate("top", animationDefinition.y, {
                    duration: animationDefinition.duration,
                    zIndex: 299,
                    onChange: canvas.renderAll.bind(canvas),
                  });
                }
              
              };
            };

            window.setTimeout(
              fn(animationDefinition, ppInstance, xm_Instance, block),
              runningDuration
            );
            runningDuration += animationDefinition.duration;
          }
        }
      };
    },
  },
};
</script>