別の番号に増分する正確な時間を設定する

Question

私はある数値を別の数値に増やす関数を作った。しかし、これは私の期間ロジックは動作しません。

.animateNumber()で3番目のパラメータは継続され、そして私は、これは新しい番号にインクリメント費やした時間になりたいです。

時間が500に設定されているのであれば、それは10からインクリメント500ミリ秒（スタート）取るよ - 500（終わり）、そしてこれは、任意の開始値と終了値を同じになります。私はこれを行うには、私のstepTimeロジックを固定してもよい方法

http://jsbin.com/kepibetuxu/edit?html,js,console,output

HTMLElement.prototype.animateNumber = function(start, end, duration) { 
 

 
this.style.opacity = 0.5; 
 

 
var self = this, 
 
    range = end - start, 
 
    current = start, 
 
    increment = end > start? 1 : -1, 
 
    stepTime = duration/range, 
 
    timer = setInterval(function() { 
 
     current += increment; 
 
     self.innerHTML = current; 
 
     if (current == end) { 
 
     self.style.opacity = 1; 
 
     clearInterval(timer); 
 
     } 
 
    }, stepTime); 
 
    
 
    
 
    console.log(range); 
 
    console.log(stepTime); 
 
    
 

 
}; 
 

 
document.querySelector('.value').animateNumber(400, 500, 20); 
 
document.querySelector('.value1').animateNumber(0, 500, 20);

<div class="value">0</div> 
 
<div class="value1">0</div>

？

Answer 1

私はちょうど新しいフレームを要求し、その時点でapproapriate画分に番号を更新します：

function animateNumber(el, start, end, duration) { 
 
    var startTime = performance.now(); 
 
    (function func() { 
 
    var factor = Math.min(1, (performance.now() - startTime)/duration); 
 
    el.textContent = (start + (end-start) * factor).toFixed(0); 
 
    el.style.opacity = factor; 
 
    if(factor < 1) requestAnimationFrame(func); 
 
    })(); 
 
} 
 
animateNumber(document.querySelector('.value1'), 400, 500, 2000); 
 
animateNumber(document.querySelector('.value2'), 0, 500, 2000);

<div class="value1">0</div> 
 
<div class="value2">0</div>

Answer 2

これはあなたの関数にリフレッシュレートを追加し、それを行うことができる方法であります：

HTMLElement.prototype.animateNumber = function(start, end, duration, refresh) { 
 

 
this.style.opacity = 0.5; 
 

 
var self = this, 
 
    refresh = refresh || 10, 
 
    range = end - start, 
 
    stepQt = duration/refresh | 0, 
 
    increment = end > start? range/stepQt : -range/stepQt , 
 
    current = start; 
 

 
var timer = setInterval(function() { 
 
     current += increment ; 
 
    if (current >= end) { 
 
     current = end; 
 
     self.style.opacity = 1; 
 
     clearInterval(timer); 
 
     } 
 
     self.innerHTML = current | 0; 
 
     
 
    }, refresh); 
 
    
 

 
}; 
 

 
document.querySelector('.value').animateNumber(400, 500, 2000); 
 
document.querySelector('.value1').animateNumber(0, 500, 2000, 10);

<div class="value">0</div> 
 
<div class="value1">0</div>

リフレッシュレートは、リフレッシュレートを1つずつインクリメントするのではなく、アニメーションのステップ数に基づいて増分する必要があることを理解するのに役立ちます。

デフォルト値を追加したので、リフレッシュレートを追加することもできません。