笔记八 ：EgretH5通用MVC框架的入门操作：制作并播放帧动画（UI部分）
在使用 Egret 框架创建和播放帧动画时，你已经正确地设置了资源、工厂类以及动画的播放。为了进一步优化动画效果并确保动画能够正确运行，以下是一些建议和步骤：
1. 确保资源路径正确
首先，确认你在 DemoView.ts 中引用的资源名称和路径是正确的。例如：
this.data = RES.getRes("testrong2_json"); this.txtr = RES.getRes("testrong2_png"); 确保这些资源在你的项目中已经正确加载。
2. 设置动画循环次数
如果你希望动画播放多次，可以在 gotoAndPlay 方法中设置循环次数。例如：
this.mc1.gotoAndPlay("gongji", -1); // 循环播放 // 或者指定循环次数 this.mc1.addEventListener(egret.Event.LOOP_COMPLETE, () => { console.log("动画完成一次"); }, this); 3. 监听动画事件
你可以监听多种事件来获取动画的播放状态，例如：
MovieClipEvent.FRAME_LABEL：当帧标签被触发时。egret.Event.LOOP_COMPLETE：每次循环播放完成后。egret.Event.COMPLETE：整个动画播放完成后。
this.mc1.addEventListener(egret.MovieClipEvent.FRAME_LABEL, (e: egret.MovieClipEvent) => { console.log(e.type, e.frameLabel, this.mc1.currentFrame); }, this); this.mc1.addEventListener(egret.Event.LOOP_COMPLETE, () => { console.log("动画循环完成一次"); }, this); this.mc1.addEventListener(egret.Event.COMPLETE, () => { console.log("动画播放完成"); }, this); 4. 去除白色背景
在 Photoshop 中去除图片的白色背景是一个常见的优化步骤。你可以按照以下步骤操作：
- 打开图片文件（
testrong2.png）。 - 使用“色彩范围”工具选择白色区域。
- 编辑 -> 剪切，删除选中的白色部分。
- 保存并替换原来的图片文件。
5. 调试和优化
在运行测试时，检查控制台是否有任何错误信息。如果没有错误，可以进一步优化动画效果，例如调整帧率、调整播放速度等。
6. 注意事项
- 确保你的 JSON 文件中定义的动作名称（如 "gongji"）与你在编辑器中设置的一致。
- 如果使用的是第三方工具生成的资源，确保工具的版本和设置与 Egret 框架兼容。
通过以上步骤，你应该能够成功播放帧动画并进行必要的优化。如果在运行过程中遇到问题，请仔细检查每一步是否正确执行，并参考 Egret 的官方文档获取更多帮助。
