Javascript EaselJs动画问题

这是我第一次学习EaselJs。我在使用数据结构中列出的五个动画制作精灵动画时遇到问题。有人知道我做错了什么吗

链接：

函数CreateTile（x，y，stage）{
var rect=new createjs.Shape（）；
矩形图形填充（“绿色”）.drawRect（0,0,50,50）；
rect.x=x；
矩形y=y；
var rect2=new createjs.Shape（）；
rect2.graphics.beginll（“浅绿色”）.drawRect（0,0,46,46）；
rect2.x=x+2；
rect2.y=y+2；
stage.addChild（rect）；
阶段。addChild（rect2）；
}
功能生成器字段（高度、宽度、舞台）
{
var h_lim=高度/50；
var w_lim=宽度/50；
对于（var h=0；h

您遇到的问题是未正确定义精灵表。精灵表支持几种格式：

简单：只是一个名字+框架（你如何定义“站立”

连续帧：名称+开始/结束帧，以及“下一步”和“速度”。这是大多数“左”和“右”行走动画的定义方式

复杂：如果您的帧顺序不正确，这是最好的方法，因为您需要指定精确的帧列表，然后指定其他参数

您可以读取所有格式信息

我相信你混淆了连续进近和复杂进近，在“向前行走”和“向后行走”动画中放置了3帧。动画发现“2”作为下一个动画，“向前行走”作为速度

使用

[0,1,2，“向前行走”]

代替

[0,2，“向前行走”]

。与“向后行走”相同

---

这样就可以了！您的示例可以很好地进行更改。

不要在按键下更新您的阶段，只需让Ticker update完成工作。

      function CreateTile(x,y, stage){
    var rect = new createjs.Shape();
    rect.graphics.beginFill("green").drawRect(0,0,50,50);
    rect.x = x;
    rect.y = y;

    var rect2 = new createjs.Shape();
    rect2.graphics.beginFill("lightgreen").drawRect(0,0,46,46);
    rect2.x = x + 2;
    rect2.y = y + 2;

    stage.addChild(rect);
    stage.addChild(rect2);
  }

  function GenerateField(height, width, stage)
  {
     var h_lim = height / 50;
     var w_lim = width / 50;

     for(var h = 0; h < h_lim; h++){
       for(var w = 0; w < w_lim; w++){
         CreateTile(w * 50,h * 50,stage);
       }
     }
     stage.update();
  }
  function init() {
    var stage = new createjs.Stage("demoCanvas");
    GenerateField(800,600, stage);
    var img = new Image();
    img.crossOrigin="Anonymous";
    img.src = "https://s13.postimg.org/n1dqnac93/spritesheet.png";
        var data = {
      images : [img],
      frames: {width:64, height:64},
        animations: {
            stand:0,
            forwardwalk:[0,1,2, "forwardwalk"],
            leftwalk:[7,8, "leftwalk"],
            rightwalk:[3,4, "rightwalk"],
            backwalk:[9,10,11, "backwalk"]
        }
    };

    var spritesheet = new createjs.SpriteSheet(data);
    var person   = new createjs.Sprite(spritesheet);
    person.x = 400;
    person.y = 400;
    person.gotoAndPlay("forwardwalk");
    stage.addChild(person);

    window.addEventListener('keydown', function(e){
        var code = e.keyCode;
        switch(code){
          case 37:
          person.x -= 64;
          stage.update();
          break; //Left key
          case 38:
          person.y -= 64;
          stage.update();
          break; //Up key
          case 39: 
          person.x += 64;
          stage.update();
          break; //Right key
          case 40:
          person.y += 64;
          stage.update();
          break; //Down key
          default:
          break; // ignore
        }
    }, false);

    createjs.Ticker.useRAF = true;
    createjs.Ticker.setFPS(5);
    createjs.Ticker.on("tick", stage);
  }