javascript - 以非线性方式从一个数字快速计数到另一个数字

Question

我有一个数字（浮点数）让我们说 4.37。在某些时候，这个数字会更改为另一个值，基本上可以是 anthing，但仍然浮动并带有 2 个逗号。我需要的是从第一个数字到第二个数字的良好过渡。特别是我正在寻找这样的显示方式：

从数字 A 开始，它开始快速增长，一旦接近第二个，它就会减速。它应该在大约 0.8 秒内从数字 A 转到 B。

此数字显示在 DIV 中。

Answer 1

您可以使用jQuery.Animation它，并使用任何缓动或动画几乎任何属性

var o = {value : $('#inp1').val};
$.Animation( o, {
    value: $('#inp2').val()
  }, { 
    duration: 800,
    easing : 'easeOutCubic'
  }).progress(function(e) {
      $('#result').text((e.tweens[0].now).toFixed(2));
});

小提琴

Answer 2

这里真的有两个问题

1) 当我在 0.8 秒内从一个跑到另一个时，我会选择什么数字

2）如何使更新出现

现在，由于他们的眼睛每秒看不到超过 20 帧（这就是为什么电影是 24 fps，而视频通常甚至更多），所以您需要大约 20 个过渡数字 (0.8 x 24)。

生成这些数字我建议你这样做：

var N=20;
for (i = 0; i < 20 ; i++) {
  f = (i/(N-1));
  num = low + (high - low) * Math.pow(f, 1/g);
}

随着g变大，数字将“减慢”更多，因为它达到更高的i.

Answer 3

这是一个使用正弦曲线的示例

function genFactory(a, b, n) { // n is number of steps
    var dif = b - a,
        pi2 = Math.PI / 2, // sin(Pi/2) === 1
        i = 0;
    return function () {
        if (i === n) return b; // short circuit at the end
        return a + dif * Math.sin(pi2 * ++i / n);
    };
}

// putting it to use
var a = 4.37, // start point
    b = 9.12; // example
// generate function
var f = genFactory(a, b, 100); // 100 steps
// "loop"
var i = window.setInterval( // consider a setTimeout in production code
    function () {
        var x = f();
        if (x === b) window.clearInterval(i);
        console.log(x.toFixed(2)); // whatever output
    },
    800 / 100 // 0.8 seconds over 100 steps
);