LayaAir 时间轴动画

待我称王封你为后i 2022-04-03 02:52 340阅读 0赞

**目录**

时间轴动画·概述

动画编辑器

时间轴动画·运用

入门平移动画

多时间轴动画

帧动画

--------------------

# 时间轴动画·概述 #

1、时间轴动画编辑器最是 LayaAirIDE 中的核心模块，通过对时间轴上的关键帧制作，自动生成运动中的动画帧，可快捷的实现游戏中 alpha 透明度渐变、位移、旋转、缩放等动画效果。节省了制作人员的大部份时间，提高了开发效率。

![20181220093754718.png][]

2、本文将直接进行动画制作及其使用，而不再深入说明动画制作的过程以及作用，关于时间轴动画的详细制作过程请参考官方文档：[https://ldc.layabox.com/doc/?nav=zh-js-1-5-2][https_ldc.layabox.com_doc_nav_zh-js-1-5-2]

3、时间轴动画有两种创建方式：一是创建 .ani 文件的时间轴动画，二是在 UI页面（.ui文件）内创建时间轴动画。

4、.ani 与 .ui 两种文件制作时间轴动画的方式完全相同，区别仅在于.ani文件内创建的时间轴动画可被其它UI页面使用，而在UI页面内创建的时间轴动画，仅可在当前的UI页面内使用。对于通用的时间轴动画，建议在.ani文件内创建。

5、本文使用 LayaAir IDE 2.0.0beta5版本

## 动画编辑器 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

1、GraphicNode 为显示节点，后面的数字是目标对象的ID，动画场景中每增加一个动画组件，时间轴中就会增加一个对应的显示节点。点击节点层左侧的展开按钮（三角），可以看到所有属于该节点的动画属性，每增加一种动画属性，显示节点层下就会增加一个对应的节点属性层。当有多个显示节点时，可以在右侧属性面板中的name中为 GraphicNode 进行命名以示相互区分。

2、通过 "+" 号按钮可以新增空的时间轴动画，后面的按钮可以复制动画，复制一个与原动画一样的新动画，新动画可以基于原动画的基础上继续扩展和调整

3、点击删除按钮时，会提示是否删除动画，点击确定后将会删除当前动画。删除时间轴动画只会删除时间轴上的动画效果及属性，而不会删除场景中的动画节点（GraphicNode ）

4、在 .ani 文件中，场景编辑区的起始坐标（0,0）点位于两条红线交叉的中心点。时间轴动画的负坐标区域内，无法触发点击事件，如果需要用到点击事件交互，则动画的X与Y必须位于正坐标区域，也就是十字红线交叉的右下区域

5、在时间轴中选中节点，右键删除，同样不能将当前节点删除，只能删除掉当前节点中制作的动画效果与节点属性。需要在层级面板中选中要删除的节点，然后右键删除。

6、如果动画列表内有多个动画时，一定要注意删除的节点是不是在其它动画里也用到了，因为组件的删除会影响到全部动画，一旦删除，其它动画内的该节点和动画也会消失。

# 时间轴动画·运用 #

## 入门平移动画 ##

**1）**切换到编辑模式下，在项目管理器(Scenes)上右击,选择 `新建` \-> `动画,``输入动画名称后，点击确定即可生成动画文件(.ani)。`

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 2][]

A、快捷键 F3 可恢复编辑器为默认面板布局

B、在 .ani 文件中，场景编辑区的起始坐标（0,0）点位于两条红线交叉的中心点

![20181220102032339.png][]

C、时间轴面板中可以管理多个动画效果，默认是以 ani1、ani2……anix 命名，为了便于记忆区分以及后续调用，强烈建议修改动效名称

D、只有勾选动画编辑模式后，才可以对当前的动画效果进行编辑，进入编辑模式后，默认在 0 帧上

2、**导入动画资源**，将需要使用的动画资源导入到资源面板(Assets)下，资源应该放在 Assets 下的子目录下，而不是直接放在 Assets 下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 3][]

A、然后将资源面板(Assets)中的组件直接拖动到动画编辑面板中，会自动在 0 帧创建一个关键帧.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 4][]

B、GraphicNode:3 代表每一个动画节点(资源组件)

3、**创建关键帧**

A、在场景编辑器中，选中组件，改变组件的任意属性值后会自动创建关键帧

B、鼠标选中第20帧，然后将x轴属性值改为200，此时会自动在第20帧生成关键帧，同理在第40帧上再将x属性设置为0

![20181220104029391.gif][]

**4、使用动画**

A、现在就以上面这个最简单的动画进行代码使用，看如何将做好的动画使用代码来进行调用。

B、动画制作好之后，按 F12 进行项目发布，然后切换到代码模式，在编译输出目录 bin下，就可以看到 res/atlas目录中生成了 bear.atlas 与 bear.png，同时在资源目录 laya 下，自动生成 pages/bear.ani 动画文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 5][]

C、再次声明本文使用的是 LayaAir IDE 2.0.0beate5版本。学习《[LayaAir 图集动画2—动画运用][LayaAir _2]》的时候也会有 .atlas 与 .png 文件，轴动画就多了一个 .ani 动画文件，主要用于记录资源的动画信息。

