Laya的動畫制作，整圖動畫，序列圖動畫，時間軸動畫，龍骨動畫

參考：

Laya動畫基礎

Egret幀動畫工具類

 

版本：2.1.1.1

序列圖動畫

白鷺的序列圖動畫，使用TexureMerger合圖，然后使用MovieClip類播放。

Laya的話，使用圖集打包工具合圖，然后使用Animation類播放。

一個泡泡爆炸的序列圖

 

laya右上角選擇工具，圖集打包。

 

選擇動畫的父文件夾，后綴選擇atlas，點擊確定。

例如圖片路徑是laya\anim\pao0\pao0.png，圖片文件夾路徑則是laya\anim\pao0，則應該選擇路徑是 ：圖片父文件夾路徑laya\anim。

 

打包生成pao0.atlas和pao0.png

 

將動畫文件atlas和png放入laya項目assets/anim文件夾下，並在代碼中加載使用

public pao0:Laya.Animation;

onEnable(){
    //加載動畫資源
    this.pao0 = new Laya.Animation();
    this.pao0.loadAtlas("anim/pao0.atlas",Laya.Handler.create(this, this.onAnimLoaded));
}

private onAnimLoaded(){
    //循環播放動畫
    Laya.stage.addChild(this.pao0);
    this.pao0.play(0,true,"");
}

 

實際效果　　

 

動畫銷毀調用destroy

 

 

 

動畫模塊來播放圖集中的動畫

白鷺中的話，這類需求也是TextureMerger來實現的。

laya中封裝了這個工具類。

比如一個人物動畫，有站立，跑步，攻擊，死亡等動畫，則打包到一個圖集里，一次只play其中一個動畫。

我們這里還是用泡泡來表示，泡泡分別有兩個動畫，一個藍色爆炸，一個黃色爆炸。如果做成兩個動畫，則需要兩個Animation。

現在我們把這兩個泡泡動畫，做到一個動畫里面，只需要一個Animation。

兩個泡泡打包到一個圖集中

 

 代碼中使用

1. 注意aniUrls()里urls.push的路徑 "pao0/" 是圖集pao0.atlas名字

public pao0:Laya.Animation;

onEnable(): void {
    this.pao0 = new Laya.Animation();
    //加載圖集資源
    Laya.loader.load("anim/pao0.atlas",Laya.Handler.create(this, this.onAnimLoaded));
}

private onAnimLoaded(){
    Laya.stage.addChild(this.pao0);
    //創建動畫模板
    Laya.Animation.createFrames(this.aniUrls("blue",5),"blue");
    Laya.Animation.createFrames(this.aniUrls("yellow",5),"yellow");
    //播放黃色泡泡爆炸
    this.pao0.play(0,true,"yellow");
        
}

//獲取動畫圖片地址的數組
private aniUrls(aniName:string,length:number):any{
    var urls:any = [];
    for(var i:number = 0;i<length;i++){
        //動畫資源路徑要和動畫圖集打包前的資源命名對應起來
        urls.push("pao0/" + aniName+i+".png");
    }
    return urls;
}

　　

運行，效果如下。

 

整圖動畫

egret沒有播放整圖動畫的。如果需要播放整圖動畫，則需要自己實現。

比如我在egret實現的可以播放序列圖和整圖動畫的工具類 

https://www.cnblogs.com/gamedaybyday/p/9219954.html

 

Laya提供了一個Clip組件，可以制作整圖動畫。

下面制作一個0-9數字進行輪播動畫。

 

 

新建Clip組件，設置skin為數字圖片，並設置clipX=10 X軸方向切片為10，將數字0-9切成10片，clipY=1 Y軸方向切片為1，autoPlay=true自動播放動畫

 

 

實際效果

時間軸動畫

白鷺也提供了時間軸動畫。在exml里有個動畫編輯器。

而laya則是單獨有個.ani的文件來制作時間軸動畫

 

 

在編輯模式，scene下右鍵，新建動畫pao.ani

 

 

 

 

制作兩個逐幀動畫，blue和yellow。具體制作方法看laya教程：https://ldc2.layabox.com/doc/?nav=zh-ts-1-5-2

 

ctrl+F12發布，獲得ani和altas文件

 

 

代碼中使用

onEnable(){
    Laya.loader.load("res/atlas/anim.atlas",Laya.Handler.create(this,this.onLoaded));
}

private onLoaded(){
    var tl:Laya.Animation = new Laya.Animation();
    tl.loadAnimation("test/pao.ani");
    Laya.stage.addChild(tl);
    tl.play(0,true,"blue"); //  播放黃色泡泡動畫 tl.play(0,true,"yellow")
}

　　

實際效果

 

龍骨動畫

首先找個龍骨動畫，就以Dragonbones的首頁的龍為例子。

 

導出格式為json，版本為5.0。 Laya不支持5.5，不支持二進制。

 

 

 

導出文件必須放在同名的文件夾內。這里龍骨導出名為Dragon，放的文件夾名也得為Dragon。

 

 

 

 選擇龍骨動畫轉換

 

 

開始轉換

 

 

轉換成功

 

 

得到轉換文件

 

 

 

LayaIDE編輯模式F9，加入龍骨動畫支持庫

 

 

創建龍骨對象，加載龍骨資源，加載完成后播放"walk"行走動畫

        var skeleton:Laya.Skeleton = new Laya.Skeleton();
        Laya.stage.addChild(skeleton);
        skeleton.pos(200,400);
        skeleton.load("res/DragonBones/Dragon.sk", Laya.Handler.create(this, ()=>{
            skeleton.play("walk",true);
        }));

　　

最終運行結果

 

龍骨的銷毀，Skeleton的destroy