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(){<br> //加载动画资源

this.pao0 = new Laya.Animation();

this.pao0.loadAtlas("anim/pao0.atlas",Laya.Handler.create(this, this.onAnimLoaded));

}

private onAnimLoaded(){<br> //循环播放动画

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

Laya动画，整图动画，序列图动画，时间轴动画，龙骨动画相关推荐

轻松制作GIF动画！教你玩转PS时间轴之5个小技巧篇
通过前两篇文章,我们已经知道制作动画的基本知识的和技巧,下面通过5个非常有用的知识点跟大家更深入地探索PS时间轴.文末附上PSD,可以下载后自行分析动画技巧. 往期回顾: <新手指南!手把手教你 ...
UML交互图（时序图、顺序图、序列图是一样的、协作图）
时序图.顺序图.序列图是一样的,可能是因为英文翻译的问题,他们对应的都是Sequence Diagram,而另一个Timing Diagram可能翻译常时间图更合适一点点. Sequence Diag ...
轻松制作GIF动画！教你玩转PS时间轴之进阶技巧篇
上一篇文章跟大家讲过PS时间轴的基础,接下来跟大家分享制作简单GIF动画的一些技巧,(文字动画.颜色渐变.咻一咻动画.模糊动画.旋转时钟以及变化的月亮等等),文章提到的动画都有提供打包下载,想学时间轴 ...
UML--时序图(顺序图、序列图、循序图)
一. 概述顺序图(Sequence Diagram):是一种强调对象间消息传递次序的交互图,又称为时序图或序列图.描述了在一个用例或操作的执行过程中对象如何通过消息相互交互,说明了消息如何在对象之间 ...
业务建模活动图和序列图
http://blog.csdn.net/huaishu/article/details/39249383 活动图,更准确地说是活动图的"山寨版"--流程图,应该是在开发人员中使用 ...
hype3 响应布局_使用Hype 3的基于时间轴的Web动画
hype3 响应布局 Tumult的Hype 3是用于创建HTML5动画的OS X应用程序. 如果您曾经使用过Flash的标志性时间轴工具,那么Hype 3的界面似乎会非常熟悉. 在本教程中,我们将快 ...
UML时序图（序列图）
什么是时序图时序图(Sequence Diagram),又名序列图.循序图,是一种UML交互图.它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作. 让我们来看一看visio2016对时 ...
uml 9种图之序列图
序列图主要描述按照时间的先后顺序对象之间的交互动作过程. 序列图强调消息的时间顺序.顺序图以二维图表来显示交互.纵向是时间轴,时间显示为自上而下.横向显示了交互中各个对象的角色.每个对象用方框表示,对 ...
【不专一的开发】UML（二）---行为图（状态图、活动图、序列图、协同图）
目录状态图Statechart Diagram 活动图 Activity Diagram 序列图 (时序图)Sequence Diagram 协同图(协作图)Collaboration Diagta ...
UE5蓝图时间轴摄影机路径动画
1. 新建蓝图类Actor 2. 蓝图里添加Spline和Camera组件,另外添加一个Scene场景组件,可以把Camera拖到Scene的子级,这样做可以让Camera在沿着路径运动的时候自由更改 ...

Laya动画，整图动画，序列图动画，时间轴动画，龙骨动画

序列图动画

动画模块来播放图集中的动画

整图动画

时间轴动画

龙骨动画

Laya动画，整图动画，序列图动画，时间轴动画，龙骨动画相关推荐

最新文章

热门文章