?

?

前言：

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

轉盤效果是對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中，一個是指針的轉，一個是轉盤的轉。

?

步驟四：編譯與運行

總結

以上是生活随笔為你收集整理的笔记十 ：快速建立基本界面 + Egret制作转盘效果（基于通用MVC框架）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。