Laya的动画制作,整图动画,序列图动画,时间轴动画,龙骨动画
参考:
Laya动画基础
Egret帧动画工具类
序列图动画
白鹭的序列图动画,使用TexureMerger合图,然后使用MovieClip类播放。
Laya的话,使用图集打包工具合图,然后使用Animation类播放。

一个泡泡爆炸的序列图

laya右上角选择工具,图集打包。

选择动画的父文件夹,后缀选择atlas,点击确定。

打包生成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,"");
}
实际效果

动画模块来播放图集中的动画
白鹭中的话,这类需求也是TextureMerger来实现的。
laya中封装了这个工具类。
比如一个人物动画,有站立,跑步,攻击,死亡等动画,则打包到一个图集里,一次只play其中一个动画。

我们这里还是用泡泡来表示,泡泡分别有两个动画,一个蓝色爆炸,一个黄色爆炸。

两个泡泡打包到一个图集中

代码中使用
1. 这里是Laya.loader加载资源,而不是this.pao加载资源
2. aniUrls里的图片路径 "pao0/" 是图集名字,而不是图集的assets路径
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;iurls.push("pao0/" + aniName+i+".png");}return urls;
}
运行,效果如下。

整图动画
egret和laya都没有播放整图动画的。如果需要播放整图动画,则需要自己实现。
比如我在egret实现的可以播放序列图和整图动画的工具类
https://www.cnblogs.com/gamedaybyday/p/9219954.html
时间轴动画
白鹭也提供了时间轴动画。在exml里有个动画编辑器。
而laya则是单独有个.ani的文件来制作时间轴动画

在编辑模式,scene下右键,新建动画pao.ani


制作两个逐帧动画,blue和yellow。具体制作方法看laya教程:https://ldc2.layabox.com/doc/?nav=zh-ts-1-5-2
下图的GraphicNode不知道怎么删掉....

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");
}
实际效果

龙骨动画
比起白鹭,除了需要转换格式以外,使用方法没什么特别。不再写了。
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
