设置递增到另一个数字的确切持续时间

Question

我制作了一个函数，可以将一个数字递增到另一个数字。这是有效的，但是我的持续时间逻辑没有。

.animateNumber()中的第三个参数是持续时间，我希望这是递增到新数字所花费的时间。

因此，如果持续时间设置为500，那么从10（开始）到500（结束）将需要500毫秒的时间，这对于任何开始值和结束值都是一样的。

http://jsbin.com/kepibetuxu/edit?html，js，控制台，输出

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>

如何修复我的stepTime逻辑以执行此操作？

Answer 1

我只需要请求新的帧，并将数字更新到当时的适当分数：

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>

刷新率可以帮助您理解增量应该基于动画中的步数，而不是基于逐个增量调整刷新率；

你也可以不添加刷新率，因为我添加了一个默认值；