JavaScript实现数字动态变化效果

我在手机上使用挖财记账 APP,左右滑动页面时首屏上的三个数字都会同时做动态滚动,从零渐增到当前数字,整个动画效果大概在 500ms 内完成,三个数字同时结束滚动。尝试用JS实现这个效果。 挖财截图 下面是效果演示

56690.35
12345.66
2563.00

只用几行JS代码就能实现效果。原理也是很简单,触发事件后将数字变成 0,然后以逐步增加到最终显示的数值。这里使用 requestAnimationFrame 方法代替 setTimeout 实现动画。

function countUp(elem, endVal, startVal, duration, decimal) {  
    //传入参数依次为 数字要变化的元素,最终显示数字,数字变化开始值,变化持续时间,小数点位数
    var startTime = 0;
    var dec = Math.pow(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);
        progress < duration && requestAnimationFrame(startCount)
    }
    requestAnimationFrame(startCount)
}