Нелинейная "анимация" числового значения с помощью 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 вариант для .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, дополненные замедлением.