笔记十一 ：Egret动画式加载场景（基于通用MVC框架）

为了确保你能够顺利完成整个过程，以下是一些关键点和步骤的详细说明：

步骤一：理解需求

首先，明确你的需求是实现一个在加载新场景后，旧场景3秒后自动消失的功能，并且在此过程中播放一个动画。

步骤二：设置项目结构

确保你的项目结构清晰，包含以下主要文件和目录：

• src：源代码目录
  • module：模块目录
    • loading：加载模块
      • LoadingController.ts
      • LoadingView.ts
      • LoadingUISkin.exml
  • scene：场景目录
    • RpgGameScene.ts
  • utils：工具类目录（可选）
    • ResourceUtils.ts

步骤三：实现加载功能

1. ResourceUtils.ts：

   import { Resource } from "egret"; export class ResourceUtils { public static loadAssets(callback: Function): void { let assetAdapter = new egret.DefaultAssetAdapter(); egret.registerImplementation("eui.IAssetAdapter", assetAdapter); RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this); RES.loadConfig("resource/default.res.json", "resource/"); } private static onResourceLoadComplete(event: RES.ResourceEvent): void { if (event.groupName == "preload") { callback(); } } } 

2. App.ts：

   import { ResourceUtils } from "./utils/ResourceUtils"; export class App extends egret.DisplayObjectContainer { public constructor() { super(); this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this); } private onAddToStage(event: egret.Event): void { ResourceUtils.loadAssets(() => { this.startGame(); }); } private startGame(): void { let loadingController = new module.loading.LoadingController(this.stage); this.addChild(loadingController.view); setTimeout(() => { loadingController.closeLoading(); // 加载新场景 this.removeChild(loadingController.view); let rpgGameScene = new scene.RpgGameScene(); this.addChild(rpgGameScene); }, 3000); } } 

步骤四：实现动画播放

1. LoadingView.ts：

   import { eui } from "egret"; import { egret } from "egret"; export class LoadingView extends eui.Component { public zuoRect: eui.Rect; public youRect: eui.Rect; public txtMsg: eui.Label; private flag: boolean = true; constructor(controller: module.loading.LoadingController, layer: BaseEuiLayer) { super(); this.layer = layer; this.controller = controller; this.initUI(); } private initUI(): void { this.zuoRect = new eui.Rect(694.67, 1065.34, 0xf4f4f4); this.youRect = new eui.Rect(659.67, 1052, 0xffffff); this.txtMsg = new eui.Label("资源加载中...", { size: 40, textColor: 0x000000, bold: true }); this.addChild(this.zuoRect); this.addChild(this.youRect); this.addChild(this.txtMsg); this.addEventListener(eui.UIEvent.CHANGE, this.onProgressChange, this); } public setProgress(current: number, total: number): void { this.txtMsg.text = "资源加载中..." + current + "/" + total; if (current == total) { this.playDoneAnimation(); } } private playDoneAnimation(): void { if (this.flag) { this.flag = false; let self = this; let temp1x = self.zuoRect.x; let Tween1 = egret.Tween.get(self.zuoRect).to({ x: temp1x - 600, alpha: 1.0 }, 2000); let temp2x = self.youRect.x; let Tween2 = egret.Tween.get(self.youRect).to({ x: temp2x + 600, alpha: 1.0 }, 2000); let Tween3 = egret.Tween.get(self.txtMsg).to({ alpha: 0 }, 1400); } } private onProgressChange(event: eui.UIEvent): void { this.setProgress(this.controller.progress, this.controller.total); } } 

2. LoadingController.ts：

   import { eui } from "egret"; import { egret } from "egret"; export class LoadingController { public progress: number = 0; public total: number = 10; // 假设有10个资源需要加载 constructor(public stage: egret.Stage) {} public view: module.loading.LoadingView; public openLoading(): void { this.view = new module.loading.LoadingView(this, this.stage); this.stage.addChild(this.view); } public closeLoading(): void { if (this.view) { this.stage.removeChild(this.view); this.view = null; } } } 

步骤五：测试功能

1. 运行项目：
   • 确保所有资源文件（如 default.res.json 和其他图片、音效等）都放在正确的目录中。
   • 运行项目，观察加载过程和动画播放效果。

通过以上步骤，你应该能够实现一个在加载新场景后，旧场景3秒后自动消失并播放动画的功能。如果在过程中遇到任何问题，请检查代码逻辑和资源配置是否正确。