参考:

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

Laya的动画制作,整图动画,序列图动画,时间轴动画,龙骨动画的更多相关文章

  1. UML精粹3 - 类图,序列图,CRC

    类图Class diagram 类图描述系统中的对象类型,以及它们之间的各种静态关系.类图也展示类的性质和操作,以及应用于对象连接方式的约束.UML中的特性feature,涵盖了性质property和 ...

  2. 从 Java 代码逆向工程生成 UML 类图和序列图

    from:http://blog.itpub.net/14780914/viewspace-588975/ 本文面向于那些软件架构师,设计师和开发人员,他们想使用 IBM® Rational® Sof ...

  3. Visio画UML类图、序列图 for Java

    参考文档: 1.百度搜索: 怎样用Visio 2007画C++类图 连接 https://jingyan.baidu.com/article/9f7e7ec07286e16f281554f7.html ...

  4. 基于jQuery的时间轴鼠标悬停动画插件

    之前为大家分享了很多jquery插件,这次我们要来分享一款不太常见的jQuery插件,它是一个时间轴,时间轴上的每一个点在鼠标滑过时都可以显示该点的描述信息,并且鼠标滑过时都可以产生一定的动画特效,比 ...

  5. UML学习(类图和序列图等)

    visio绘制UML图使用visio 提示此UML形状所在的绘图页不是UML模型图的一部分 请问这个问题怎么解决?新建->选择绘图类型->选择软件与数据库模板->选择UML模型图-& ...

  6. jQuery时间轴鼠标悬停动画

    在线演示 本地下载

  7. 「IDEA插件精选」安利一个IDEA骚操作:一键生成方法的序列图

    在平时的学习/工作中,我们会经常面临如下场景: 阅读别人的代码 阅读框架源码 阅读自己很久之前写的代码. 千万不要觉得工作就是单纯写代码,实际工作中,你会发现你的大部分时间实际都花在了阅读和理解已有代 ...

  8. 软件工程里的UML序列图的概念和总结

    俗话说,自己写的代码,6个月后也是别人的代码……复习!复习!复习! 软件工程的一般开发过程:愿景分析.业务建模,需求分析,健壮性设计,关键设计,最终设计,实现…… 时序图也叫序列图(交互图),属于软件 ...

  9. StartUML的基础的使用,用例图,序列图

    转载地址  http://blog.csdn.NET/tianhai110 (下面参考了原博主的内容,也加入自己的内容,为了自己脑补,也方便其他看到的人脑补) 使用StartUML绘制用例图:     ...

  10. UML 序列图

    序列图      序列图主要用于按照交互发生的一系列顺序,显示对象之间的这些交互.显示不同的业务对象如何交互,对于交流当前业务如何进行很有用.序列图是一个用来记录系统需求,和整理系统设计的好图.序列图 ...

随机推荐

  1. LINQ查询表达式(3) - LINQ 查询分组

    对查询结果进行分组 分组是 LINQ 最强大的功能之一. 下面的示例演示如何以各种方式对数据进行分组: 按照单个属性. 按照字符串属性的首字母. 按照计算出的数值范围. 按照布尔谓词或其他表达式. 按 ...

  2. HDFS中DataNode的心跳机制

    DataNode心跳机制的作用讲解了DataNode的三个作用: register:当DataNode启动的时候,DataNode需要将自身的一些信息(hostname, version等)告诉Nam ...

  3. cocoapods安装错误的原因

    gem 可以理解为管理RUBY库和程序包的查找,安装,升级和卸载是个非常好用的工具. gem install cocoapods过程中出现错误的问题.1.gem的源设置错误应该参照,下面来执行gem ...

  4. YAML_02 playbook的ping脚本检测

    ansible]# vim ping.yml --- - hosts: all   remote_user: root   tasks:      - ping: ansible]# ansible- ...

  5. webuploader如何实现分片+断点续传

    javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求 1. 通过form表单向后端发送请求 <form id=&quo ...

  6. Intel 80286 CPU

    一.80286概述 INTEL 1982年推出80286芯片,该芯片相比8086和8088有了飞跃式发展,虽然它仍是16位结构,但在CPU内部含有13.4万个晶体管,时钟频率由最初6MHz逐步提高到2 ...

  7. PHP操作数据库(以MySQL为例)

    一.开启扩展配置: 在php.ini的extension板块中增加一行extension=php_mysqli.dll 重启PHP,在phpinfo查看 <?php echo phpinfo() ...

  8. ipkg-nas

    http://pkg.entware.net/binaries/x86-64/ https://forum.synology.com/enu/viewtopic.php?t=95346 http:// ...

  9. P4568 飞行路线 分层图最短路

    P4568 飞行路线 分层图最短路 分层图最短路 问题模型 求最短路时,可有\(k\)次更改边权(减为0) 思路 在普通求\(Dijkstra\)基础上,\(dis[x][j]\)多开一维\(j\)以 ...

  10. 解决idea中maven默认jdk为1.5的问题 : IntelliJ IDEA 源值1.5已过时,将在未来所有版本中删除

    解决idea中maven默认jdk为1.5的问题 最近运行总是报警告: IntelliJ IDEA 源值1.5已过时,将在未来所有版本中删除 发现是jdk版本问题, 即使自己修改structure中的 ...