【从0开始学Laya】11-2D动画系统

1.普通动画（手动单帧动画）

1）新建动画

1.新建动画

2)制作动画
要自己手动创建关键帧，调节物件的变化，笔者做了个手指的滑动效果

利用时间轴制作动画

3)导出动画

导出动画

4)使用动画
需要注意的是，如果是多张图片的动画，他会自动加载成图片集atlas，笔者用的是单张图片，所以类型是image

加载动画

2.图集动画（自动单帧动画）
这个动画比较简单，核心代码就那么几行
图集可以使用LayaAir IDE或者TexturePacker导出

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时自动切换至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); // 加载图集动画
            ani.interval = 30; // 设置播放间隔（单位：毫秒）
            ani.index = 1; // 当前播放索引
            ani.play(); // 播放图集动画

            // 获取动画的边界信息、锚点、位置，最后添加进舞台
            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动画
这个动画也是很简单的，值得注意的是
SWF由Flash IDE创建，这类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.骨骼动画
主要是利用Temlet类方法加载，最后通过不断的切换Skeleton的下一帧来实现动画的播放,骨骼动画一般由白鹭引擎等制作导出。

骨骼动画模式：
0：使用模板缓冲的数据，模板缓冲的数据，不允许修改（内存开销小，计算开销小，不支持换装）
1：使用动画自己的缓冲区，每个动画都会有自己的缓冲区，相当耗费内存。（内存开销大，计算开销小，支持换装）
2：使用动态方式，去实时去画（内存开销小，计算开销大，支持换装,不建议使用）
这三种模式中 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 {
            //创建模式为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);
           //注册监听，this.mArmature调用完play方法完成后会执行回调
            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帧，让动画重复播放
                this.mCurrIndex = 0;
            }    
            this.mArmature.play(this.mCurrIndex,false);
        
        }
    }
 }
new laya.MultiTexture();