LayaAir-图集动画

1.准备图集资源

在laya/assets/目录下添加图片资源，在IDE编辑器打开编辑模式，点击左下角刷新资源树，点击工具栏->发布，或按F12,发布成功后就可以使用图集资源。在res/atlas 中会生成3个文件，.rec文件 .arlas文件 .png文件。

2.加载图集动画

（1）loadAtlas()

//初始化舞台
Laya.init(1334, 750,Laya.WebGL);
//创建动画实例
this.roleAni = new Laya.Animation();
//加载动画图集，加载成功后执行回调方法
this.roleAni.loadAtlas("res/atlas/role.atlas",Laya.Handler.create(this,onLoaded));
function onLoaded(){
    //添加到舞台
    Laya.stage.addChild(this.roleAni);
    //播放动画
    this.roleAni.play();
}

（2）createFrames()

//初始化舞台
Laya.init(1334, 750,Laya.WebGL);
//创建动画实例
this.roleAni = new Laya.Animation();
//加载动画图集，加载成功后执行回调方法
this.roleAni.loadAtlas("res/atlas/role.atlas",Laya.Handler.create(this,onLoaded));
function onLoaded(){
    //添加到舞台
    Laya.stage.addChild(this.roleAni);
    //创建动画模板dizziness
    Laya.Animation.createFrames(aniUrls("die",6),"dizziness");
    //循环播放动画
    this.roleAni.play(0,true,"dizziness");
}
/**
 * 创建一组动画的url数组（美术资源地址数组）
 * aniName  动作的名称，用于生成url
 * length   动画最后一帧的索引值，
 */    
function aniUrls(aniName,length){
    var urls = [];
    for(var i = 0;i<length;i++){
        //动画资源路径要和动画图集打包前的资源命名对应起来
        urls.push("role/"+aniName+i+".png");
    }
    return urls;
}

（3）loadImages()

//初始化舞台
Laya.init(1334, 750,Laya.WebGL);
//加载完动画的图集后执行回调方法onLoaded
Laya.loader.load("res/atlas/role.atlas",Laya.Handler.create(this,onLoaded));
function onLoaded(){
    //创建动画实例
    this.roleAni = new Laya.Animation();
    //添加到舞台
    Laya.stage.addChild(this.roleAni);
    //通过数组加载动画资源，然后用play方法直接播放。由于loadImages方法返回的是Animation对象本身，可以直接使用“loadImages(...).play(...);”语法。
    this.roleAni.loadImages(aniUrls("move",6)).play();
}
/**
 * 创建一组动画的url数组（美术资源地址数组）
 * aniName  动作的名称，用于生成url
 * length   动画最后一帧的索引值，
 */    
function aniUrls(aniName,length){
    var urls = [];
    for(var i = 0;i<length;i++){
        //动画资源路径要和动画图集打包前的资源命名对应起来
        urls.push("role/"+aniName+i+".png");
    }
    return urls;
}