Einstellen der genauen Dauer für das Inkrementieren auf eine andere Nummer

Question

Ich habe eine Funktion gemacht, die eine Zahl zu einer anderen erhöht. Das funktioniert aber meine Dauerlogik nicht.

Der dritte Parameter in .animateNumber() ist Dauer, und ich möchte, dass dies die Zeit ist, die für das Inkrementieren der neuen Zahl aufgewendet wird.

Wenn also die Dauer auf 500 eingestellt ist, dauert es 500 Millisekunden von 10 (Start) - 500 (Ende), und dies ist für alle Anfangs- und Endwerte gleich.

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>

Wie kann ich meine Steptime Logik zu beheben, dies zu tun?

Answer 1

Ich bitte nur neue Rahmen, und aktualisieren Sie die Rufnummer der approapriate Fraktion damals:

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

dies ist, wie Sie es tun können, eine Bildwiederholfrequenz auf Ihre Funktion Hinzufügen :

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>

Die Aktualisierungsrate hilft Ihnen dabei, zu verstehen, dass das Inkrement auf der Anzahl der Schritte in der Animation basieren sollte, anstatt die Aktualisierungsrate in Schritten von 1: 1 anzupassen.

Sie können auch keine Aktualisierungsrate hinzufügen, da ich einen Standardwert hinzugefügt habe;