Two character ICONS move simultaneously on the fabric.js canvas

In the picture, every time the first picture moves, the second picture moves. I want them to move at the same time, and I want to know what method to solve this problem. Currently, the coordinates of the two for loops are used to move 😭. Ask big guy to give directions. (Already solved)

Resets the value of runningDuration while looping a new element

  
<script>


          var runningDuration = 0;
          // Gets the element in the canvas and sets its properties
  
          console.log(canvas.setActiveObject()._objects);

          // Load the coordinate loop
          for (let i = 0; i < keyPoint[0].length; i++) {
            let animationDefinition = keyPoint[0][i];
            let fn = function (animationDefinition, imgInstance, xm_Instance, block) {
              return function () {
                // Move the person1 icon
                {
                  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),
                  });
                }
                // Name move label

                {
                  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),
                  });
                }
                // Heart rate mobile TAB

                {
                  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)
                // Move the character 2 icon
                {
                  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>Copy the code