筆記二 ：EgretH5通用MVC框架的入門操作：在scene中製造一個彈出菜單（UI部分）

前言：彈出菜單是遊戲中UI非常常見的一個部件，下面將用筆記一中創建的scene進行構建，效果圖如下：

源代碼：筆記二Egret彈出菜單

1.在\resource\skins\DemoSkin.exml文件中添加：

	<e:Group width="610.61" height="192.42" x="0" y="178.79" anchorOffsetX="0" anchorOffsetY="0">
		<ns1:Menu id="menu" x="78" y="37.21000000000001" skinName="MenuSkin" scaleX="1" scaleY="1" visible="false"/>
		<e:Rect id="maskRect" width="530.61" height="191.22" x="77.72" y="0" anchorOffsetX="0" anchorOffsetY="0" scaleX="1" scaleY="1"/>
		<e:ToggleButton id="menuBtn" label="切換按鈕" skinName="MenuButtonSkin" x="14" y="58.210000000000036" scaleX="1" scaleY="1"/>
	</e:Group>

 其中包括：一個ToggleButton按鈕，點擊後會發生變化的那種按鈕，自定義組件Menu，一個Rect矩形，是用來當作遮罩用的，可以使得Menu只在矩形範圍內才顯示。

DemoSkin.exml參考代碼：

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="DemoSkin" width="650" height="1000" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" xmlns:ns1="*">
	<e:Image width="362" height="48" x="19" y="232" anchorOffsetX="0" anchorOffsetY="0" source="table_cloud_top" fillMode="repeat" visible="false"/>
	<e:Group width="450" height="108" anchorOffsetX="0" anchorOffsetY="0" horizontalCenter="0" bottom="0">
		<e:Rect width="448" height="67" x="1.3199999999999932" y="42.24000000000001" fillColor="0xebfff8" anchorOffsetX="0" anchorOffsetY="0" scaleX="1" scaleY="1"/>
		<e:Image width="449" height="41.99" x="449.20000000000005" y="50.24000000000001" anchorOffsetX="0" anchorOffsetY="0" source="table_cloud_top" fillMode="repeat" rotation="180.16" scaleX="1" scaleY="1"/>
		<e:ToggleButton id="button" label="ToggleButton" x="45" y="32" anchorOffsetX="0" width="74" anchorOffsetY="0" height="75" skinName="MenuButtonSkin" scaleX="1" scaleY="1"/>
		<e:ToggleButton id="button2" label="ToggleButton" x="140.76" y="32" anchorOffsetX="0" width="74" anchorOffsetY="0" height="75" skinName="MenuButtonSkin" scaleX="1" scaleY="1"/>
		<e:ToggleButton id="button3" label="ToggleButton" x="237" y="32" anchorOffsetX="0" width="74" anchorOffsetY="0" height="75" skinName="MenuButtonSkin" scaleX="1" scaleY="1"/>
		<e:ToggleButton id="button4" label="ToggleButton" x="335" y="32" anchorOffsetX="0" width="74" anchorOffsetY="0" height="75" skinName="MenuButtonSkin" scaleX="1" scaleY="1"/>
	</e:Group>
	<e:Group width="610.61" height="192.42" x="0" y="178.79" anchorOffsetX="0" anchorOffsetY="0">
		<ns1:Menu id="menu" x="78" y="37.21000000000001" skinName="MenuSkin" scaleX="1" scaleY="1" visible="false"/>
		<e:Rect id="maskRect" width="530.61" height="191.22" x="77.72" y="0" anchorOffsetX="0" anchorOffsetY="0" scaleX="1" scaleY="1"/>
		<e:ToggleButton id="menuBtn" label="切換按鈕" skinName="MenuButtonSkin" x="14" y="58.210000000000036" scaleX="1" scaleY="1"/>
	</e:Group>
	<e:Group width="481.82" height="162.12" x="268.09" y="0" anchorOffsetX="0" anchorOffsetY="0">
		<e:Image width="354.76" height="130.62" x="17.36" y="18.78" anchorOffsetX="0" anchorOffsetY="0" source="menu_bg"/>
		<e:Rect width="83.63" height="85.16" x="38.73" y="41.51" anchorOffsetX="0" anchorOffsetY="0"  scaleX="1" scaleY="1" fillColor="0xffffff"/>
		<e:Rect width="167" height="19" x="157.41" y="71.56" anchorOffsetX="0" anchorOffsetY="0" fillColor="0xffffff"/>
		<e:Rect id="lowHpRect" width="167" height="19" x="157.41" y="71.56" anchorOffsetX="0" anchorOffsetY="0" fillColor="0xff0202"/>
		<e:Rect id="fastHpRect" width="167" height="19" x="157.41" y="71.56" anchorOffsetX="0" anchorOffsetY="0" fillColor="0xff7a7a"/>
		<e:Button id="addHP" label="+" x="175.24" y="105.67" anchorOffsetX="0" width="39" anchorOffsetY="0" height="38"/>
		<e:Button id="downHP" label="-" x="240.91" y="107.67" anchorOffsetX="0" width="33" anchorOffsetY="0" height="34"/>
	</e:Group>
