feat: 数字动画

src/js/index.js

@@ -265,26 +265,52 @@ function repeatArr(a, m) {
 // 创建多组数字动画
 function addMultiDigitAnimate(beforeNumArr, afterNumArr) {
   TWEEN.removeAll()
+  const scrollBox = document.getElementsByClassName('scroll-box')
   console.log(beforeNumArr, afterNumArr)
   const arr = []
-  const scrollBox = document.getElementsByClassName('scroll-box')
   for (let i = 0; i < scrollBox.length; i++) {
     const scrollNode = scrollBox[i]
     const beforeNum = beforeNumArr[i]
     const afterNum = afterNumArr[i]
-    const isUp = afterNum - beforeNum >= 0
+    const isUp = Number(afterNum) - Number(beforeNum) >= 0
 
     const beforeChildNumArr = beforeNum.split('')
     const afterChildNumArr = afterNum.split('')
 
     const scrollNum = scrollNode.childNodes
+    let delay = 0
+    const staticDuration = 6000
+    let zeroBeforeIndex = 0 // 是否以0开头 标志位
+    let zeroAfterIndex = 0 // 是否以0开头 标志位
+    let someNumberIndex = 0 // 前面有几位数字相同
+    let stopSomeNumber = false // 停止计算前面有几位数字相同
     for (let j = 0; j < beforeChildNumArr.length; j++) {
-      const num = beforeChildNumArr[j]
-      const num2 = afterChildNumArr[j]
+      const num = +beforeChildNumArr[j]
+      const num2 = +afterChildNumArr[j]
+
+      // 算beforeNum前面的0
+      let zeroBeforeFlag = false
+      if (num === 0 && zeroBeforeIndex === j) {
+        zeroBeforeFlag = true
+        zeroBeforeIndex++
+      }
+
+      // 算afterNum前面的0
+      let zeroAfterFlag = false
+      if (num2 === 0 && zeroAfterIndex === j) {
+        zeroAfterFlag = true
+        zeroAfterIndex++
+      }
+
+      // 前面有几位数字相同
+      if (num === num2 && !stopSomeNumber) {
+        someNumberIndex++
+      } else {
+        stopSomeNumber = true
+      }
 
       let numberArr
       let repeatNum
-      let startY = 0
 
       if (isUp) {
         if (num2 > num) {
@@ -292,15 +318,13 @@ function addMultiDigitAnimate(beforeNumArr, afterNumArr) {
           repeatNum = getIntervalNumArr(num2, 10).concat(
             getIntervalNumArr(0, num2)
           )
-          startY = num2 - num
         } else {
           numberArr = getIntervalNumArr(num2, num, true)
           repeatNum = getIntervalNumArr(0, num2, true)
             .concat([0])
             .concat(getIntervalNumArr(num2, 9, true))
-          startY = num - num2
         }
-        numberArr = numberArr.concat(repeatArr(repeatNum, j))
+        numberArr = numberArr.concat(repeatArr(repeatNum, j - someNumberIndex))
         numberArr.push(num2)
       } else {
         if (num2 < num) {
@@ -308,15 +332,13 @@ function addMultiDigitAnimate(beforeNumArr, afterNumArr) {
           repeatNum = getIntervalNumArr(0, num2, true)
             .concat([0])
             .concat(getIntervalNumArr(num2, 9, true))
-          startY = num - num2
         } else {
           numberArr = getIntervalNumArr(num, num2)
           repeatNum = getIntervalNumArr(num2, 10).concat(
             getIntervalNumArr(0, num2)
           )
-          startY = num2 - num
         }
-        numberArr = numberArr.concat(repeatArr(repeatNum, j))
+        numberArr = numberArr.concat(repeatArr(repeatNum, j - someNumberIndex))
         numberArr.push(num2)
         numberArr.reverse()
       }
@@ -326,23 +348,37 @@ function addMultiDigitAnimate(beforeNumArr, afterNumArr) {
 
       const last = (1 / numberArr.length - 1) * 100
       const start = isUp ? 0 : last
+      const lastDelay = delay + staticDuration * 0.03
+      const opacityBefore = zeroBeforeFlag ? 0 : 1
       arr.push({
         start,
         end: isUp ? last : 0,
+        delay,
+        opacityBefore,
+        opacityAfter: zeroAfterFlag ? 0 : 1,
+        duration: staticDuration - lastDelay,
         ulNode,
       })
-
-      ulNode.setAttribute('style', 'transform: translateY(' + start + '%)')
+      delay = lastDelay
+      ulNode.setAttribute(
+        'style',
+        'transform: translateY(' + start + '%);opacity:' + opacityBefore
+      )
     }
   }
 
   arr.forEach((sObject) => {
-    const { start, end, ulNode } = sObject
-    new TWEEN.Tween({ y: start })
-      .to({ y: end }, 5000)
+    const { start, end, ulNode, delay, duration, opacityBefore, opacityAfter } =
+      sObject
+    new TWEEN.Tween({ y: start, opacity: opacityBefore })
+      .to({ y: end, opacity: opacityAfter }, duration)
+      .delay(delay)
       .easing(TWEEN.Easing.Quintic.Out)
       .onUpdate((object) => {
-        ulNode.setAttribute('style', 'transform: translateY(' + object.y + '%)')
+        ulNode.setAttribute(
+          'style',
+          'transform: translateY(' + object.y + '%);opacity:' + object.opacity
+        )
       })
       .start()
   })
@@ -493,9 +529,9 @@ window.onload = () => {
   createMultiSrollNum(beforeNumArr)
 
   // 添加动画
-  // addMultiDigitAnimate(beforeNumArr, afterNumArr)
+  addMultiDigitAnimate(beforeNumArr, afterNumArr)
 
-  // // 测试，点击第一列数字
+  // 测试，点击第一列数字
   // document.getElementsByClassName('scroll-box')[0].onclick = function () {
   //   const numArr = createRandom()
   //   beforeNumArr = afterNumArr