tweenMax常用动画
1.数字增加到指定值//获取DOM方式
//获取DOM方式
let val2 = document.getElementsByClassName("text1")[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 }); }
//数据驱动方式(vue3)
let num = ref(0)
tweenMax.to(num,(duration:1,value:520))
2.文字拆分动画(需引入SplitText.min.js)
let mySplitText = new SplitText("#headTitle", {type:"chars"}); //{type:"chars,words,lines"}打散成字、词、行 let chars = mySplitText.chars;//获取字 mySplitText.words获取词 mySplitText.lines获取行 TweenMax.set("#headTitle", {perspective:400}); TweenMax.staggerFrom(chars, 0.8, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut}, 0.02);
常用文档:
官网地址:http://www.greensock.com/
github地址:https://github.com/greensock/GreenSock-JS/
中文网: https://www.tweenmax.com.cn/
Ease Visualizer:https://greensock.com/ease-visualizer
道阻且长,行则将至!