</e:Skin>

 

2.在\src\example\module\demo\DemoView.ts中加入如下代碼：

    //展開菜單
    menuBtn: eui.Button;
    maskRect: eui.Rect;
    menu: Menu;

在initUI()函數中加入如下：

this.menuBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.menubuttonClickHandler, this);
//爲左邊的彈出菜單設定遮罩
this.menu.mask = this.maskRect;

設定點擊事件函數：

    /**左邊中間的那個摺疊菜單的按鈕事件 */
    private menubuttonClickHandler(e: egret.TouchEvent): void {
        let tween;
        let self = this;
        if (self.menu.$visible) {
            self.menuBtn.touchEnabled = false;//播放動畫時不可再次按按鈕
            tween = egret.Tween.get(this.menu).to({ scaleX: 1.0, scaleY: 1.0, x: 100 }, 0).to({ scaleX: 1.0, scaleY: 1.0, x: -400 }, 460).call(function () { self.menu.$setVisible(false); self.menuBtn.touchEnabled = true; });
        } else {
            self.menu.$setVisible(true);
            self.menuBtn.touchEnabled = false;//播放動畫時不可再次按按鈕
            tween = egret.Tween.get(this.menu).to({ scaleX: 1.0, scaleY: 1.0, x: -400 }, 0).to({ scaleX: 1.0, scaleY: 1.0, x: 100 }, 460).call(function () { self.menuBtn.touchEnabled = true; });
        }
    }

主要包含一個tween動畫的使用，配合遮罩，使得Menu從不見到可見。

使用tween時要注意self = this；的運用，不然容易出現錯誤，因爲tween中的this和函數外的this是兩個東西。

3.DemoView.ts參考代碼：（參考代碼中運行不了的代碼是後面筆記的東西，可以暫時刪掉）

/**
 * Created by egret on 15-1-6.
 */
class DemoView extends BaseEuiView {
    public constructor($controller: BaseController, $parent: eui.Group) {
        super($controller, $parent);
        this.skinName = "resource/skins/DemoSkin.exml";
    }

    button: eui.ToggleButton;
    //展開菜單
    menuBtn: eui.Button;
    maskRect: eui.Rect;
    menu: Menu;
    //hp,mp條
    lowHpRect: eui.Rect;
    fastHpRect: eui.Rect;
    addHP: eui.Button;
    downHP: eui.Button;
    //this.dispatchEvent(daterEvent);
    /**
     *對面板進行顯示初始化，用於子類繼承
     *
     */
    public initUI(): void {
        super.initUI();
        this.button.addEventListener(egret.TouchEvent.TOUCH_TAP, this.buttonClickHandler, this);
        this.menuBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.menubuttonClickHandler, this);
        this.addHP.addEventListener(egret.TouchEvent.TOUCH_TAP, this.addbuttonClickHandler, this);
        this.downHP.addEventListener(egret.TouchEvent.TOUCH_TAP, this.downbuttonClickHandler, this);
        GameDispatcher.getInstance().addEventListener(EventName.MAINBAR_CLOSE, this.restoreButton, this);//監聽界面的關閉

