1.普通動(dòng)畫（手動(dòng)單幀動(dòng)畫）

1）新建動(dòng)畫

1.新建動(dòng)畫

2)制作動(dòng)畫
要自己手動(dòng)創(chuàng)建關(guān)鍵幀，調(diào)節(jié)物件的變化，筆者做了個(gè)手指的滑動(dòng)效果

利用時(shí)間軸制作動(dòng)畫

3)導(dǎo)出動(dòng)畫

導(dǎo)出動(dòng)畫

4)使用動(dòng)畫
需要注意的是，如果是多張圖片的動(dòng)畫，他會(huì)自動(dòng)加載成圖片集atlas，筆者用的是單張圖片，所以類型是image

加載動(dòng)畫

2.圖集動(dòng)畫（自動(dòng)單幀動(dòng)畫）
這個(gè)動(dòng)畫比較簡(jiǎn)單，核心代碼就那么幾行
圖集可以使用LayaAir IDE或者TexturePacker導(dǎo)出

module laya 
{
    import Animation = Laya.Animation;
    import Stage = Laya.Stage;
    import Rectangle = Laya.Rectangle;
    import Loader = Laya.Loader;
    import Browser = Laya.Browser;
    import WebGL = Laya.WebGL;

    export class Animation_Altas {
        private AniConfPath: string = "res/fighter/fighter.json";

        constructor() {
            // 不支持eWebGL時(shí)自動(dòng)切換至Canvas
            Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);

            Laya.stage.alignV = Stage.ALIGN_MIDDLE;
            Laya.stage.alignH = Stage.ALIGN_CENTER;

            Laya.stage.scaleMode = "showall";
            Laya.stage.bgColor = "#232628";

            ProtoBuf.load(this.AniConfPath, this.createAnimation);
        }

        private createAnimation(): void {
            var ani: Animation = new Animation();
            ani.loadAtlas(this.AniConfPath); // 加載圖集動(dòng)畫
            ani.interval = 30; // 設(shè)置播放間隔（單位：毫秒）
            ani.index = 1; // 當(dāng)前播放索引
            ani.play(); // 播放圖集動(dòng)畫

            // 獲取動(dòng)畫的邊界信息、錨點(diǎn)、位置，最后添加進(jìn)舞臺(tái)
            var bounds: Rectangle = ani.getGraphicBounds();
            ani.pivot(bounds.width / 2, bounds.height / 2);
            ani.pos(Laya.stage.width / 2, Laya.stage.height / 2);
            Laya.stage.addChild(ani);
        }
    }
}
new laya.Animation_Altas()

3.swf動(dòng)畫
這個(gè)動(dòng)畫也是很簡(jiǎn)單的，值得注意的是
SWF由Flash IDE創(chuàng)建，這類SWF不能包含代碼

private SWFPath: string = "res/swf/dragon.swf";     
private createMovieClip(): void {
    var mc: MovieClip = new MovieClip();
    mc.load(this.SWFPath);
    mc.x = (Laya.stage.width - this.MCWidth) / 2;
    mc.y = (Laya.stage.height - this.MCHeight) / 2;
    Laya.stage.addChild(mc);
}

4.骨骼動(dòng)畫
主要是利用Temlet類方法加載，最后通過不斷的切換Skeleton的下一幀來實(shí)現(xiàn)動(dòng)畫的播放,骨骼動(dòng)畫一般由白鷺引擎等制作導(dǎo)出。

骨骼動(dòng)畫模式：
0：使用模板緩沖的數(shù)據(jù)，模板緩沖的數(shù)據(jù)，不允許修改 （內(nèi)存開銷小，計(jì)算開銷小，不支持換裝）
1：使用動(dòng)畫自己的緩沖區(qū)，每個(gè)動(dòng)畫都會(huì)有自己的緩沖區(qū)，相當(dāng)耗費(fèi)內(nèi)存。（內(nèi)存開銷大，計(jì)算開銷小，支持換裝）
2：使用動(dòng)態(tài)方式，去實(shí)時(shí)去畫（內(nèi)存開銷小，計(jì)算開銷大，支持換裝,不建議使用）
這三種模式中 0:不支持換裝,1,2支持換裝。

module laya {
    import Skeleton = Laya.Skeleton;
    import Templet  = Laya.Templet;
    import Event    = Laya.Event;
    import Browser  = Laya.Browser;
    import Stat     = Laya.Stat;
    import WebGL    = Laya.WebGL;

    export class MultiTexture {
        private mAniPath:string;
        private mStartX:number = 400;
        private mStartY:number = 500;
        private mFactory:Templet;
        private mActionIndex:number = 0;
        private mCurrIndex:number = 0;
        private mArmature:Skeleton;
        private mCurrSkinIndex:number = 0;

        constructor() {
            WebGL.enable();
            Laya.init(Browser.width, Browser.height);
            Laya.stage.bgColor = "#ffffff";
            Stat.show();
            this.startFun();
        }
        public startFun():void
        {
          this.mAniPath = "res/spine/spineRes1/dragon.sk";
          this.mFactory = new Templet();
          this.mFactory.on(Event.COMPLETE, this, this.parseComplete);
          this.mFactory.on(Event.ERROR, this, this.onError);
          this.mFactory.loadAni(this.mAniPath);
        }
    
        private onError():void
        {
            console.log("error");
        }
    
          private parseComplete():void {
            //創(chuàng)建模式為1，可以啟用換裝
            this.mArmature =this.mFactory.buildArmature(1);
            this.mArmature.x = this.mStartX;
            this.mArmature.y = this.mStartY;
            this.mArmature.scale(0.5, 0.5);
            Laya.stage.addChild(this.mArmature);
           //注冊(cè)監(jiān)聽，this.mArmature調(diào)用完play方法完成后會(huì)執(zhí)行回調(diào)
            this.mArmature.on(Event.STOPPED, this, this.completeHandler);
            this.play();
        }
    
        private completeHandler():void
        {
            this.play();
        }
    
        private play():void
        {
            //切換下一幀
            this.mCurrIndex++;
            if (this.mCurrIndex >= this.mArmature.getAnimNum())
            {
                //重置到第0幀，讓動(dòng)畫重復(fù)播放
                this.mCurrIndex = 0;
            }    
            this.mArmature.play(this.mCurrIndex,false);
        
        }
    }
 }
new laya.MultiTexture();