无法在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函数内，这意味着为单个精灵设置动画可以为所有函数设置动画。当然，只有其中一个，但只有一个，这是有效的。

我重写了一些代码，以便轻松地从动画切换到另一个动画，因为我认为这是最初的意图。

你也可以告诉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");