        //爲左邊的彈出菜單設定遮罩
        this.menu.mask = this.maskRect;
        //人物血條的變化
        this.initHpBar();
    }

    private buttonClickHandler(e: egret.TouchEvent): void {
        App.ViewManager.playopen(1, ViewConst.Friend);
    }
    /**左邊中間的那個摺疊菜單的按鈕事件 */
    private menubuttonClickHandler(e: egret.TouchEvent): void {
        let tween;
        let self = this;
        if (self.menu.$visible) {
            self.menuBtn.touchEnabled = false;//播放動畫時不可再次按按鈕
            tween = egret.Tween.get(this.menu).to({ scaleX: 1.0, scaleY: 1.0, x: 100 }, 0).to({ scaleX: 1.0, scaleY: 1.0, x: -400 }, 460).call(function () { self.menu.$setVisible(false); self.menuBtn.touchEnabled = true; });
        } else {
            self.menu.$setVisible(true);
            self.menuBtn.touchEnabled = false;//播放動畫時不可再次按按鈕
            tween = egret.Tween.get(this.menu).to({ scaleX: 1.0, scaleY: 1.0, x: -400 }, 0).to({ scaleX: 1.0, scaleY: 1.0, x: 100 }, 460).call(function () { self.menuBtn.touchEnabled = true; });
        }
    }
    //關閉窗口時候的按鈕恢復狀態
    private restoreButton(): void {
        console.log("restoreButton");
        this.button.selected = false;
    }

    //初始化initHpBar;
    private initHpBar():void{
        this.updateHpBar(1);
    }

    private HpBarNumNow:number = 0;//HP欄目前顯示的數值
    private HpBarV:number = 0.2;//Hp扣除時衰減的速度
    /**更新血條狀態 */
    private updateHpBar(NumUpdate: number): void { //需要更新成的數值
        let self = this;
        if (NumUpdate > self.HpBarNumNow) {//更新的數值大於目前的數值時的邏輯
            let tween;
            //第一個條同時進行緩慢增長,實心的那條
            egret.Tween.removeTweens(self.fastHpRect);//播放前先清除之前的動畫
            let tempHpNum:number = self.fastHpRect.scaleX;//動畫是從目前的長度開始進行
            tween = egret.Tween.get(self.fastHpRect).to({ scaleX: tempHpNum }, 0).to({ scaleX: NumUpdate }, 1200).call(function () { 
             });
            //第二個條同時進行緩慢增長
            egret.Tween.removeTweens(self.lowHpRect);//播放前先清除之前的動畫
            tempHpNum = self.fastHpRect.scaleX;//動畫是從目前的長度開始進行
            tween = egret.Tween.get(self.lowHpRect).to({ scaleX: tempHpNum }, 0).to({ scaleX: NumUpdate }, 1200).call(function () { 
             });
            self.HpBarNumNow = NumUpdate; //HP欄目前的數值進行更新
            console.log("這是之前的HpBarNumNow，NumUpdate",self.HpBarNumNow,NumUpdate);
        } else if(NumUpdate < self.HpBarNumNow){//更新的數值小於目前的數值時的邏輯
            let tween;
            let tempHpNum:number = self.lowHpRect.scaleX;//動畫是從目前的長度開始進行
            egret.Tween.removeTweens(self.lowHpRect);////播放動畫前先清除之前的動畫
            let t:number = (NumUpdate - tempHpNum)/this.HpBarV * 1000;//根據衰減時間計算衰減速度
            if(t < 0) t=-t;   //取絕對值
            tween = egret.Tween.get(self.lowHpRect).to({ scaleX: tempHpNum }, 0).to({ scaleX: NumUpdate }, t);
            egret.Tween.removeTweens(self.fastHpRect);////瞬變前先清除之前的動畫
            self.fastHpRect.scaleX = NumUpdate;   //血條減血時瞬變
            self.HpBarNumNow = NumUpdate;
        }
    }

    private tempnum = 1;
    private addbuttonClickHandler(): void {
        if ((this.tempnum + 0.2) <= 1.0) {
            this.tempnum += 0.2;
        }
        this.updateHpBar(this.tempnum);
    }

    private downbuttonClickHandler(): void {
        if ((this.tempnum - 0.2) >= 0) {
            this.tempnum -= 0.2;
        }
        this.updateHpBar(this.tempnum);
    }

}