D、有了这3个文件，现在就可以编码了，在应用入口文件中编码如下：

//初始化引擎
        Laya.init(600, 400);
        //设置舞台背景色
        Laya.stage.bgColor = "#9A9A9A";
    
        //1、创建一个Animation实例
        var ani = new Laya.Animation();
        //添加到舞台
        Laya.stage.addChild(ani);
      
        //2、加载图集成功后，执行 onLoaded 回调方法
        Laya.loader.load("res/atlas/bear.atlas", Laya.Handler.create(this, onLoaded));
        function onLoaded() {
            //3、加载动画文件
            ani.loadAnimation("bear.ani");
            //4、播放Animation动画
            ani.play();
        }

![20181220110323605.gif][]

## 多时间轴动画 ##

![20181220114029924.gif][]

1、现在来实现上图的效果，同时播放多个时间轴动画。

2、第一个思路是左边的小熊创建一个 .ani 动画文件，设置动画，右边的小熊也创建一个 .ani 文件，设置动画；另一个思路是在同一个 .ani 文件中创建多个动画

3、实际开发中对于同一套动画，建议将多个动画放在同一个动画文件 .ani 中

4、本例仍然使用之前的 bear.ani 文件以及 bear/bear.png 资源进行动画制作同一个动画文件中创建多个动画。

![20181220114734480.gif][]

学习过 [LayaAir 官网][https_ldc.layabox.com_doc_nav_zh-js-1-5-2] 的教程文档，即可以轻松制作好如上动画，动画名称命名为 bear1。

![20181220120025572.gif][]

1、为了降低动画运动的速度，将默认的帧率24改为5,

2、多动画时，强烈建议为每一个动画自定义命名，同时也应该为 每一个动画节点进行自定义命名，否则一单个 .ani 文件中动画多了之后会容易混淆。

3、动画创建好之后，同样按 F12 进行项目发布。最后开始进行编码。

//初始化引擎，设置舞台背景色
        Laya.init(600, 400,Laya.WebGL);
        Laya.stage.bgColor = "#2CB144";
    
        //创建 Animation 实例,bear1为左侧的小熊；bear2为右侧的小熊
        var bear1 = new Laya.Animation();
        var bear2 = new Laya.Animation();
        //动画的显示位置
        bear1.pos(20,30);
        bear2.pos(300,30);
    
        //加载图集成功后，执行onLoaded回调方法
        Laya.loader.load("res/atlas/bear.atlas", Laya.Handler.create(this, onLoaded));
        function onLoaded() {
            //加载动画文件
            bear1.loadAnimation("bear.ani");
            //添加到舞台
            Laya.stage.addChild(bear1);
            //播放Animation动画，默认使用播放方法play()的时候，缺省时播放第一个动画
            bear1.play();
            
            //加载动画文件
            bear2.loadAnimation("bear.ani");
            //添加到舞台
            Laya.stage.addChild(bear2);
            //第三个参数处设置动画名称即可播放指定名称的动画
            bear2.play(0,true,"bear2");
        }

# 帧动画 #

1、逐帧动画也是游戏中常用的动画之一，在时间轴中有两种逐帧动画的制作方式，这里只介绍在实际中使用比较广泛的第二种方式，详解介绍可以参考官网：[https://ldc.layabox.com/doc/?nav=zh-js-1-5-2][https_ldc.layabox.com_doc_nav_zh-js-1-5-2]

2、一次性创建方式：批量选中组件拖拽到时间轴上，会直接创建完成逐帧动画。接着只需要自己稍微调整关键帧的位置即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 6][]

3、这很类似《[LayaAir 图集动画2—动画运用][LayaAir _2]》，同样需要提前准备好关键帧图片，如上所示，一共准备了4张。

![20181220141505903.gif][]

4、这里新建一个动画文件 gongFu.ani，然后直接将资源面板中的图片资源一起拖动到时间轴就会自动生成关键帧，此时只需要自己将关键帧跳转为合适的位置，同理也可以设置每一个的属性，或者再自己创建其它的动画等等。

5、帧率降低到10，然后关键帧分别跳转到0,10,20,30的位置，然后在第40帧的位置再添加一张和第0帧一样的图片，这样的目的是使动画开始和结尾能衔接起来。

![20181220142901443.gif][]

6、最后按 F12 发布项目。bin目录下必须生成 res/atlas/gongfu.atlas 与 gongFu.png 文件，以及在 laya 目录下必须生成 pages/gongFu.ani 动画文件。代码调用和之前一样。

//初始化引擎，设置舞台背景色
        Laya.init(600, 400,Laya.WebGL);
        Laya.stage.bgColor = "#CC6633";
    
        //创建 Animation 实例
        var gongFu = new Laya.Animation();
        //动画的显示位置
        gongFu.pos(20,30);
    
        //加载图集成功后，执行onLoaded回调方法
        Laya.loader.load("res/atlas/gongFu.atlas", Laya.Handler.create(this, onLoaded));
        function onLoaded() {
            //加载动画文件
            gongFu.loadAnimation("gongFu.ani");
            //添加到舞台
            Laya.stage.addChild(gongFu);
            //播放Animation动画，默认使用播放方法play()的时候，缺省时播放第一个动画
            gongFu.play();
        }

