layaAir之Animation类(AnimationPlayerBase )的使用

这次讲的是Animation类(AnimationPlayerBase )的一些属性的使用，其实有些属性是AnimationPlayerBase 类的。内容包括：

    1.加载资源，计算帧数count(也就是一共有多少张图片)，设置帧数的间隔interval，添加帧标签(给每张图片加上标签，这个有点用用来触发LABEL事件的)；

    2.play方法和gotoAndStop方法的使用，以及在play()时控制Animation的运动；

    3.LABEL事件的使用。

实现的代码如下：

// 程序入口

import text = Laya.Text;

import Ease = Laya.Ease;

import Animation = Laya.Animation;

class GameMain{

AniFn: any;

constructor()

{

Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);

Laya.stage.bgColor = '#fff';

Laya.DebugPanel.init();

this.AniFn = this.onLoad;

}

onLoad(){

let Ani: Animation = new Animation();

Ani.autoSize = true;

Laya.stage.addChild(Ani);

Ani.loadAtlas('res/atlas/a.atlas');

Ani.pos(0, Laya.stage.height - 136 >> 1);

console.log(Ani.count);

Ani.interval = 30;

        Ani.addLabel('AniPic3', 3);

Ani.addLabel('AniPic5', 5);

Ani.play(0, true);

Ani.on(Laya.Event.LABEL, this, function(ev: Laya.Event){console.log(`complte ` + ev)});

//Ani.gotoAndStop(5);

/* setInterval(() => {

if( Ani.x == Math.round(Laya.stage.width - 77) ) Ani.x = 0;

console.log(Ani.x += 1);

//console.log(`Ani.index: ` + Ani.index);

}, 30);*/

}

}

new GameMain().AniFn();

代码解析：

    1.Animation有几种加载资源的方式，我们这里选用loadAtlas方法加载，这种资源加载方式需要生成图集资源才可以使用，下面给出资源目录，a.atlas是我们现在使用的资源路径。interval设置的数值是毫秒级单位，addLabel设置了两个标签，是为了验证是否每play到添加的标签是否就会触发LABEL事件。

    2.在上面的基础上，我们就可以使用play方法让实例化的Ani动画化了!，接下来使用gotoAndStop(参数)方法定帧索引停止动画。帧索引从0开始算。

    3.先把gotoAndStop()注释掉，添加LABEL事件，同时写个定时器让Ani运动，这里定时器时间延迟设置为30ms，Interval也是30ms，这样就能在没切换一帧就能让Ani的x加1往右走一步。再上面，我们分别在帧索引3和5设置了帧标签用来测试是否每次play到这些帧标签都会触发到LABEL事件的，下面给出测试结果：

结果证明，我们如果给每个帧索引都设置了一个帧标签的话，那么那当play到这个帧标签时，都会触发到这个事件一次。上图中LABEL后面是我们设置帧标签的名字。