非滚动动画。实现了一版,不过好像不是很好看的样子,姑且放上来。
效果:
代码:
let target = this.editBox.getComponent(cc.EditBox).string;
//跳动动画
let now = this.textNode.getComponent(cc.Label).string;
//将数字切割成一个一个的
let breakUp = (num)=>{
if(typeof num == 'number') num = num + '';
let arr = [];
for(let i = num.length - 1; i >= 0; --i){
arr.push(num[i]);
}
return arr;
}
let targetArr = breakUp(target);
let nowArr = breakUp(now);
let max = 0;
let arr = targetArr.length > nowArr.length ? targetArr : nowArr;
//选出最长
for(let i = 0; i < arr.length; ++i){
let t = targetArr[i] ? targetArr[i] : 0;
let n = nowArr[i] ? nowArr[i] : 0;
let diff = t < n ? (10 - parseInt(n) + parseInt(t)) : t - n; //如果目标数比原来的数小,那就要绕一圈,例: 7 -> 2 ,要 8,9,0,1,2
if(max < diff) max = diff;
}
console.log('max值:',max)
//进行动画,0.1秒更新一次文本 形成跳动感觉
let index = 0;
this._updateText = ()=>{
++index;
let text = ""; //将要显示的文本
for(let i = arr.length -1; i >= 0; --i){ //由于是从后往前记录的,现在也要从后往前拼接
let n = parseInt(nowArr[i] ? nowArr[i] : 0) + index;
if(targetArr[i] < nowArr[i]){
n = n >= 10 ? n - 10 : n; //转一圈
n = n > targetArr[i] && n < nowArr[i] ? targetArr[i] : n; //如果超过目标值
console.log('n的值:',n,i,index)
}else{
n = n >= targetArr[i] ? targetArr[i] : n; //如果大于目标值,则等于目标值
}
if(targetArr[i] == undefined) continue;
text += n +'';
}
this.textNode.getComponent(cc.Label).string = text;
if(index >= max) this.unschedule(this._updateText);
}
this.schedule(this._updateText,0.1);