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));
});

FIDDLE

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

以下是使用 sine 作为曲线

的示例

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
);

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

3 个答案: