[]人物行走图动画

现在我按照动画 -- 图集动画教程制作了人物行走图，图片是用TexturePackage导出的。但是不知道为什么图片是从第二张图片（迈出左脚的那张图片）开始的。

 
还有Loader.ATLAS是static] 图集类型，加载完成后返回图集json信息(并创建图集内小图Texture)。
    
load(url:String, type:String = null, cache:Boolean = true):void
加载资源。

Laya.loader.load(AniConfPath, Handler.create(this, createAnimation), null, Loader.ATLAS);
 
这里的load只有三个参数，而事实上用到4个，不清楚。。。
 
还有ani.index = 1；我改成0，-1，2，可是在经过play后面自动变成1，还有经过Laya.stage.addChild(ani);后面自动+1，不大明白 ani.index 是从几开始的，还有他有什么作用
 
代码如下：
Laya.init(800,600);

var Animation = laya.display.Animation;
var Stage     = laya.display.Stage;
var Rectangle = laya.maths.Rectangle;
var Loader    = laya.net.Loader;
var Browser   = laya.utils.Browser;
var Handler   = laya.utils.Handler;
var WebGL     = laya.webgl.WebGL;

var AniConfPath = "res/1.json";

Laya.loader.load(AniConfPath, Handler.create(this, createAnimation), null, Loader.ATLAS);

function createAnimation()
{ 
 var ani = new Animation();
 ani.loadAtlas(AniConfPath); // 加载图集动画
 ani.interval = 1000;   // 设置播放间隔（单位：毫秒）
 ani.index = 0;     // 当前播放索引
 console.log(ani.index);
 ani.play();     
 console.log(ani.index);
 var bounds = ani.getGraphicBounds();
 ani.pivot(bounds.width / 2, bounds.height / 2);
 
 ani.pos(Laya.stage.width / 2, Laya.stage.height / 2);
 console.log(ani.index);
 Laya.stage.addChild(ani);
 console.log(ani.index);
}
 
json代码如下
{"frames": [

{
 "filename": "walk_01.png",
 "frame": {"x":2,"y":2,"w":32,"h":48},
 "rotated": false,
 "trimmed": false,
 "spriteSourceSize": {"x":0,"y":0,"w":32,"h":48},
 "sourceSize": {"w":32,"h":48}
},
{
 "filename": "walk_02.png",
 "frame": {"x":36,"y":2,"w":32,"h":48},
 "rotated": false,
 "trimmed": false,
 "spriteSourceSize": {"x":0,"y":0,"w":32,"h":48},
 "sourceSize": {"w":32,"h":48}
},
{
 "filename": "walk_03.png",
 "frame": {"x":70,"y":2,"w":32,"h":48},
 "rotated": false,
 "trimmed": false,
 "spriteSourceSize": {"x":0,"y":0,"w":32,"h":48},
 "sourceSize": {"w":32,"h":48}
},
{
 "filename": "walk_04.png",
 "frame": {"x":104,"y":2,"w":32,"h":48},
 "rotated": false,
 "trimmed": false,
 "spriteSourceSize": {"x":0,"y":0,"w":32,"h":48},
 "sourceSize": {"w":32,"h":48}
}],
"meta": {
 "app": "http://www.texturepacker.com",
 "version": "1.0",
 "image": "1.png",
 "format": "RGBA8888",
 "size": {"w":138,"h":52},
 "scale": "1",
 "smartupdate": "$TexturePacker:SmartUpdate:b041bbc08e9903fc69509a32e4a1ea14$"
}
}