前言：幀動畫是遊戲中最常用的的兩種動畫播放形式之一，其中一種是骨骼動畫，一種就是幀動畫了，在H5遊戲中，幀動畫一般用於UI介面的操作動畫，人物技能，特效什麼的。本筆記基於通用MVC框架，以及“筆記一”中的scene搭建的範例，基於原始碼我的資源中的《筆記一到筆記七原始碼》，最終原始碼之後會貼出來，如圖：

1.步驟一，找到一張幀動畫的gif，或者flash的swf檔案：（網上找的，學習使用，如有侵權，請聯絡刪除）

2.開啟Texture Merger,並新建一個專案，名為testrong2：

點選建立轉換動畫，並選擇gif檔案，以及修改動畫名稱，動作名稱：

點選匯出，會生成兩個檔案，testrong.json,testrong.png

3.把這兩個檔案放入\resource\assets\animation\test\資料夾中，

並開啟default.res.json,末尾需要有這些程式碼：

		{
			"name": "testrong2_json",
			"type": "json",
			"url": "assets/animation/test/testrong2.json"
		},
		{
			"name": "testrong2_png",
			"type": "image",
			"url": "assets/animation/test/testrong2.png"
		}

而且在頭部的key關鍵字後面需要有：

testrong2_json,testrong2_png

4.開啟\src\example\test\DemoTest.ts:  (新增preload資源的載入)

構建函式constructor中的subGroup，新增上preload關鍵字：

var subGroups:Array<string> = ["preload_core", "preload_ui", "preload_rpg","preload","preload_battle"];

DemoTest.ts參考程式碼：（原始碼參考範例一到範例七的原始碼，資源裡有）

/**
 * Created by yangsong on 15-3-27.
 * GUI測試
 */
class DemoTest{
    public constructor(){
        var groupName:string = "preload_DemoTest";
        var subGroups:Array<string> = ["preload_core", "preload_ui", "preload_rpg","preload","preload_battle"];
        App.ResourceUtils.loadGroups(groupName, subGroups, this.onResourceLoadComplete, this.onResourceLoadProgress, this);
    }

    /**
     * 資源組載入完成
     */
    private onResourceLoadComplete():void {
        this.initModule();
        App.Init();

        //音樂音效處理
        App.SoundManager.setBgOn(true);
        App.SoundManager.setEffectOn(!App.DeviceUtils.IsHtml5 || !App.DeviceUtils.IsMobile);

        //App.SceneManager.runScene(SceneConsts.UI);
        App.SceneManager.runScene(SceneConsts.Demo);
    }

    /**
     * 資源組載入進度
     */
    private onResourceLoadProgress(itemsLoaded:number, itemsTotal:number):void {
        App.ControllerManager.applyFunc(ControllerConst.Loading, LoadingConst.SetProgress, itemsLoaded, itemsTotal);
    }

    /**
     * 初始化所有模組
     */
    private initModule():void{
        App.ControllerManager.register(ControllerConst.Friend, new FriendController());
        App.ControllerManager.register(ControllerConst.Demo, new DemoController());
        App.ControllerManager.register(ControllerConst.TarbarDemo, new TarBarDemoController());      
         App.ControllerManager.register(ControllerConst.ItemListDemo, new ItemListDemoController());    
    }
}
 

5.開啟：\src\example\module\demo\DemoView.ts (新增播放幀動畫的程式碼)

找到  private button3ClickHandler(e: egret.TouchEvent): void 函式，這是主頁面點選第三個按鈕觸發的函式

    private data:any;
    private txtr:any;
 private button3ClickHandler(e: egret.TouchEvent): void {
        // GameConfig.getInstance().initConfig();
        //載入特效
        this.data = RES.getRes("testrong2_json");
        this.txtr = RES.getRes("testrong2_png");
        var mcFactory:egret.MovieClipDataFactory = new egret.MovieClipDataFactory( this.data, this.txtr );
        var mc1:egret.MovieClip = new egret.MovieClip( mcFactory.generateMovieClipData( "zhendonghua" ) );
        this.addChild( mc1 );
        mc1.gotoAndPlay("gongji",3)
    }

其中，this.data和this.txtr分別是我們生成的這兩個檔案的資源，mcFactory生成動畫的工廠類，mc1則是生成的幀動畫，

mc1.gotoAndPlay("gongji",3)其中的“gongji”是我們生成的動畫中的動作名稱。

6.執行測試，並進行優化（去除白色背景）

用Photoshop開啟資料夾中的檔案：\resource\assets\animation\test\testrong2.png

用/選單/選擇/色彩範圍

選中白色

選單/編輯/剪下

然後儲存替換到原來的testrong2.png

基於原始碼參考範例一到範例七的原始碼，資源裡有，完成好的原始碼之後會在我的資源貼出來。

另外：動畫播放的監聽在官方有講解：