tweenMax+如何让数字由初始值动画到结束的值

Posted snowbxb

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了tweenMax+如何让数字由初始值动画到结束的值相关的知识,希望对你有一定的参考价值。

技术图片

 

 html

<div class="wz1">0</div>

css:

.wz1{
width: 114px;
height: 30px;
position: absolute;
top: 40px;
left: 75px;
color:#fff;
font-size: 30px;
}

 

js:(写在预加载函数中)

let val2 = document.getElementsByClassName("wz2")[0];
animateNum(val2, 8397, 0);

// 初始值 结束值 几个小数点
function animateNum(dom, val, dot){
let obj = {num1: dom.innerHTML};
TweenMax.to(obj, 1, {
num1: val,
onUpdate:function(){
dom.innerHTML=obj.num1.toFixed(dot);
},
delay: 0.1
});
}

如果报错了,继续往下拉--  

 

 

 

 

 

 

 

 

记得引入tweenmax.js的插件哦

 

以上是关于tweenMax+如何让数字由初始值动画到结束的值的主要内容,如果未能解决你的问题,请参考以下文章

GreenSock (TweenMax) 动画案例

CABasicAnimation 在动画完成后重置为初始值

TweenMax的GSAP(GreenSock动画平台)GSAP,专业的Web动画库

网页动画插件---Super Scrollorama , TweenMax 和skrollr

使用TweenMax的简单Tween动画

js-数字渐增到指定的数字,在指定的时间内完成(有动画效果哦)插件jquery.animateNumber.js