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();感悟：除了生活，其他不过都是调味剂
