数增量的动画时间慢如数字增加

Question

我有一个计数代码在这里：

HTML：

<div id="value">700</div> 
<div id="value2">1000</div> 

的JavaScript：

function animateValue(id, start, end, duration) { 
    var start= 0 ; 
    var end = parseInt(document.getElementById(id).textContent, 10); 
    var duration = 10000; 
    var range = end - start; 
    var current = start; 
    var increment = end > start? 1 : -1; 
    var stepTime = Math.abs(Math.floor(duration/range)); 
    var obj = document.getElementById(id); 
    var timer = setInterval(function() { 
     current += increment; 
     obj.innerHTML = current; 
     if (current == end) { 
      clearInterval(timer); 
     } 
    }, stepTime); 
} 
animateValue("value2",0,0,0); 
animateValue("value",0,0,0); 

在这段代码中的数字从0开始到结束持续时间10000ms。当它接近结束时，我怎么能设置这个持续时间比这慢呢？

例如：

编号：0到100

持续时间：50毫秒到10ms。

Answer 1

使用一些缓动功能，而不是以恒定速率递增。

但是，请注意，由于值的每个增量需要一些执行时间，因此使用此方法未考虑到您的总执行时间可能总是至少有些不准确。问题因价值较高而加剧。

//No easing 
 
function constant (duration, range, current) { 
 
    return duration/range; 
 
} 
 

 
//Linear easing 
 
function linear (duration, range, current) { 
 
    return ((duration * 2)/Math.pow(range, 2)) * current; 
 
} 
 

 
//Quadratic easing 
 
function quadratic (duration, range, current) { 
 
    return ((duration * 3)/Math.pow(range, 3)) * Math.pow(current, 2); 
 
} 
 

 
function animateValue(id, start, duration, easing) { 
 
    var end = parseInt(document.getElementById(id).textContent, 10); 
 
    var range = end - start; 
 
    var current = start; 
 
    var increment = end > start? 1 : -1; 
 
    var obj = document.getElementById(id); 
 
    var startTime = new Date(); 
 
    var offset = 1; 
 
    var remainderTime = 0; 
 
    
 
    var step = function() { 
 
    current += increment; 
 
    obj.innerHTML = current; 
 
    
 
    if (current != end) { 
 
     setTimeout(step, easing(duration, range, current)); 
 
    } 
 
    else { 
 
     console.log('Easing: ', easing); 
 
     console.log('Elapsed time: ', new Date() - startTime) 
 
     console.log(''); 
 
    } 
 
    }; 
 
    
 
    setTimeout(step, easing(duration, range, start)); 
 
} 
 

 
animateValue("value", 0, 10000, constant); 
 
animateValue("value2", 0, 10000, linear); 
 
animateValue("value3", 0, 10000, quadratic);

<div id="value">100</div> 
 
<div id="value2">100</div> 
 
<div id="value3">100</div>