筆記十 ：快速建立基本界面 + Egret製作轉盤效果（基於通用MVC框架）

 

 

前言：

快速基本界面的編寫直接跳到步驟二。

轉盤效果是對egret白鷺引擎動畫的功能進行一次應用，實現轉盤效果可以對動畫功能更好的理解，遊戲的隨機獎勵可以用轉盤效果來進行表現。

源代碼：筆記十Egret轉盤效果

演示效果：

 

 

步驟一：製作好素材，包括一個指針，一個按鈕，一個轉盤（隨手畫實現功能就行）

分別導出png圖

分別添加紋理後導出文件

把這兩個文件添加到：

\resource\assets\simple\Zhuanpan\並自動添加到default.res.json。

 

步驟二：快速建立基本界面

在通用MVC框架中（查看我的筆記一中如何下載搭建使用，或者參考我的源代碼。）

建立基本View，和對應的exml界面文件:
1.1 .\src\example\module\demo\zhuanpan\ZhuanpanView.ts

/**
 * Created by egret on 15-1-7.
 */
class ZhuanpanView extends BaseEuiView {
    public constructor($controller: BaseController, $parent: eui.Group) {
        super($controller, $parent);
        this.once(egret.Event.REMOVED_FROM_STAGE,this.dispose,this);
        this.skinName = "resource/skins/demo/Zhuanpan.exml";
    }

    closeBtn: eui.Button;
    arrCollection: eui.ArrayCollection;
    list:eui.List;
    
    public initUI(): void {
        this.closeBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onCloseBtn, this);
        this.initItemList();
    }

    /**初始化itemList組件 */
    private initItemList():void{
    }

    private onCloseBtn(): void {
        App.ViewManager.playcloseView(1,this);
    }

    public dispose():void{
        this.closeBtn.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onCloseBtn, this);
    }
}

1.1 界面文件： \resource\skins\demo\ZhuanpanSkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="ZhuanpanSkin" width="700" height="900" xmlns:e="http://ns.egret.com/eui"
        xmlns:w="http://ns.egret.com/wing">
	<e:Group width="610.66" height="837.33" anchorOffsetX="0" anchorOffsetY="0" horizontalCenter="-3.5" verticalCenter="-3.5">
		<e:Group width="608" height="835.33" verticalCenter="1.8349999999999795" horizontalCenter="-0.3299999999999841" anchorOffsetY="0" anchorOffsetX="0">
			<e:Rect fillColor="0x097993" width="596" x="11" bottom="2.330000000000041" top="16"  anchorOffsetX="0" anchorOffsetY="0"/>
			<e:Image source="table_box_down" x="0" bottom="0.3300000000000409" anchorOffsetX="0" width="608.67" />
			<e:Image source="table_box_up" x="0" top="0" anchorOffsetX="0" width="607" />
			<e:Image source="table_box_middle" x="0" top="46" bottom="93.33000000000004" anchorOffsetX="0" width="607.33"  anchorOffsetY="0"/>
		</e:Group>
		<e:Button id="closeBtn" label="" x="514.99" y="7" anchorOffsetX="0" width="72" scaleX="1" scaleY="1">
			<e:skinName>
			<e:Skin states="up,down,disabled">
				<e:Image width="100%" height="100%" source="btn_wrong" source.down="btn_wrong" source.disabled="btn_wrong"/>
				<e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0"/>
			</e:Skin>
			</e:skinName>
		</e:Button>
		<e:Group width="433.33" height="412.12" anchorOffsetX="0" anchorOffsetY="0" horizontalCenter="0" verticalCenter="0">
			<e:Image id="zhuanpan" anchorOffsetX="0" anchorOffsetY="0" source="zhuanpan3" fillMode="scale" horizontalCenter="0" verticalCenter="0"/>
			<e:Image id="zhizhen" source="zhuanpan2" horizontalCenter="0" verticalCenter="0" anchorOffsetX="300" anchorOffsetY="240"/>
			<e:Group id="zhuanpanBtn" width="100" height="100" anchorOffsetX="0" anchorOffsetY="0" horizontalCenter="0" verticalCenter="0">
				<e:Image verticalCenter="0" source="zhuanpan1" x="-256" y="-189.99999999999994" scaleX="1" scaleY="1"/>
			</e:Group>
		</e:Group>
	</e:Group>
</e:Skin>

2.建立基本Controller 

\src\example\module\demo\zhuanpan\ZhuanpanController.ts

/**
 * Created by egret on 15-1-7.
 */
