上一篇文章是转盘式抽奖，但是常见的抽奖还有另一种，就是光环在所有奖品上循环，最后定格在抽中的奖品上，我称之为跑马灯式（才疏学浅，实在不知道该怎么说这种方式），下边简要展示下。
1、准备素材：
（咳咳，发现无法上传导入文件，此步骤略过）；
2、布置好UI如下图：
我弄的圆形，当然你也可以弄成矩形、三角形、蛇形、一字型等任意形状，都是满足的，哈哈。
3、代码准备：
调用初始化方法（在后边的图里面有），写好抽奖按钮的方法；
下边这个是重头戏，抽奖的前端展示效果的方法；
这是重置按钮的方法和上边说的初始化方法；
4、将相关的节点在creator编辑器里面和脚本的方法绑定好（俗称拖入、选择）；
绑定按钮事件方法：
显示的文本框的设置：
遮罩设置（防止转动过程中可以操作）：
5、为了方便复制君，下边是代码版（可直接复制）：
cc.Class({
extends: cc.Component,
properties: {
//奖品的容器
Arr_Node: {
default: [],
type: cc.Node,
},
//光环
guangHuan: {
default: null,
type: cc.Node,
},
//抽奖结果文本
txt_luckyResult: {
default: null,
type: cc.Label,
},
//遮罩
img_zhezhao: {
default: null,
type: cc.Node,
},
},
start() {
//调用初始化方法
this.refreshData();
},
/**
* 点击抽奖按钮
*/
onClickRepetition() {
console.log("开始抽奖，不能点击");
//显示遮罩，抽奖结束前不可点击
this.img_zhezhao.active = true;
//抽奖结果
let luckyResult = Math.floor(Math.random() * this.Arr_Node.length);
console.log("抽奖结果==", luckyResult);
//修改文本显示
this.txt_luckyResult.string = "最后结果肯定是:" + luckyResult + "，不信你看";
this.repetition(luckyResult);
},
/**
* 抽奖的前端效果展示
* @param {*} luckyResult 抽奖结果
*/
repetition(luckyResult) {
this.scheduleOnce(() => {
this.index++;
//循环到最后一个值之后从0开始
if (this.index >= this.Arr_Node.length) {
this.index = 0;
}
//空转三圈，大于三圈之后开始增加间隔时间达到减速的效果
if (this.loopCount >= this.Arr_Node.length * this.circleCount) {
//加速度，为最大时间间隔➗空转之外需要运行的间隔（空转之外需要运行的间隔是一圈➕抽奖的结果）
this.delayTime += this.delayTime_max / (luckyResult + this.Arr_Node.length);
}
//当前运行次数++
this.loopCount++;
//总的运行次数 = 空转三圈 + 一圈缓冲 + 抽奖结果
this.count = this.Arr_Node.length * (this.circleCount + 1) + luckyResult;
//判断是不是运行完了
if (this.loopCount > this.count) {
//隐藏遮罩
this.img_zhezhao.active = false;
this.txt_luckyResult.string = "是不是" + luckyResult + "，哈哈！";
return;
} else {
//切换光环位置
this.guangHuan.position = this.Arr_Node[this.index].position;
//重新调用本方法（因为schedule不能动态修改运行间隔时间）
this.repetition(luckyResult);
}
}, this.delayTime, 0); //执行次数为0，实际执行次数为1
},
/**
* 重置按钮
*/
onClickRefresh() {
console.log("点击重置按钮");
//调用初始化方法
this.refreshData();
},
/**
* 初始化数据
*/
refreshData() {
this.index = 0; //当前光环在哪个奖品上
this.guangHuan.position = this.Arr_Node[this.index].position; //初始化光环位置
this.delayTime = 0.1; //开始的时候延迟调用的时间(最小时间间隔)
this.delayTime_max = 1.5; //最大时间间隔
this.addOrSub = false; //增加还是减少的bool值
this.loopCount = 0; //循环次数
this.circleCount = 3; //前面循环的圈数（效果圈，只为效果，和奖品无关）
this.txt_luckyResult.string = "快点抽，无限抽";
this.img_zhezhao.active = false; //遮罩隐藏
},
}
最后附上效果图：
以上为全部内容，如有问题，欢迎指正，共同学习，谢谢。
