數增量的動畫時間慢如數字增加

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>