风格3-转盘抽奖.png
环境说明:
1、Mac/Windows
2、使用Cocos Creator3.7.4<或以上>
效果如下:
turnLottery1-ezgif.com-optimize.gif
涉及资源目录结构如下：
目录结构.png
实现步骤如下：
1、创建一个Creator工程如LessonTurnLottery
2、创建resource/script/scene目录分别存放图片资源、场景、脚本资源
3、在scene文件夹创建scene常见
4、在script文件夹创建game.ts个TurnLotterItem.ts脚本文件
5、将脚本game.ts挂载到game场景
6、创建预制体TurnLotterItem并将TurnLotterItem.ts挂载到预制体上
7、开始实现具体逻辑：
A、game.ts脚本文件用来控制添加一个按钮点击触发转盘抽奖旋转逻辑；
B、TurnLotteryItem.ts脚本主要控制转盘抽奖的主要实现控制逻辑；
C、game.ts脚本文件中大致逻辑代码如下：
onClickStartLotteryBtnEvent() {
if(this.rewardTipLabel){
this.rewardTipLabel.string = "等待抽奖!!!";
}
director.emit(GoLotteryEvent, this);
}
D、TurnLotteryItem.ts脚本文件中大致主逻辑代码如下：
onGoLotteryEvent() {
if (this._isLottery) {
console.log(`<onGoLotteryEvent> 正在抽奖请等待此轮抽奖结束`);
return;
}
console.log(`<onGoLotteryEvent> `);
this._isLottery = true;
// 随机确定奖品分区
let index = Math.floor(Math.random() * this.rewardTypeCount);
// 过场动作 顺时针转
let targetAngle = -this.rotatelotterySecs * 360 + index * (360 / this.rewardTypeCount);
console.log(`<onGoLotteryEvent> 转盘角度之前: ${this.trunBgNode.angle}`);
this.trunBgNode.angle %= 360;
console.log(`<onGoLotteryEvent> 转盘角度之后: ${this.trunBgNode.angle}`);
console.log(`<onGoLotteryEvent> index: ${index} ,旋转角度： ${index * (360 / this.rewardTypeCount)}`);
// 过场动作+缓入缓出
if (this.trunBgNode) {
let tweenAction = tween().to(this.lotterySecs, { angle: targetAngle }, { easing: "cubicInOut" });
let tweenCallFunc = tween().call(() => {
director.emit(GetLotteryRewardRstEvent, { reward: index });
this._isLottery = false;
});
tween(this.trunBgNode).sequence(tweenAction, tweenCallFunc).start();
}
}
