creator小功能----简单实现一个带特效的弹框

creator打开和关闭弹框，都比较生硬；没有任何的效果，如果想弄个有效果的该怎么实现呢？

一个简单的布局如下：

button是个按钮，用于打开弹框；button按钮的事件：

pop_dlg是弹框的根节点：下面挂着一个全拼的遮罩mask和一个弹框dlg_root，并挂载弹框控制脚本

mask上挂载着按钮属性，用关闭弹框；

dlg_root上也挂载着按钮属性，不是没有实现；作用是防止mask点击穿透，即点击在弹框上的时候不关闭弹出来，当点击在mask区域时关闭。

 

代码实现如下：

//----pop_dlg.js----
// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },

        mask: {
            type: cc.Node,
            default: null,
        },

        mask_opacity: 128,

        content: {
            type: cc.Node,
            default: null,
        }
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {

    },

    show_dlg: function(){
        this.node.active = true;

        //mask渐变
        this.mask_opacity = 0;
        var fin = cc.fadeIn(0.4, this.mask_opacity);
        this.mask.runAction(fin);

        //dlg由小变大
        this.content.scale = 0;
        var s = cc.scaleTo(0.4, 1).easing(cc.easeBackOut());
        this.content.runAction(s);
    },

    hide_dlg: function(){
        //mask渐变
        var fout = cc.fadeOut(0.3);
        this.mask.runAction(fout);

        //dlg由大变小,easing缓动对象
        var s = cc.scaleTo(0.3, 0).easing(cc.easeBackIn());
        var end_func = cc.callFunc(function(){
            this.node.active = false;
        }.bind(this));
        var seq = cc.sequence([s, end_func]);
        this.content.runAction(seq);
    },

    // update (dt) {},
});

 

测试代码：

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

var pop_dlg = require("pop_dlg");

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },

        dlg: {
            type: pop_dlg,
            default: null,
        }
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {

    },

    on_show_dlg: function(){
        this.dlg.show_dlg();
    }

    // update (dt) {},
});