正文

在Cocos Creator游戏开发中，经常需要使用到弹出式对话框，下面我们就一起来封装下自己的弹出式对话框。

一、弹出式对话框原理解析

1:对话框的结构:

1. `根节点 -->`2. `mask: 全屏的单色精灵，监听事件，关闭对话框;`3. `dlg 与它的孩子: 对话框的内容,监听事件，挡住不让他传递到mask节点上;`4. `弹出时动画:`5. `mask: 渐变进来;`6. `对话框内容缩放,并加上easing缓动对象;`7. `收起时动画:`8. `mask: 渐变出去;`9. `对话框内容缩小，并加上easing 缓动对象;`

2: 对话框组件脚本

1. `(1)show_dlg`2. `(2)hide_dlg`

二、弹出式对话框控制组件

1. `const {ccclass, property} = cc._decorator;`3. `@ccclass`4. `export default class PopDialogCtrl extends ponent {`5. ` @property({type:cc.Node, tooltip:"弹出式对话框的遮罩节点"})`6. ` mask : cc.Node = null;`7. ` @property({type:cc.Node, tooltip:"弹出式对话框的主体内容节点"})`8. ` content : cc.Node = null;`9. ` @property({tooltip:"弹出式对话框初始化时的透明度"})`10. `maskOpacity : number = 200;`12. ` onLoad(){`13. ` this.node.active = false;`14. ` this.mask.opacity = this.maskOpacity;`15. `}`17. ` showDialog(){`18. ` this.node.active = true;`19. ` // mask淡入`20. ` this.mask.opacity = 0;`21. ` let fIn : cc.Action = cc.fadeTo(0.1, this.maskOpacity);`22. ` this.mask.runAction(fIn);`24. ` // content缩放显示`25. ` this.content.setScale(0, 0);`26. ` let s : cc.Action = cc.scaleTo(0.2, 1, 1).easing(cc.easeBackOut());`27. ` this.content.runAction(s);`28. ` }`29. ` hideDialog(){`30. ` // mask淡出`31. ` this.mask.opacity = 0;`32. ` let fOut : cc.Action = cc.fadeTo(0.3, 0);`33. ` this.mask.runAction(fOut);`34. ` // content缩放隐藏`35. ` let s : cc.Action = cc.scaleTo(0.4, 0, 0).easing(cc.easeBackIn());`36. ` let endf : cc.Action = cc.callFunc(function(){`37. ` this.node.active = false;`38. ` }.bind(this));`39. ` let seq : cc.ActionInterval = cc.sequence([s, endf]);`40. ` this.content.runAction(seq);`41. ` }`42. `}`

三、弹出式对话框UI制作

上面设置，可以保证点击遮罩层的时候隐藏对话框。

四、弹出式对话框组件的使用

新建GameMgr.ts挂载到Canvas节点上

1. `import PopDialogCtrl from "./PopDialogCtrl";`3. `const {ccclass, property} = cc._decorator;`4. `@ccclass`5. `export default class GameMgrextends ponent { `6. ` @property({type:PopDialogCtrl, tooltip:"弹出式对话框"})`7. ` popDialog : PopDialogCtrl = null;`8. ` showDialog(){`9. ` this.popDialog.showDialog();`10. ` }`11. `}`