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);//創建動畫模板dizzinessLaya.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; }

總結

以上是生活随笔為你收集整理的LayaAir-图集动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。