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

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循环应该可以解决您的问题。

在完成的功能中，

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

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

我假设只增加了取得的总价值。如果它也可以减少，你也需要处理这个条件。