兩種思路用javascript實現實現簡單的數字滾動動畫

設計這樣的一個動畫，已知一個數字值，例如 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();