無法在JavaScript中創建一個對象的兩個實例

Question

我創建了這段代碼來渲染一些動畫。 對於一個動畫來說，這似乎很好用。 但是，如果我嘗試創建該對象的兩個或更多實例，則一切都會變得混亂，並且不再呈現任何內容。

var animate = function(id,sprite){
var sprites = sprite;
var imageID = id;
var arize = document.getElementById(imageID);   
var spriteID;
var animationSprites;

console.log("before switch: sprite: " + sprite + "imageID: " + imageID + "element: " + arize + "animationSprites: " + animationSprites)

switch(sprites) {
    case "appear":
        animationSprites = appear;
        spriteID = "appear";
        break;
    case "die":
        animationSprites = die;
        spriteID = "die";
        break;
    case "slap":
        animationSprites = slap;
        spriteID = "slap";
        break;
    case "walk":
        animationSprites = walk;
        spriteID = "walk";
        break;
    default:
        animationSprites = idle;
        spriteID = "idle";
}

console.log(sprites.length)
console.log("after switch: sprite: " + sprite + "imageID: " + imageID + "element: " + arize + "animationSprites: " + animationSprites)

this.animateThis = function() {

    arize.src = animationSprites[i];
    i++;    
    setTimeout(function() {         
        if (i < animationSprites.length) {   
            console.log(i)
            showings(); 
            if (i== animationSprites.length -1) {
               i=0;
            }       
        }
    },50);
}

function showings() {
    var showZombieTwo = new animate("imgs", "slap");
    showZombieTwo.animateThis();
    //var showZombieOne = new animate("imgs1", "idle");
    //showZombieOne.animateThis();
}

如何同時渲染多個動畫？

Answer 1

showing函數位於animate函數內部，這意味着對單個sprite進行動畫處理會對所有動畫進行動畫處理。 當然，只有一個，但只有一個時，此方法有效。

我重寫了一些代碼，以使從動畫切換到另一個動畫變得容易，因為我認為這是最初的意圖。

還可以告訴我spriteID變量的作用是什么？ 我認為在代碼的任何地方都沒有使用它。

// assumed variables
var i = 0,
  appear = [/* array of src strings */],
  die = [/* array of src strings */],
  slap = [/* array of src strings */],
  walk = [/* array of src strings */];


var animate = function(imageID, sprite) {
  var that = this;
  var sprites = sprite;
  var arize = document.getElementById(imageID);
  var spriteID; // What is the purpose of this variable?
  var animationSprites;

  console.log("before switch: sprite: " + sprite + "imageID: " + imageID + "element: " + arize + "animationSprites: " + animationSprites);

  this.currentAnimationFrame = 0;

  this.setCurrentAnimation = function(animationName) {
    // reset animation
    that.currentAnimationFrame = 0;

    switch (animationName) {
      case "appear":
        animationSprites = appear;
        spriteID = "appear";
      break;
      case "die":
        animationSprites = die;
        spriteID = "die";
      break;
      case "slap":
        animationSprites = slap;
        spriteID = "slap";
      break;
      case "walk":
        animationSprites = walk;
        spriteID = "walk";
      break;
      default:
        animationSprites = idle;
        spriteID = "idle";
    }

    return spriteID;
  }

  this.animateThis = function() {
    arize.src = animationSprites[that.currentAnimationFrame];
    that.currentAnimationFrame++;

    setTimeout(function() {
      if (that.currentAnimationFrame >= animationSprites.length) {
        that.currentAnimationFrame = 0;
      }
      that.animateThis();
    }, 50);
  }

  // setting the init animation
  this.setCurrentAnimation(sprite);
}

var showZombieTwo = new animate("imgs", "slap");
showZombieTwo.animateThis();

// braaaain
showZombieTwo.setCurrentAnimation("walk");

// finally...
showZombieTwo.setCurrentAnimation("die");