非线性＆QUOT;动画＆QUOT;使用JavaScript数值的/ jQuery的 [英] Non-linear "animation" of numeric value with JavaScript/jQuery

问题描述

我想要像这样在谷歌Analytics（分析）对活跃用户的动画。

I want to make an animation like this one in Google Analytics on active users.

---

我看到一些脚本，做动画的，但他们是在线性模式一样，速度从0到同样XXX，我希望它慢慢展开，获得速度，再慢慢结束。

---

I saw some scripts that do the animation, but they do it in linear mode, like, the speed is the same from 0 to XXX, I want it to start slowly, gain speed, and finish slowly again.

我将如何做到这一点在JavaScript / jQuery的？

How would I do this in 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);


});

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

But I don't think it's the way to go...

推荐答案

我会使用jQuery的内置的动画这一点。

I would use jQuery's built-in animation for this.

如果您传递给步选项功能 .animate（），它会为每一个被解雇动画中打勾。这样一来，jQuery将处理所有的宽松政策，哪些不适合你。你只需要处理数据。

If you pass a function to the step option for .animate(), it will be fired for each tick during animation. That way, jQuery will handle all of the easing and what not for you. You just need to handle the data.

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

在控制台中，你会看到0和346之间的值，完成与缓解。

In the console, you will see values between 0 and 346, complete with easing.

这篇关于非线性＆QUOT;动画＆QUOT;使用JavaScript数值的/ jQuery的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！