MovieClip序列帧动画
MovieClip (MC) 又称之为 "影片剪辑"，是Egret中提供的一种动画解决方案。实际上 MC 所实现的功能就是播放序列帧动画。
实现一个动画效果时，可以把原有的动画制作成为能够被 Egret 识别的动画格式。然后将这些制作好的资源进行加载，最后播放。
1.制作 MovieClip 动画资源
Egret 提供三种方式制作 Egret 动画资源文件：
- 使用 TextureMerger 将 swf 或者 gif 文件转换成 Egret 动画资源文件。具体使用方法请查看：TextureMerger 使用说明
- 使用 DragonBones Pro 制作帧动画。
- Egret 为Flash提供了一个插件，这个插件可以将Flash中的动画导出为能够被Egret播放的动画文件。插件安装和使用方法请查看： MovieClip Plug-in
2.资源约定
MovieClip 需要一对 json 配置文件和一个纹理集图片。比如 abc.json 和 abc.png 。
- 配置文件约定了各个字段标识的用途，
- 纹理集图片为 MovieClip 所使用的图片集。
2.1.配置解析
{
"mc": {
"run": {
"frameRate": 24,
"events": [
{
"name": "@fall",
"frame": 6
}
],
"labels": [
{
"end": 8,
"name": "start",
"frame": 2
}
],
"frames": [
{
"res": "19236B52",
"x": 6,
"y": 13,
"duration": 3
}
]
}
},
"file": "abc.png",
"res": {
"19236B52": {
"x": 111,
"y": 1,
"w": 108,
"h": 131
}
}
}
- mc：MovieClip 所拥有的动作，比如这里的 run。
- run：一个动作名称，可以有多个。
- frameRate：播放的帧率。
- events：在某一帧下触发的事件。
- labels：标签，标记当前标签所持续的帧的情况。
- frames：当前动作的所有帧数据。
- run：一个动作名称，可以有多个。
- file：图集名称。
- res：纹理集数据。
2.2.资源配置
在Egret的资源配置文件（默认为 default.res.json）中，应该有如下配置：
"resources":
[
{"name":"abc.json","type":"json","url":"assets/abc.json"}
,{"name":"abc.png","type":"image","url":"assets/abc.png"}
......
]
3.使用
3.1.创建
egret 的 MovieClip 采用工厂模式，MovieClip 工厂类为： MovieClipDataFactory。
一个 MovieClip 工厂类对应一个MC资源合集。比如资源文件为 abc.json 和 abc.png。那么我们就可以在程序中把其解析到一个 MovieClip 工厂类：
const data = RES.getRes("abc.json");
const txtr = RES.getRes("abc.png");
const mcFactory: egret.MovieClipDataFactory = new egret.MovieClipDataFactory(data, txtr);
3.2.获取动作
比如上面的的 run，则在程序中解析该 MovieClip 的方法为：
const mc1: egret.MovieClip = new egret.MovieClip(mcFactory.generateMovieClipData("run"));
3.3.播放
帧标签播放
如果在 MovieClip run 中有名为 "start" 的帧标签，从这里播放 3 次，代码即为：
this.addChild(mc1);
mc1.gotoAndPlay("start", 3);
- 帧数播放 比如要从第3帧播放，代码为：
mc1.gotoAndPlay(3);
注意：为了避免可能的内存泄漏问题，MovieClip只有被加到显示列表上之后才能被正确的播放!
4.事件
4.1帧标签事件
比如在第动画的第 6 帧有一个 "fall" 帧事件标签，可以为动画增加监听获取这个消息
mc1.addEventListener(egret.MovieClipEvent.FRAME_LABEL, e, egret.MovieClipEvent, {
console, : .log(e.type, e.frameLabel, mc1.currentFrame)
}, this);
4.2.完成事件
比如要播放 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);
