如何获得平滑的计数器动画

Question

我应该显示一个动画计数器。理想情况下，应该有一个数字变化的连续动画。情况如下所示：

• 我每分钟都有一个新的价值。
• 计数器应该显示真实值（不是假的）。
• 有时价值没有变化。
• 有时计数器旋转得更快，有时更慢（取决于值的变化）。

我的想法是使用最后两个值并在它们之间设置动画。根据差异，速度必须改变。但我没有找到一个允许事后改变速度的计数器。还是你有别的想法？

所有其他有柜台的网站是怎么做的？他们是假的吗？

编辑：

我尝试了不同的计数器 - 目前我正在使用 jOdometer。我目前的代码库是：

var counter = $('.counter').jOdometer({
    counterStart: '0',
    numbersImage: '/img/jodometer-numbers-24pt.png', 
    widthNumber: 32,
    heightNumber: 54,
    spaceNumbers: 0, 
    offsetRight:-10,
    speed:10000,
    delayTime: 300,
    maxDigits: 10,
});

function update_odometer() { 
    var jqxhr = $.getJSON("/number.php?jsonp=?")
        .done(function(data){
            console.log(data);
            total = data['Total'];
            counter.goToNumber(total);
        })
        .fail(function(data){
            console.log(data);
        });
};

update_odometer();
setInterval(update_odometer, 60000);

计数器当前从零计数到我的数字，但我想改变这种行为（从倒数第二个计数到最后一个值 - 但我的 AJAX 调用 [see here] 有问题）。如果需要，我也可以更改库。我查看了 jquery.jodometer.js，也许我可以创建一个动态更改 speed 的函数。

但是我没有附上代码的原因是我搜索了代码背后的编程过程。有可能得到这样的现场柜台吗？流程是怎样的？

解决方案：
设置速度解决了问题，因为库为我做动画：

speed:60000

您只需将动画的速度与更新间隔相匹配。

Answer 1

从当前值到要更新的值的简单 for 循环应该可以解决您的问题。

在你的 done 函数中，

for(var i=current_odo_value; i<=data['Total']; i++) {
    counter.goToNumber(i);
}

如果您可以控制库中的速度，则应该这样做。由于速度与当前值和更新值之间的差值成正比，因此可以将该差值作为所需的速度值发送到插件。

我假设只增加获取的总价值。如果它也可以减少，那么您也需要处理这种情况。