LayaAir之動畫(動畫基礎)

一 : 準備素材

將素材放入laya/assets目錄中.本人新建一個animation文件夾專門放動畫素材.如下圖所示:

二 : 開始制作動畫

Ⅰ, GraphicAnimation動畫
①右擊Scenes -> 新建 -> 動畫 , 打開新建對話框

②設置動畫類型為GraphicAnimation,名稱為boy,如下圖所示:

③點擊確認會在Scenes中生成boy.ani文件,我將其放入移入了animation文件夾中.啟動時間軸的"動畫編輯模式",這樣就可以編輯動畫了.如下圖所示:

④修改動畫的動效名稱為:demo,如下圖所示:

⑤將boy資源文件夾拖動到時間軸上,可制作一個逐幀動畫,在第一幀重新定義一下x,y值,以確保動畫的中心點在boy的腳下,如下圖所示:

⑥導出動畫資源(以圖集形式) :如下圖所示:

在bin/res/atlas/animation下生成了動畫文件(這個laya文件夾有一種對應的關系):

三:顯示動畫(TS代碼)

①核心:

        this.boy = new Laya.Animation();
        // this.boy.loadAtlas("res/atlas/animation/boy.atlas" , Laya.Handler.create(this,this.showBoy));
        Laya.loader.load(
            "res/atlas/animation/boy.atlas",
            Laya.Handler.create(this,this.showBoy),
            null,
            Laya.Loader.ATLAS
        );
        private showBoy() : void{
                Laya.stage.addChild( this.boy );
                this.boy.x = 100;
                this.boy.y = 100;
                this.boy.loadAnimation("animation/boy.ani");
                let $event : Laya.Event = new Laya.Event();
             $event.type = Laya.Event.COMPLETE;
                this.boy.on( Laya.Event.COMPLETE , this , this.eventHandler, [$event]);
                this.boy.play(0,true,"demo");
        }
        private eventHandler( $e : Laya.Event) : void{
                    switch($e.type){
                        case Laya.Event.COMPLETE:
                                console.log(`boy 動畫播放完畢`);
                        break;
                    }
        }

結果:

②擴展
1'加入Label標簽:

2'代碼

        $event.type = Laya.Event.LABEL;
        this.boy.on( Laya.Event.LABEL , this , this.eventHandler,[$event]);

        private eventHandler( $e : Laya.Event , $value? : any) : void{
            switch($e.type){
                case Laya.Event.COMPLETE:
                console.log(`boy 動畫播放完畢`);
                break;
                case Laya.Event.LABEL:
                console.log(`Lab : ${$value}`);
                break;
            }
    }

結果:

~~~動畫顯示::::