HTML5 Canvas，無法同時運行多個動畫

Question

我編寫了采用兩個數組的代碼，這兩個數組都包含一個四角形狀的坐標（實際上是一個開始幀和一個結束幀）、一個畫布 ID 和一個時間值。 然后該函數計算每個角的 dX 和 dY，並使用window.performance.now()創建時間戳。 然后，在每個requestAnimationFrame() ，它通過使用 dX、dY、舊時間戳、新時間戳和函數調用的時間值來計算坐標應該是什么。 它看起來像這樣：

function doAnim(cv, startFrame, endFrame, animTime)
{   
    this.canvas = document.getElementById(cv);
    this.ctx = this.canvas.getContext('2d');

    if(startFrame.length != endFrame.length)
    {
        return('Error: Keyframe arrays do not match in length');
    };


    this.animChange = new Array();

    for(i=1;i<=startFrame.length;i++)
    {
        var a = startFrame[i];
        var b = endFrame[i]
        var c = b - a;
        this.animChange[i] = c;
    }
    this.timerStart = window.performance.now();

    function draw()
    {       
        this.requestAnimationFrame(draw, cv);
        this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
        this.currentFrame = new Array();
        for(i=1;i<=startFrame.length;i++)
        {
            this.currentFrame[i] = startFrame[i]+(this.animChange[i]*((window.performance.now()-this.timerStart)/animTime));
        }
        if((window.performance.now()-this.timerStart)>=animTime)
        {
            this.ctx.beginPath()
            this.ctx.moveTo(endFrame[1], endFrame[2]);
            this.ctx.lineTo(endFrame[3], endFrame[4]);
            this.ctx.lineTo(endFrame[5], endFrame[6]);
            this.ctx.lineTo(endFrame[7], endFrame[8]);
            this.ctx.fill();
            return;
        }
        else
        {
            this.ctx.beginPath()
            this.ctx.moveTo(this.currentFrame[1], this.currentFrame[2]);
            this.ctx.lineTo(this.currentFrame[3], this.currentFrame[4]);
            this.ctx.lineTo(this.currentFrame[5], this.currentFrame[6]);
            this.ctx.lineTo(this.currentFrame[7], this.currentFrame[8]);
            this.ctx.fill();
        }
    }
    draw();
}

目標是同時發生多個對象動畫。 我采用了整個坐標方法，因為我希望對象看起來好像它們來自地平線，創建了一個假的 3D 透視效果（所有對象的起始幀都是畫布中心的一個點），並且我不想扭曲對象的紋理。

嗯，它對單個動畫效果很好，但是如果我嘗試在第一個動畫運行時在完全不同的畫布上開始一個新動畫，那么第一個動畫就會停止。

正如您從我的 JS 中看到的那樣，我嘗試通過無故使用this解決這個this （我還沒有完全理解this是如何工作的，而且我讀過的每一個解釋都讓我更加困惑），但它並沒有工作。 我還嘗試了一種可怕的方法，它將所有函數自己的變量存儲在一個全局數組中（第一次運行函數時，所有變量都放在條目 1-30 中，第二次它們放在 31-60 中，等等）。 不出所料，這也不起作用。

這是一個 JSFiddle，因此您可以親自查看此場景並使用我的代碼。 我正式沒有想法。 任何幫助將不勝感激。

Answer 1

與 markE 鏈接一樣，嘗試多次調用 requestAnimationFrame 是行不通的。 相反，您創建多個對象，然后在每一幀對它們調用某種函數。 我使用您的代碼創建了一個示例： https : //jsfiddle.net/samcarlin/2bxn1r79/7/

var anim0frame1 = new Array();
anim0frame1[1] = 0;
anim0frame1[2] = 0;
anim0frame1[3] = 50;
anim0frame1[4] = 0;
anim0frame1[5] = 50;
anim0frame1[6] = 150;
anim0frame1[7] = 0;
anim0frame1[8] = 150;

