layaAir引擎制作游戲的圖集動畫、時間軸動畫、和骨骼動畫總結二

一、角色序列幀.ani動畫的制作

1、在項目管理器中創建動畫文件

2.創建動畫模板，編輯動效名稱

3.編輯序列幀動畫

.ani格式動畫的代碼控制

1.動畫加載loadAnmition()

2.播放與停止、動效模板切換

3.動畫幀位置控制

4.動畫播放完成事件

uui截圖：

 

Laya.init(1334, 750);

Laya.loader.load(["res/comp.atlas","res/role.atlas"],Laya.Handler.create(this,onload));
function onload(){
    this.tweenui = new ui.tweenuiUI();
    Laya.stage.addChild(this.tweenui);
    this.tweenui.ani.play(0,false);
    //播放完成后事件
    // this.tweenui.ani.on(Laya.Event.COMPLETE,this,oncompelete);
    //對動效模板進行監聽
    this.tweenui.ani.on(Laya.Event.LABEL,this,onLabel);

    // loadAnimation三個參數
    this.roleAni = new Laya.Animation();
    // 第一個路徑 后面兩個可以默認不填
    this.roleAni.loadAnimation("res/roleAni.ani");
}
function oncompelete(){
        console.log("我完成播放了！！")
}

function onLabel(label){
    this.tweenui.leftPage.addChild(this.roleAni);
    this.roleAni.pos(this.tweenui.leftPage.width/2,this.tweenui.leftPage.height/2);
    this.roleAni.play(0,true,"die");
    
    console.log(this.tweenui.ani.index)
}

 

　　

二、動效動畫的制作

主要用於UI中一些相同的，需要批量制作的動畫，比如按鈕動畫

動效動畫不能像Animation動畫一樣去代碼控制，但可以在IDE中加入事件觸發

在IDE中新建

0不變 第5幀設置縮放0.5 10幀還原  。在之前需要設置中心點

制作按鈕回彈效果，制作后直接拖拽到ui中的節點上。

 

 

 

 三、Animation動畫組件

動畫組件可以直接放入UI或者視圖中，可視化的設置位置大小，播放與否等

四、骨骼動畫的轉換和使用

LayaAir引擎支持第三方骨骼動畫資源的轉換

需要使用IDE骨骼動畫轉換工具后轉換使用

從spine和DrgonBone中導出資源注意事項

圖集、旋轉、版本

LayaAir引擎播放Spine骨骼動畫

https://ldc.layabox.com/doc/?nav=zh-js-1-5-5

骨骼動畫轉化

生成png和sk的文件

骨骼動畫的代碼加載與使用 

API鏈接：https://layaair.ldc.layabox.com/api/?category=Bone&class=laya.ani.bone.Skeleton#Skeleton()

1.動畫模板Templet方式創建骨骼動畫Skeleton

代碼量比較大

2.直接加載資源創建骨骼動畫Skeleton

代碼小

從模板獲取動畫  buildArmature()

動畫切換皮膚 showSkinByIndex()

Laya.init(1334,750,Laya.WebGL);
//直接創建骨骼動畫
// this.skeleton = new Laya.Skeleton();
// Laya.stage.addChild(this.skeleton);
// //1是支持換裝的值
// this.skeleton.load("res/goblins-mesh.sk",Laya.Handler.create(this,oncompelete),1)

// function oncompelete(){
//     this.skeleton.pos(300,300);
//     this.skeleton.showSkinByIndex(1);
// }

// 板創建骨骼動畫
this.templet = new Laya.Templet();
this.templet.loadAni("res/goblins-mesh.sk");
this.templet.on(Laya.Event.COMPLETE,this,onLoaded);
function onLoaded(){
    // this.skeleton = this.templet.buildArmature(1);
    //或者
    this.skeleton = new Laya.Skeleton(this.templet,1);
    Laya.stage.addChild(this.skeleton);
    this.skeleton.pos(200,300);
    this.skeleton.showSkinByIndex(1);
    this.skeleton.play(0,true);    

    this.skeleton1 = new Laya.Skeleton(this.templet,1);
    Laya.stage.addChild(this.skeleton1);
    this.skeleton1.pos(400,300);
    this.skeleton1.showSkinByIndex(2);
    this.skeleton1.play(0,true);    
}



// 封裝好的方法
/**
 * @public
 * 創建骨骼動畫
 * @param {String} path 骨骼動畫路徑
 * @param {Number} rate 骨骼動畫幀率，引擎默認為30，一般傳24
 * @param {Number} type 動畫類型 0,使用模板緩沖的數據，模板緩沖的數據，不允許修改	（內存開銷小，計算開銷小，不支持換裝） 1,使用動畫自己的緩沖區，每個動畫都會有自己的緩沖區，相當耗費內存 （內存開銷大，計算開銷小，支持換裝） 2,使用動態方式，去實時去畫	（內存開銷小，計算開銷大，支持換裝,不建議使用）
 * 
 * @return 骨骼動畫
 */
// var createSkeleton = function (path, rate, type) {
//     rate = rate || 30;
//     type = type || 0;
//     var png = Laya.loader.getRes(path + ".png");
//     var sk  = Laya.loader.getRes(path + ".sk");
//     if(!png || !sk){return null;}

//     var templet = new Laya.Templet();
//         templet.parseData(png, sk, rate);

//     return templet.buildArmature(type);
// }
// // 一般使用只需要傳路徑
// var skeleton = new createSkeleton("path");