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;
              
        }
    }
}