轻量级数字动画插件countUp.js

countUp.js是一款轻量级/无依赖的js计数器动画特效插件,可以用来快速创建动画,快速的通过多种方式创建计数器的动态变化效果,还可以控制计数器的暂停/恢复/重置等状态;通过设置startVal和endVal参数,countUp可以在任何一个方向上计数;countUp兼容性超强,兼容所有的浏览器;而且countUp.js既支持jq+html写法又支持ng1和ng2写法

countUp.js

参数:

target ：html元素的id,可以是input元素/svg文本元素/预先提供的元素选择器变量

startVal ：计数器开始的数值

endVal ：计数器结束的数值

decimals ：计数器数值精度,默认值为0

duration ：计数器动画持续时间,单位秒,默认值2

options ：一个对象,决定计数器数值的格式和动画easing效果

Decimals/duration/options可以使用默认值

使用方法

var numAnim = new CountUp("element", 24.02, 99.99);
numAnim.start();

回调方法:

numAnim.start(someMethodToCallOnComplete);
// or an anonymous function
numAnim.start(function() {
    // do something
})

其他方法

停止计数器动画

numAnim.stop();

恢复计数器动画

numAnim.resume();

重置计数器动画

numAnim.reset();

切换暂停/恢复计数器动画:

numAnim.pauseResume();

更新结束值和动画:

var someValue = 1337;
numAnim.update(someValue);

demo

<ul class="idx-advantage">
  <li class="col-3 bd2">
    <div class="bd">
      <span class="txt">交易总额</span><br>
      <strong class="txt ta-center number" style="font-size: 14px;"><span class="yuan"><i id = "money_num">--</i>元</span></strong>
    </div>
  </li>
  <li class="col-3 bd2">
    <div class="bd">
      <span class="txt">累计赚取收益</span><br>
      <strong class="txt ta-center number" ><span class="yuan"><i id = "profict_num">--</i>元</span></strong>      
    </div>
  </li>
  <li class="col-3 bd2">
    <div class="bd">
      <span class="txt">平台用户</span><br>
      <strong class="txt ta-center number"><span class="yuan"><i id = "people_num">--</i>人</span></strong>
    </div>
  </li>                 
</ul>
<script>
function renderNum(moneyn,profictn,peoplen){    
  var that = this;
  that.countUp({
    'money_num' : moneyn,
    'profict_num': profictn,
    'people_num': peoplen
  });
};
function countUp(obj) {
  var that = this;
  var options = {
    useEasing: true, 
    useGrouping: true, 
    separator: ',',
    decimal: '.', 
  };    
  for(var i in obj){
    var IdNum = new CountUp(i, 0, obj[i], 0, 2.5,options);
    IdNum.start();
    console.log(IdNum.start());
  }
};
renderNum(123,7674565464,245245);
</script>

jquery.countup.js是一款轻量级jquery数字动画插件,该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画;该数字动画插件可以控制动画的延迟时间和动画过渡时间,它依赖于Waypoints插件来监听滚动事件

使用方法

在页面引入jquery,jquery.waypoints.min.js和jquery.countup.min.js文件。

<script src="jquery.min.js"></script>
<script src="jquery.waypoints.min.js"></script>
<script src="jquery.countup.min.js"></script>

HTML结构

使用元素作为数字的容器。

<span class="counter">1,498,547.00</span>
<span class="counter">7.99</span>
<span class="counter">1455455</span>

也可以使用data-counter-time和data-counter-delay属性来设置数字动画的动画时间和延迟时间

<span class="counter" data-counter-time="5000" data-counter-delay="50">1981</span>
<span class="counter" data-counter-time="100" data-counter-delay="20">9842</span>

初始化插件

在页面DOM元素加载完毕之后,可以通过countUp()方法来初始化数字动画

$('.counter').countUp();

也可以在初始化的时候传入配置参数。

$('.counter').countUp({
    delay: 10,
    time: 2000
});

delay:每个数字动画的延迟时间,单位毫秒;time:计数动画总的持续时间

大数字动画

对于较大的数字,由于CountUp有很长的路要走几秒钟,动画似乎突然停止,解决方案是从endVal中减去100,然后使用回调来调用update方法,该方法以相同的持续时间完成动画,差异仅为100,以生成动画:

var endVal = 9645.72;
var numAnim = new CountUp("targetElem", 0, endVal - 100, duration/2);
numAnim.start(function() {
    numAnim.update(endVal);
});

定制easing动画:

可以选择应用自定义easing函数,它将接收计算贝塞尔曲线所需的4个参数:

t - 当前时间,b - 开始值,c - 开始值和目标值之间的差值,d - 补间的总时间,可以使用任何Robert Penner的easing函数,只需避免使用"弹性"功能,因为它们导致双向计数;如果不指定自定义easing函数,CountUp将使用默认的easeOutExpo

例如:

var easeOutCubic = function(t, b, c, d) {
    var ts = (t /= d) * t;
    var tc = ts * t;
    return b + c * (1.77635683940025e-15 * tc * ts + 0.999999999999998 * tc + -3 * ts + 3 * t);
};
var options = {
  easingFn: easeOutCubic
};
var demo = new CountUp("myTargetElement", 24.02, 94.62, 2, 2.5, options);
demo.start();

感悟：除了生活，其他不过都是调味剂