为什么easeljs会失败，TexturePacker的动画何时会改变小数位数？

Question

我不知道问题是画架错误还是我做错了什么（很可能）。当我使用 TexturePacker 对象制作动画时，不显示位于具有不同小数位数的数字之间的数组位置的动画。 （例如 9 到 10、99 到 100）

jsfiddle中的代码示例：

var fromTexturePacker = {
    "animations": {
        "0": [0],
            "1": [1],
            "2": [2],
            "3": [3],
            "4": [4],
            "5": [5],
            "6": [6],
            "7": [7],
            "8": [8],
            "9": [9],
            "10": [10],
    }
}

var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas);

createjs.Ticker.addListener(stage);

var image = new Image();
image.src = "http://www.kadrmasconcepts.com/blog/wp-content/uploads/2011/05/robin.png";

var Animaciones = {
    images: [image],
    frames: {
        width: 240,
        height: 315,
        regX: 120,
        regY: 160
    },
    animations: {}
};

var anim = fromTexturePacker['animations'];

Animaciones.animations['go0to9'] = [anim['0'], anim['9']];
Animaciones.animations['go9to10'] = [anim['9'], anim['10']];
Animaciones.animations['go10to10'] = [anim['10'], anim['10']];

bird = new createjs.BitmapAnimation(new createjs.SpriteSheet(Animaciones));
bird.x = 150;
bird.y = 150;
bird.gotoAndPlay("go0to9");

stage.addChild(bird);

http://jsfiddle.net/xa6Lr/9/

Answer 1

您的问题是您将单帧引用为“动画”，并且仅将数组用于 1 帧。 有多种方法可以实现，请参见下面的 fork：

//either remove the arrays
var fromTexturePacker = {
    "animations": {
            "0": 0,
            "1": 1,
            "2": 2,
            "3": 3,
            "4": 4,
            "5": 5,
            "6": 6,
            "7": 7,
            "8": 8,
            "9": 9,
            "10": 10
    }
}

//OR if you NEED to put single frames into arrays, use this:
Animaciones.animations['go9to10'] = [anim['9'][0], anim['10'][0]];

http://jsfiddle.net/YVyKJ/2/

EaselJS 动画系统非常强大，我想说你的动画可以通过提供多维数组作为帧来工作，这已经足够令人惊奇了。