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);
    },
           

也可以加下Q群 一起讨論學習 點選下面連結即可加群

加群連結