使用JavaScript / jQuery的数值非线性“动画”

Question

我想在活跃用户的Google Analytics中制作类似这样的动画。

<小时/> 我看到一些做动画的脚本，但是它们是以线性模式进行的，比如，从0到XXX的速度相同，我希望它慢慢启动，获得速度，然后再慢慢完成。

我如何在javascript / jquery中执行此操作？

---

根据要求，我尝试了：

<span id="counter">0</span>    

$(function ()
{
    var $counter = $('#counter'),
        startVal = $counter.text(),
        currentVal,
        endVal = 250;


    currentVal = startVal;
    var i = setInterval(function ()
    {
        if (currentVal === endVal)
        {
            clearInterval(i);
        }
        else
        {
            currentVal++;
            $counter.text(currentVal);
        }
    }, 100);


});

但我不认为这是要走的路......

Answer 1

我会使用jQuery的内置动画。

如果将函数传递给step的{​​{1}}选项，则会在动画期间针对每个刻度触发该函数。这样，jQuery将处理所有缓动和不适合你的东西。您只需要处理数据。

.animate()

在控制台中，您将看到0到346之间的值，并带有缓动。