设计这样的一个动画,已知一个数字值,例如 num = 10000,动画效果:已进入页面的时候,数字以某种速度一直增加到10000为止。
下面提供两种思路。
1. 利用类似高数中的等比数列原理,设置一个比例值rate,当然该比例值的值域属于 (0 ,1),这样每进行一次乘法运算,值才会越来越小。第一次的结果为 result = num * rate,如果result <= num,则 计算left = num - result;再对left做乘法,并对result重新复制, result += left * rate,再判断result 和 num的大小,如果result < num,则继续。
详细代码如下:
countNum = {
_rate: 0.3,
_left: 1,
changeNum: 0,
_firstNum: 0,
_tmpNum: 0,
_firstTime: 1, // 判断是否是第一次计算
init: function(num) {
this._firstNum = num;
this.interval(); // 调用计算方法
},
compute: function() {
if(countNum._left === 0) { // 如果剩余差值为0,则结束循环调用
clearInterval(countNum.int);
} else {
if (countNum._firstTime === 1) { // 为1时,为第一次调用
countNum.changeNum = Math.ceil(countNum._firstNum * countNum._rate);
countNum._left = countNum._firstNum - countNum.changeNum;
countNum._firstTime = 0; // 设置标志为0
} else {
countNum.changeNum += Math.ceil(countNum._left * countNum._rate);
countNum._left = countNum._firstNum - countNum.changeNum;
}
// 输出该值或进行其他操作
console.log(countNum.changeNum);
}
},
interval: function() {
this.int = setInterval(this.compute, 100);
}
};
countNum.init(10000);
2. 第二种思路是,通过setTimeOut来实现,设定一个恒定的增值step,每次增加step,并有一个目前值和总数的比例,如果该比值大于0.95,则说明已经很接近总数,那么调整时间间隔为100,即放慢速度展示。
var Rank = {
// 初始化
init: function() {
var rank_num = 10000;
if(!rank_num) {
return;
}
if(typeof Number(rank_num) === "number") {
this._compute(rank_num);
}
},
// 按照一定规则计算
_compute:function(rank_num){
var timer, temp_num, step, rate;
// 第一次计算出一个初始值
temp_num = Math.round(rank_num/3*2);
// 每次增加数值
step = Math.round(Math.round(rank_num/2))/100;
// 循环更新temp_num的值
function _count(temp_num, step){
temp_num = Math.round(temp_num + step * Math.random());
// 调用 _show 方法
Rank._show(temp_num);
// 根据条件判断,改变方法执行的时间间隔
rate = (temp_num / rank_num > 0.95) ? 100 : 10;
timer = setTimeout(function(){
_count(temp_num, step);
},rate);
if (temp_num > rank_num) {
clearTimeout(timer);
Rank._show(rank_num);
}
}
_count(temp_num, step);
},
// 显示数字的变化情况
_show: function(temp_num) {
// 数字的变化
console.log(temp_num);
},
}; Rank.init();