layaAir引擎制作游戏的图集动画、时间轴动画、和骨骼动画总结一
LayaAir创建动画的两种方式
图集动画：把多张动画图片资源打包成图集，然后通过引擎的动画加载图集资源，并创建动画模板用于控制。
IDE动画：IDE创建UI动画或者动画模板文件，使用时间轴动画编辑器制作动画，动画文件再通过动画类加载控制使用。
两者适用范围：
时间轴动画编辑器是LayaAir中的核心模块。，通过对时间轴上的关键帧制作，自动生成运动中的动画帧，
可以快捷实现游戏中序列帧切换，alpha透明度渐变，位移，旋转、缩放等效果。
图集动画适合于游戏程序制作控制动画
IDE动画适合美术设计师直观制作动画，随时修改动画效果。
图集动画模块
一、通过LayaAirIIDE提供的打包工具打包图集
步骤如下：
1.建立资源管理文件夹，将所需要打包的文件夹放入其中，每个资源文件夹将产生一个图集资源
2.IDE菜单中打开图集打包工具，源路径设置为资源管理文件夹。
3.图集打包参数设置，包括图片资源的大小，输出格式设置。
图集最大宽度是 2048，不能超过这个限制，单独也不能超过512。
需要注意的一点打包图集的文件夹需要再包一层，否则打包不成功。
2的整次幂，如果勾选了，会压缩但是不一定会成功，一般不勾选。
空白裁剪会把没有用到的空白区域裁减掉，可以节省资源。
文件后缀默认atlas，使用atlas预加载不用指定图集类型，使用json的就需要指定图集类型，否则报错
使用拖拽方式或者浏览方式都可以。打包生成如下：
二、LayaAirIIDE项目自动打包图集功能
1.打开IDE所建立的项目
2.将动画资源拷贝到项目资源管理文件夹中，拖拽拷入或者打开目录拷贝都可以。
3.在项目中设置打包参数，包括导出格式、大小、导出目录等。
按F9或者选择文件下面的项目设置就可以打开。
使用清理和导出 ctrl+F12
或者自己手动删除bin下面的res重新打包F5，截图如下：
三、用代码加载图集资源来创建动画和创建图集动画模板
1.加载图集文件
2.创建动画Animation实例
3.创建动画模板creatFrames() loadImages()
代码如下，对于动画播放的速度，等参数可以查看官网的API：
https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.AnimationPlayerBase
Laya.init(600, 400);
/**
* 加载图集资源
* 两个参数 执行域 和加载完成后的回调
*/
Laya.loader.load("res/role.atlas",Laya.Handler.create(this,function(){
this.roleAni = new Laya.Animation();
Laya.stage.addChild(this.roleAni);
this.roleAni.loadAtlas("res/role.atlas");
//play() 播放 三个参数 从那哪一帧开始 是否自动播放
this.roleAni.play();
//调整时间
this.roleAni.interval = 100;
//动画本身大小默认为0，可以自行设置
this.roleAni.size(96,96);
//在舞台的位置
this.roleAni.pos((Laya.stage.width-this.roleAni.width)/2),((Laya.stage.height-this.roleAni.height)/2);
// 每张图的大小，getBound一直在计算,耗用性能
// var res = this.roleAni.getBound();
// 设置中心点，就不需要减去自身宽度的一半
this.roleAni.pivotX = this.roleAni.pivotY = 48;
this.roleAni.pos(Laya.stage.width/2,Laya.stage.height/2);
}))
使用loadImage（）和creatFrames方法，方法使用可以查找API；
代码如下：
Laya.init(600, 400);
/**
* 加载图集资源
* 两个参数 执行域 和加载完成后的回调
*/
Laya.loader.load("res/role.atlas",Laya.Handler.create(this,function(){
this.roleAni = new Laya.Animation();
Laya.stage.addChild(this.roleAni);
this.roleAni.loadAtlas("res/role.atlas");
//play() 播放 三个参数 从那哪一帧开始 是否自动播放 动画名字
// this.roleAni.play();
//调整时间
this.roleAni.interval = 100;
//动画本身大小默认为0，可以自行设置
this.roleAni.size(96,96);
//在舞台的位置
this.roleAni.pos((Laya.stage.width-this.roleAni.width)/2),((Laya.stage.height-this.roleAni.height)/2);
// 每张图的大小，getBound一直在计算,耗用性能
// var res = this.roleAni.getBound();
// 设置中心点，就不需要减去自身宽度的一半
this.roleAni.pivotX = this.roleAni.pivotY = 48;
this.roleAni.pos(Laya.stage.width/2,Laya.stage.height/2);
//使用loadImage()创建模板
this.roleAni.loadImages(creatUrl(7,"attack","attack"));
this.roleAni.loadImages(creatUrl(8,"move","move"));
// this.roleAni.play(0,true,"move");
Laya.Animation.createFrames(creatUrl(7,"attack","attack"));
this.roleAni.play(0,true,"attack");
}))
// 减少填写固定的路径
function creatUrl(num,url){
var arr = [];
for(var i = 0;i<num;i++){
arr.push("role/"+url+i+".png");
}
return arr;
}
使用IDE制作方式
IDE创建动画的类型
1、在ui界面中制作时间轴动画，动画嵌入在ui页面中，可通过代码控制其播放
2.创建独立的.ani格式动画文件。可以用于角色动画，特效动画等，通过动画类加载并控制
一、时间轴编辑器功能简介
1.动效模板的操作
2.时间轴关键帧的建立与基本操作
3.关键帧的位移、缩放、旋转、alpha动画
4、动画与缓动相结合
二、IDE基础动画制作
1、序列帧动画
直接把一组图片拖入到时间轴上，可以 用代码控制速度，也可以修改帧率
2、透明度变化动画
3.移动动画
可以调整x轴和y轴，控制位置变化
4.缩放动画
设置scaleX和scaleY即可
也可以设置anchorX和anchorY为0.5
5.倾斜角度动画
设置 skewX和skewY
6.旋转动画
设置每一帧的rotation从90 45 0 -45 可以制作旋转摇摆的动画
设置anchorx 和 anchorY 都是0.5 或者pivotX为width的一半 可以达到一样的效果，设置好中心点
三、UI动画的制作步骤
1.选择需要之多动画的组件并且开启动画编辑模式
2.动画关键帧编辑（位移、缩放、旋转、alpha等）
3.设置播放控制（也可以代码控制）
4.标签的添加
选中下面的小星星，选择缓动类型
代码控制如下：
Laya.init(1334, 750);
Laya.loader.load("res/comp.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);
}
function oncompelete(){
console.log("我完成播放了！！")
}
function onLabel(label){
console.log(this.tweenui.ani.index)
}