var anim0frame2 = new Array();
anim0frame2[1] = 200;
anim0frame2[2] = 200;
anim0frame2[3] = 300;
anim0frame2[4] = 250;
anim0frame2[5] = 300;
anim0frame2[6] = 300;
anim0frame2[7] = 200;
anim0frame2[8] = 250;


//Call global 
animations = [];
requestAnimationFrame( GlobalStep );

function GlobalStep(delta){
    //Functions called by request animation frame have the new time as an argument
  //so delta should be approximately the same as window.performance.now()
  //especially in realtime applications, which this is

  //Check if we have any animation objects
  if(animations.length > 0){
    //Iterate through and call draw on all animations
    for(var i=0; i<animations.length; i++){
      if(animations[i].draw(delta)){
        //Basically we have it so if the draw function returns true we stop animating the object
        //And remove it from the array, so have the draw function return true when animation is complete
        animations[i].splice(i, 0);
        //We removed an object from the array, so we decrement i
        i--;
      }
    }
  }

  //And of course call requestAnimationFrame
  requestAnimationFrame( GlobalStep );
}

function AnimationObject(cv, startFrame, endFrame, animTime){

    //Add this object to the objects arrays
  animations.push(this);

  //We need to store start and end frame
  this.startFrame = startFrame;
  this.endFrame = endFrame;
  this.animTime = animTime;

  //Your code
    this.canvas = document.getElementById(cv);
  this.ctx = this.canvas.getContext('2d');

  if (startFrame.length != endFrame.length) {
    return ('Error: Keyframe arrays do not match in length');
  };

  this.animChange = new Array();

  for (i = 1; i <= startFrame.length; i++) {
    var a = startFrame[i];
    var b = endFrame[i]
    var c = b - a;
    this.animChange[i] = c;
  }

  this.timerStart = window.performance.now();
}

//This adds a function to an object, but in such a way that every object shares the same function
//Imagine a kitchen, each object is a person, and this function is a spoon
//by defining this function in this manner Object.prototype.function_name = function(arguments){}
//We make it so one function definition is needed, essentially allowing all the people to share one spoon,
//the 'this' variable still refers to whichever object we call this method, and we save memory etc.
AnimationObject.prototype.draw = function(newTime){
    //I added this to start frame so we get what we stored earlier
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
   this.currentFrame = new Array();

    for (i = 1; i <= this.startFrame.length; i++) {
      this.currentFrame[i] = this.startFrame[i] + (this.animChange[i] * ((newTime - this.timerStart) / this.animTime));
    }
    if ((newTime - this.timerStart) >= this.animTime) {
      this.ctx.beginPath()
      this.ctx.moveTo(this.endFrame[1], this.endFrame[2]);
      this.ctx.lineTo(this.endFrame[3], this.endFrame[4]);
      this.ctx.lineTo(this.endFrame[5], this.endFrame[6]);
      this.ctx.lineTo(this.endFrame[7], this.endFrame[8]);
      this.ctx.fill();
      return;
    } else {
      this.ctx.beginPath()
      this.ctx.moveTo(this.currentFrame[1], this.currentFrame[2]);
      this.ctx.lineTo(this.currentFrame[3], this.currentFrame[4]);
      this.ctx.lineTo(this.currentFrame[5], this.currentFrame[6]);
      this.ctx.lineTo(this.currentFrame[7], this.currentFrame[8]);
      this.ctx.fill();
    }
}

注意：每次按下按鈕時，都會添加一個新對象並簡單地覆蓋每一幀之前的對象，您應該實現您的程序，以便它檢查特定動畫是否已經開始，您也可以使用內置機制在完成時停止動畫（閱讀代碼中的注釋）

您還需要更改按鈕點擊代碼

 <button onclick="new AnimationObject('canvas1', anim0frame1, anim0frame2, 3000);">

最后，如果您還有其他問題，請隨時與我聯系