使用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的内置动画.

如果将函数传递给stepfor选项.animate(),则会在动画期间为每个tick 打开它.这样,jQuery将处理所有缓动和不适合你的东西.您只需要处理数据.

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

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