HTML画布 - 使动画一次发生一次，而不是同时发生多个动画

Question

我有一个函数，它可以使“totalAngle”参数指定的量转动。该函数使用requestAnimFrame自行调用，直到动画完成。

function clockwise(imageObj, canvas, context, angleTurned, totalAngle) { 

     // only repeat if the angle turned is less than the total angle to be turned 
     if (angleTurned < totalAngle) 
     { 
      // turn 
      context.rotate(totalAngle/180); 

      // update the angle 
      angleTurned += totalAngle/180; 

      // clear the previous image 
      context.clearRect(0, 0, canvas.width, canvas.height); 

      // draw the new image 
      context.drawImage(imageObj, -imageWidth/2, -imageHeight/2, imageWidth, imageHeight); 

      // request new frame 
      requestAnimFrame(function() { 
       clockwise(imageObj, canvas, context, angleTurned, totalAngle); 
      }); 

     } 
    } 

如果我在其他地方调用该函数几次，得到的动画混合在一起，而不是下一个开始之前完成了第一个。如何在下一次开始之前完成第一次通话？

Answer 1

创建一个数组并将对象推到数组的末尾。

每个对象都包含imageObj的属性，angleTurned & totalAngle。

让您的requestAnimationFrame循环只动画数组中的第一个对象，直到第一个imageObj被完全旋转。

然后移出完成的第一个数组元素并开始动画新的第一个元素。