5弹出阴影遮罩_千文详述Cocos Creator弹出式对话框实现技术，着实硬核

正文

在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 cc.Component {`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 cc.Component {    `6.  `    @property({type:PopDialogCtrl, tooltip:"弹出式对话框"})`7.  `    popDialog : PopDialogCtrl = null;`8.  `    showDialog(){`9.  `        this.popDialog.showDialog();`10.  `    }`11.  `}`