layaAir引擎制做游戏的图集动画、时间轴动画、和骨骼动画总结一

LayaAir建立动画的两种方式

图集动画：把多张动画图片资源打包成图集，而后经过引擎的动画加载图集资源，并建立动画模板用于控制。

IDE动画：IDE建立UI动画或者动画模板文件，使用时间轴动画编辑器制做动画，动画文件再经过动画类加载控制使用。

二者适用范围：

时间轴动画编辑器是LayaAir中的核心模块。，经过对时间轴上的关键帧制做，自动生成运动中的动画帧，

能够快捷实现游戏中序列帧切换，alpha透明度渐变，位移，旋转、缩放等效果。

图集动画适合于游戏程序制做控制动画

IDE动画适合美术设计师直观制做动画，随时修改动画效果。

图集动画模块

1、经过LayaAirIIDE提供的打包工具打包图集

步骤以下：

1.创建资源管理文件夹，将所须要打包的文件夹放入其中，每一个资源文件夹将产生一个图集资源

2.IDE菜单中打开图集打包工具，源路径设置为资源管理文件夹。

3.图集打包参数设置，包括图片资源的大小，输出格式设置。

 

 

图集最大宽度是 2048，不能超过这个限制，单独也不能超过512。

须要注意的一点打包图集的文件夹须要再包一层，不然打包不成功。

2的整次幂，若是勾选了，会压缩可是不必定会成功，通常不勾选。

空白裁剪会把没有用到的空白区域裁减掉，能够节省资源。

文件后缀默认atlas，使用atlas预加载不用指定图集类型，使用json的就须要指定图集类型，不然报错

使用拖拽方式或者浏览方式均可以。打包生成以下：

 

2、LayaAirIIDE项目自动打包图集功能

1.打开IDE所创建的项目

2.将动画资源拷贝到项目资源管理文件夹中，拖拽拷入或者打开目录拷贝均可以。

3.在项目中设置打包参数，包括导出格式、大小、导出目录等。

按F9或者选择文件下面的项目设置就能够打开。

使用清理和导出 ctrl+F12

或者本身手动删除bin下面的res从新打包F5，截图以下：

 

 

 

3、用代码加载图集资源来建立动画和建立图集动画模板

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建立动画的类型

一、在ui界面中制做时间轴动画，动画嵌入在ui页面中，可经过代码控制其播放

2.建立独立的.ani格式动画文件。能够用于角色动画，特效动画等，经过动画类加载并控制

1、时间轴编辑器功能简介

1.动效模板的操做

2.时间轴关键帧的创建与基本操做

3.关键帧的位移、缩放、旋转、alpha动画

四、动画与缓动相结合

2、IDE基础动画制做

一、序列帧动画

直接把一组图片拖入到时间轴上，能够 用代码控制速度，也能够修改帧率

 

二、透明度变化动画

 

 

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的一半  能够达到同样的效果，设置好中心点

3、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)
}