Cocos Creator转盘抽奖

抽奖效果

搭建

素材

节点层级

控制脚本

const { ccclass, property } = cc._decorator;
@ccclass
export default class Choujiang extends cc.Component {

    @property(cc.Integer)
    num: number = 6;//转盘中分区数量
    
    @property(cc.Integer)
    rotateTime: number = 10;//转盘动画旋转次数

    @property(cc.Integer)
    time: number = 5;//抽奖动画持续时间

    isChoujiang: boolean = false;//是否正在抽奖

    @property(cc.Label)
    jianping: cc.Label = undefined;//中奖信息节点

    private StartChoujiang() {
        this.isChoujiang = true;
        // 随机确定奖品分区
        let index = Math.floor(Math.random() * this.num);
        // 过场动作
        let targetAngle = this.rotateTime * 360 + index * (360 / this.num);
        this.node.rotation %= 360;
        console.log(index * (360 / this.num));
        // 过场动作+缓入缓出
        let action = cc.rotateTo(this.time, targetAngle).easing(cc.easeCubicActionInOut());
        // 添加动作结束回调，显示中奖信息
        this.node.runAction(cc.sequence(action, cc.callFunc(() => {
            this.jianping.string = index.toString();
            this.isChoujiang = false;
        })));
    }

    public btnCallBack() { //按钮回调
        if (!this.isChoujiang) {
            this.StartChoujiang();
            this.jianping.string = "";
        }
    }
}