前言：帧动画是游戏中最常用的的两种动画播放形式之一，其中一种是骨骼动画，一种就是帧动画了，在H5游戏中，帧动画一般用于UI界面的操作动画，人物技能，特效什么的。本笔记基于通用MVC框架，以及“笔记一”中的scene搭建的范例，基于源代码我的资源中的《笔记一到笔记七源代码》。
源代码：笔记八Egret帧动画
如图：
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();
//加载特效
if (this.mc1 == null) {
this.data = RES.getRes("testrong2_json");
this.txtr = RES.getRes("testrong2_png");
var mcFactory: egret.MovieClipDataFactory = new egret.MovieClipDataFactory(this.data, this.txtr);
this.mc1 = new egret.MovieClip(mcFactory.generateMovieClipData("zhendonghua"));
this.addChild(this.mc1);
this.mc1.gotoAndPlay("gongji", 3);
}else{
this.mc1.gotoAndPlay("gongji", 3);
}
}其中，this.data和this.txtr分别是我们生成的这两个文件的资源，mcFactory生成动画的工厂类，mc1则是生成的帧动画，
mc1.gotoAndPlay("gongji",3)其中的“gongji”是我们生成的动画中的动作名称。
“zhendonghua”是表示gongji上一级的目录，在json或者编辑器里面能找到这个名字
注意：如果代码运行失败，请检查编辑器的设定的两个名称是否按照教程严格设定，第一级修改为zhendognhua,第二级修改为gongji
另外附监听的东西：
比如在第动画的第 6 帧有一个 “@fall” 帧事件标签，我们还可以为动画增加监听获取这个消息
this.mc1.addEventListener(egret.MovieClipEvent.FRAME_LABEL,（e:egret.MovieClipEvent）=>{
console.log(e.type,e.frameLabel,this.mc1.currentFrame);//frame_label @fall 6
},this);
我们还可以获取动画播放完成的消息。比如要播放 3 次动画，每当动画循环播放完成一次，会调用一次 egret.Event.LOOP_COMPLETE 事件。3 次动画播放完后，会调用 egret.Event.COMPLETE 事件。
this.mc1.addEventListener(egret.Event.LOOP_COMPLETE, (e:egret.Event)=>{
console.log(e.type);//输出3次
}, this);
this.mc1.addEventListener(egret.Event.COMPLETE, (e:egret.Event)=>{
console.log(e.type);//1次
}, this);
另外 MovieClip 还支持帧序标签，比如我们要从第3帧播放，代码为：
mc1.gotoAndPlay( 3 );6.运行测试，并进行优化（去除白色背景）
用Photoshop打开文件夹中的文件：\resource\assets\animation\test\testrong2.png
用/菜单/选择/色彩范围
选中白色
菜单/编辑/剪切
然后保存替换到原来的testrong2.png
动画播放监听的官方讲解：
http://edn.egret.com/cn/article/index/id/596
