一、角色序列幀.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");

　　

?

轉載于:https://www.cnblogs.com/joyce123/p/8647478.html

總結

以上是生活随笔為你收集整理的layaAir引擎制作游戏的图集动画、时间轴动画、和骨骼动画总结二的全部內容，希望文章能夠幫你解決所遇到的問題。

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