![2018122014312083.gif][]

## 正反序播放 ##

1、学过了《[LayaAir 图集动画2—动画运用][LayaAir _2]》之后，发现其实这和图集动画基本一样，因为有了  .png 与 .atlas 文件使用图集动画的方式也可以进行播放

2、laya.display.Animation 继承自 AnimationPlayerBase  类，其中有一个 wrapMode 属性：

<table> 
 <tbody> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/index.html?category=Core&amp;class=laya.display.AnimationPlayerBase#wrapMode" rel="nofollow">wrapMode</a> : int = 0 <p>播放顺序类型：AnimationPlayerBase.WRAP_POSITIVE/0为正序播放，AnimationPlayerBase.WRAP_REVERSE/1为倒序播放，AnimationPlayerBase.WRAP_PINGPONG/2为pingpong播放(当按指定顺序播放完结尾后，如果继续播发，则会改变播放顺序)。 默认为正序播放。</p> </td> 
  </tr> 
 </tbody> 
</table>

//初始化舞台
        Laya.init(1334, 750,Laya.WebGL);
        //设置舞台背景色
        Laya.stage.bgColor = "#007ACC";
        
        //创建动画实例
        let gongFu1 = new Laya.Animation();
        let gongFu2 = new Laya.Animation();
        //设置精灵的位置
        gongFu1.pos(100,10);
        gongFu2.pos(300,10);
     
        //加载动画图集，加载成功后执行回调方法
        //Handler 是事件处理器类,create 从对象池内创建一个Handler，默认会执行一次并立即回收
        //制作好的图集文件 .atlas、.png 放入到 bin/res/atlas 目录下
        gongFu1.loadAtlas("res/atlas/gongFu.atlas",Laya.Handler.create(this,onLoaded1));
        function onLoaded1(){
            //添加到舞台
            Laya.stage.addChild(gongFu1);
            //设置播放间隔，单位毫秒，默认为 50。意思就是播放图集中的序列帧图像的间隔时间
            gongFu1.interval = 1000;	
            //播放动画，未使用wrapMode属性指定播放顺序时，默认是正序播放
            gongFu1.play();
        }
    
        gongFu2.loadAtlas("res/atlas/gongFu.atlas",Laya.Handler.create(this,onLoaded2));
        function onLoaded2(){
            //添加到舞台
            Laya.stage.addChild(gongFu2);
            //设置播放间隔，单位毫秒，默认为 50。意思就是播放图集中的序列帧图像的间隔时间
            gongFu2.interval = 1000;
            //指定动画为倒序播放，0：正序、1：倒序、2：乒乓式，即先由头到尾，在反过来由尾到头，循环往复
            gongFu2.wrapMode = 1;
            //播放动画
            gongFu2.play();
        }

![20181220150221949.gif][]

[20181220093754718.png]: /images/20220403/18e7296758ad4bbc9427eb2c8ca55fd3.png
[https_ldc.layabox.com_doc_nav_zh-js-1-5-2]: https://ldc.layabox.com/doc/?nav=zh-js-1-5-2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220403/598a1fb163474779bf4514a03fce6696.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1]: /images/20220403/9ac1de8b75bc4df88975d56fa8deac92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 2]: /images/20220403/8d9c8fad46194dcc94db664634b09f0a.png
[20181220102032339.png]: /images/20220403/612962d27b65401586a1558dbfe6a797.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 3]: /images/20220403/21d29358eaf94da69452b32dca031300.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 4]: /images/20220403/7fac64b8197940ab882b53b3a43693b7.png
[20181220104029391.gif]: /images/20220403/48512144d51e4cdd841ba3984263157d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 5]: /images/20220403/a057a580a3f64db29654f5f4a3c6ab28.png
[LayaAir _2]: https://blog.csdn.net/wangmx1993328/article/details/85037903
[20181220110323605.gif]: /images/20220403/7fa0823df1b7413d9170abba3242b76f.png
[20181220114029924.gif]: /images/20220403/726c8276a2da4e19a3af4b4e840b772a.png
[20181220114734480.gif]: /images/20220403/f568411a003d4d3292be8bef78b7ac56.png
[20181220120025572.gif]: /images/20220403/d9877486eae84d7495e7f194c3bf8a44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 6]: /images/20220403/1c897d91e93c4d65866dd9963360ef64.png
[20181220141505903.gif]: /images/20220403/30fcc584dfcd4b8cac7be91432d85efe.png
[20181220142901443.gif]: /images/20220403/bf82ee81ae8042358957a7c3688ff5ae.png
[2018122014312083.gif]: /images/20220403/125eee156888467a8b000a1f650c2228.png
[20181220150221949.gif]: /images/20220403/76697a16efa44f038473f73e9bc54635.png