“非线性”；动画"；用JavaScript/jQuery实现数字值的查询

我想在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);


});

0
$（函数（）
{
var$counter=$（“#counter”），
startVal=$counter.text（），
currentVal，
endVal=250；
currentVal=startVal；
变量i=设置间隔（函数（）
{
如果（currentVal==endVal）
{
间隔时间（i）；
}
其他的
{
currentVal++；
$counter.text（currentVal）；
}
}, 100);
});

---

但我不认为这是一种方式…

我会使用jQuery的内置动画来实现这一点

如果将函数传递给

.animate（）

的

步骤

选项，则在动画过程中，每个勾号都会触发该函数。通过这种方式，jQuery将处理所有的缓解措施，以及不适合您的措施。你只需要处理数据

$({countValue:0}).animate(
    {countValue:346},
    {
        duration: 5000, /* time for animation in milliseconds */
        step: function (value) { /* fired every "frame" */
            console.log(value);
        }
    }
);

---

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

+1非常整洁的解决方案，不知道jQuery的功能。