ui界面如下圖所示：
代碼如下：
const { ccclass, property } = cc._decorator;
@ccclass
export default class UIJackpotScrollNum extends UIPrefab {
@property([cc.Node])
content: cc.Node[] = [];
@property
speed: number = 10;
private nowValue = []; //現在數字
private startPos = 0; //開始位置
private itemHeight = 0; //每個數字的高度
private needMoveNum = 0; //需要變動的數字個數
private successChangeNum = 0; //已經成功變動數字
private setNumFish = false; //設置變更數字完成
private scrollFishJackpotNum = 0; //滾動完成還獎池顯示數字
onLoad() {
this.itemHeight = this.content[0].height / 20;
this.startPos = this.itemHeight * 0.5;
this.setStartLocation(this.nowValue, this.content);
}
update() {
if(this.setNumFish){
if (this.needMoveNum == this.successChangeNum ) {
this.successChangeNum = 0;
DataService.getInstance().currJackpotShowNum = this.scrollFishJackpotNum;
let tempJackpotData = DataService.getInstance();
this.scrollFishJackpotNum = tempJackpotData.currJackpotNum;
if(tempJackpotData.currJackpotShowNum != tempJackpotData.currJackpotNum){
this.setValue(tempJackpotData.currJackpotNum, this.content);
}
}
}
}
//設置滾動數字
protected setValue(value: number, contentNode: cc.Node[]): void {
this.setNumFish = false;
this.needMoveNum = 0;
var temDate = this.getEachPosition(value);
for (var i = 0; i < contentNode.length; i++) {
if (temDate[i] != this.nowValue[i]) {
this.needMoveNum++;
this.rollingTo(temDate[i], contentNode[i], this.nowValue[i]);
this.nowValue[i] = temDate[i];
}
}
this.setNumFish = true;
}
//設置文字初始位置
public setStartLocation(num: number[], currentNode: cc.Node[]) {
for (var i = 0; i < currentNode.length; i++) {
currentNode[i].y = this.startPos + num[i] * this.itemHeight;
this.nowValue.push(0);
}
this.setNumFish = true;
}
//返回每個位置上的數字
protected getEachPosition(num: number) {
let temValue = num.toString();
var temDate = [];
for(var i = 0; i < this.content.length; i++){
temDate.push(0);
}
for (var i = this.content.length - 1; i > -1; i--) {
if (i < temValue.length) {
temDate[temValue.length - 1 - i] = parseInt(temValue.slice(i, i + 1));
} else {
temDate[i] = 0;
}
}
return temDate;
}
//數字滾動
protected rollingTo(value: number, contentNode: cc.Node, currentNum: number): void {
if (value < 0 || value > 9) {
return;
}
value = currentNum > value ? value + 10 : value;
var move_s = (value - currentNum) * this.itemHeight;
var time = move_s / this.speed;
var m = cc.moveTo(time, 0, contentNode.y + move_s);
m.easing(cc.easeCubicActionOut());
var endFunc = cc.callFunc(function () {
if (value >= 10) {
contentNode.y -= 10 * this.itemHeight;
}
this.successChangeNum++;
}.bind(this));
var seq = cc.sequence(m, endFunc);
contentNode.runAction(seq);
}
}
希望各位大神給點寶貴的意見！