笔记九 ：快速建立基本界面 + Egret制作转盘效果（基于通用MVC框架）
前言：
快速基本界面的编写直接跳到步骤二。
转盘效果是对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中，一个是指针的转，一个是转盘的转。
步骤四：编译与运行