class ZhuanpanController extends BaseController {
    private zhuanpanView:ZhuanpanView;

    public constructor() {
        super();
        this.zhuanpanView = new ZhuanpanView(this, LayerManager.UI_Popup);
        App.ViewManager.register(ViewConst.Zhuanpan, this.zhuanpanView);
    }
}

3.添加基本ViewConst

\src\example\consts\ViewConst.ts

/**
 * Created by Administrator on 2014/11/23.
 */
enum ViewConst{
    Loading = 10000,
    Login,
    Home,
    Friend,
    Shop,
    Warehouse,
    Factory,
    Task,
    Daily,
    Mail,
    Demo,
    TarBarDemo,
    ItemListDemo,
    FoldList,
    Zhuanpan,

    Game = 20000,
    GameUI,
    RpgGame,
}

4.DemoTest中添加上Controller的加載：

    /**
     * 初始化所有模塊
     */
    private initModule():void{
        App.ControllerManager.register(ControllerConst.Friend, new FriendController());
        App.ControllerManager.register(ControllerConst.Demo, new DemoController());
        App.ControllerManager.register(ControllerConst.TarbarDemo, new TarBarDemoController());      
        App.ControllerManager.register(ControllerConst.ItemListDemo, new ItemListDemoController());    
        App.ControllerManager.register(ControllerConst.FoldList, new FoldListDemoController());  
        App.ControllerManager.register(ControllerConst.Zhuanpan, new ZhuanpanController());  //這一行是要添加的東西，上面的幾行可以忽略
    }

5.以及ControllerConst添加一個配置

\src\example\consts\ControllerConst.ts

/**
 * Created by Administrator on 2014/11/23.
 */
enum ControllerConst{
    Loading = 10000,
    Login,
    Home,
    Friend,
    Shop,
    Warehouse,
    Factory,
    Task,
    Mail,
    Game,
    RpgGame,
    Demo,
    TarbarDemo,
    ItemListDemo,
    FoldList,
    Zhuanpan,
}

6.添加這個View面板的啓動（這是部分關鍵代碼，詳細代碼比如button的一些部分請看源代碼）

\src\example\module\demo\DemoView.ts

    private button4ClickHandler(e: egret.TouchEvent): void {
        //這是Config測試，配合按鈕三一起使用的
        // let jsonObj: Object = GameConfig.getInstance().config("status");
        // let item = jsonObj[1];
        // let name = item["name"];
        // console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", jsonObj);

        //這是打開摺疊菜單View的測試
        //App.ViewManager.playopen(1, ViewConst.FoldList);

        //這是打開轉盤View的測試
        App.ViewManager.playopen(1, ViewConst.Zhuanpan);
    }

 

步驟三：設置轉盤的動畫關鍵代碼

\src\example\module\demo\zhuanpan\ZhuanpanView.ts

    private zhuanpan: eui.Image;
    private zhizhen: eui.Image;
    private zhuanpanBtn: eui.Group;
    private isplaying:boolean = false;
    private _result:number = 0;

this.zhuanpanBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onZhuanpanClick,this);

 

    private onZhuanpanClick():void{
        this.turnTable(this._result)
    }

    /**指針轉到哪一項 */
    public turnTable(resultNum: number) {
		if (this.isplaying == false) {
			this.isplaying = true;
			let resultAngle = this._result * 45 + 5 * 360;
			this._result++;
			this.showAnimation(5000, resultAngle);
		}
	}

    //播放轉到多少角度的動畫
    private _tween: egret.Tween;
    public showAnimation(time: number, resultAngle: number): void {
        let self = this;
        //這個是指針轉
        //this._tween = egret.Tween.get(self.zhizhen).to({ rotation: resultAngle }, time, egret.Ease.cubicInOut).call(function () { self.isplaying = false; });//.call(this.endTurning, this);
        //這個是轉盤轉
        this._tween = egret.Tween.get(self.zhuanpan).to({ rotation: resultAngle }, time, egret.Ease.cubicInOut).call(function () { self.isplaying = false; });
    }

其中：resultAngle是決定最後轉到哪個角度停下來的參數。

其中一個關鍵的參數，tween動畫語句中有一個egret.Ease.cubicInOut,這個參數是決定動畫的開頭或者結尾的漸進的非線性變動。

比如cubicInOut代表緩慢啓動，到最後也緩慢停止。

其中還有很多參數分別代表其他的漸進動畫，可以Ctrl+Ease.cubicInOut查看。

兩行this._tween中，一個是指針的轉，一個是轉盤的轉。

 

步驟四：編譯與運行