使用JavaScript / jQuery的数值的非线性“动画”

我想在活跃用户的Google Analytics中制作像这样的动画。

---

我看到一些做动画的脚本，但是它们是以线性模式进行的，比如，从0到XXX的速度是相同的，我想让它慢慢开始，获得速度，然后再慢慢完成。

我怎么在javascript / jquery中这样做？

---

根据要求，我尝试了：

0 $(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的内置动画。

如果将函数传递给.animate()的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之间的值，并带有缓动。