javascript - 使用 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 之间的值，并带有缓动。