LayaAir基础(7) 之 .ani动画文件
.ani动画文件
是将动画数据,翻译成了一个文件保存起来,当引擎加载的时候通过这个文件获取相应的数据即可加载动画显示
1.创建这个动画文件
和场景的建立方式是一样的,建立一个GraphicAnimation动画文件
F12导出后就会在laya--pages--.ani文件就存在了;
2.加载和控制动画文件
export default class FirstScene extends Laya.Scene {
constructor(){
super();
}
onEnable(){
Laya.loader.load("res/atlas/role.atlas",Laya.Handler.create(this,this.onResLoaded));
}
onResLoaded(){
this.roleAni = new Laya.Animation();
this.roleAni.loadAnimation("PersonAni.ani");//加载laya/pages下的ani文件;
this.dropPage.addChild(this.roleAni);//将动画效果添加到显示布局的正*;
this.roleAni.pos(this.dropPage.width/2,this.dropPage.height/2);//设置动画效果的显示位置;
this.roleAni.play(0,true,"stand");//播放动画效果,从第0帧开始,循环播放,动画名称;
this.upBox.on(Laya.Event.MOUSE_DOWN,this,this.onControl);
this.downBox.on(Laya.Event.MOUSE_DOWN,this,this.onDownBoxListener)
}
onDownBoxListener(e){
this.roleAni.play(0,true,e.target.name);
}
onControl(e){
console.log(e.target.name);//获取个编辑模式下给每一button设置name属性;
let posi = this.roleAni.index;//获取动画的当前帧的下标
switch(e.target.name){
case "play":
this.roleAni.play();
break;
case "stop":
this.roleAni.stop();
break;
case "up":
this.roleAni.stop();
if(--posi<0){
posi = this.roleAni.count-1;
}
this.roleAni.index=posi;
break;
case "next":
this.roleAni.stop();
if(++posi>this.roleAni.count-1){
posi = 0;
}
this.roleAni.index=posi;
break;
}
}
}