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透视效果（所有对象的起始帧都是画布中心的单个点），我不想扭曲物体＆＃39;纹理。

嗯，它适用于单个动画，但如果我尝试在完全不同的画布上启动新动画，而第一个动画正在运行，那么第一个动画就会在其轨道中停止运行。

正如你从我的JS中看到的那样，我试图通过无偿使用this来解决这个问题（我不完全理解this如何运作，以及每一个解释我和＃39} ;阅读让我更加困惑），但它没有奏效。我还尝试了一种存储所有功能的可怕方法。在一个全局数组中拥有自己的变量（第一次运行该函数，所有变量都放在条目1-30中，第二次它们放在31-60中，等等）。不出所料，这也不起作用。

Here is a JSFiddle so you can see this scenario for yourself and play with my code.我正式没有想法。任何帮助将不胜感激。

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);">

最后，如果您有其他问题，请随时与我联系

HTML5 Canvas，无法一次运行多个动画

1 个答案: