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后面是我们设置帧标签的名字。