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被完全旋轉。

然後移出完成的第一個數組元素並開始動畫新的第一個元素。