javascript - 如何获得流畅的计数器动画

Question

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

• 我每分钟都会得到一个新值。
• 计数器应显示真实值(value)(无假货)。
• 有时值(value)不会发生变化。
• 有时计数器应该旋转得更快，有时更慢(取决于值的变化)。

我的想法是使用最后两个值并在它们之间设置动画。根据差异，速度必须改变。但我没有找到可以随后更改速度的计数器。或者您还有其他想法吗？

所有其他设有柜台的网站都是如何做到这一点的？他们是假的吗？

编辑:

我尝试了不同的计数器 - 目前我正在使用 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，也许我可以让它创建一个动态改变速度的函数。

但是我没有附上代码的原因是我寻找代码背后的编程过程。这样的直播柜台有可能得到吗？程序是怎样的？

解决方案:
设置速度可以解决问题，因为库为我制作动画:

速度:60000

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

Answer 1

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

在完成的函数中，

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

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

我假设仅获取的总值(value)会增加。如果它也可以减少，您也需要处理这种情况。