實現數字滾動增長效果

前言：

產品需求：針對數據總計做到動態的增長到后台返回的數據值。效果如同：https://www.uship.com/。

因為不同位置的增長速度不同，在網上看到都是用引入插件，例如jquery.animateNumber和numberGrow.js(實現了可見區域動態增長)，都有用法和效果展示。

但是希望使用原生js來實現，其實希望代碼少和不引用第三方js，然后看到說挖財App使用幾行js代碼實現了效果：

function countUp(elem, endVal, startVal, duration, decimal) {  
    //傳入參數依次為 數字要變化的元素，最終顯示數字，數字變化開始值，變化持續時間，小數點位數
    var startTime = 0;
    var dec = Math.pow(10, decimal);//返回10的decimal次冪
    var progress,value;
    function startCount(timestamp) {
        if(!startTime) startTime = timestamp;
        progress = timestamp - startTime;
        value = startVal + (endVal - startVal) * (progress / duration);
        value = (value > endVal) ? endVal : value;
        value = Math.floor(value*dec) / dec;
        elem.innerHTML = value.toFixed(decimal);
        // requestAnimationFrame告訴瀏覽器您希望執行動畫並請求瀏覽器在下一次重繪之前調用指定的函數來更新動畫,代替 setTimeout 實現動畫
        progress < duration && requestAnimationFrame(startCount)
    }
    requestAnimationFrame(startCount)
}

 

如果你需要在可見區域來執行數字的動態增長，有三個方案：

1.將函數綁定在 scroll 事件上，比較offsetTop 與 seeHeight + scrollTop 的大小。（scroll事件頻繁觸發）

2.可以對 lazyload 函數進行函數節流（throttle）與函數去抖（debounce）處理。(上面的numberGrow.js博客使用了scrollLazyInit進行懶加載)

3.使用 IntersectionObserver API，

var io = new IntersectionObserver(callback, option);//瀏覽器提供原生構造函數，觀察元素是否可見，callback是可見性變化時的回調函數，option是配置對象（該參數可選）。

　　

 

參考文章：延遲加載實現方式