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