cocos creator学习12——高级UI制作

UI效果

节点准备

1、节点

2、设置mask组件

3、为mask节点绑定按钮组件

4、为Dlg_root绑定一个空的按钮事件，用于阻挡mask的按钮事件

否则会出现以下情况‘，用户无法在界面上操作

编写控制脚本

准备一个脚本文件，挂载到single节点上

属性properties准备

        mask:{//绑定mask节点
            type:cc.Node,
            default:null, 
        },
        container:{//用于绑定Dlg_root节点
            type:cc.Node,
            default:null,
        },
        mask_opacity:128, //mask透明度控制
        container_scale:1,//放大倍数
        mask_optime:0.1,//mask渐变时间
        contain_sctime:0.1,//界面渐变时间

渐入

Show_UI:function(){
        this.node.active = true;
      //mask渐变 使用fadeIn()
      this.mask.opacity = 0;
      var fin = cc.fadeTo(this.mask_optime,this.mask_opacity);
      this.mask.runAction(fin);
      //界面由小到大
      this.container.scale = 0;
      var s = cc.scaleTo(this.contain_sctime,this.container_scale).easing(cc.easeBackOut());
      this.container.runAction(s);
    },

淡出

Hide_UI:function(){
        var fout = cc.fadeOut(this.mask_optime);
        this.mask.runAction(fout);

        var s = cc.scaleTo(this.contain_sctime,0).easing(cc.easeBackIn());//添加缓动对象使动作变得好看
        var callback = cc.callFunc(function(){
            this.node.active = false;
        }.bind(this));
        var seq = cc.sequence([s,callback]);
        this.container.runAction(seq);
    },