非线性"动画"使用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屋!