feat: 数字动画

src/js/index.js

@@ -236,34 +236,32 @@ function createMultiSrollNum(numArr) {
 function createSrollNum(num) {
   const scrollNumNode = document.createElement('div')
   scrollNumNode.className = 'scroll-num'
-  scrollNumNode.innerHTML = `<ul class="scroll-ul">
-  <li>0</li>
-  <li>1</li>
-  <li>2</li>
-  <li>3</li>
-  <li>4</li>
-  <li>5</li>
-  <li>6</li>
-  <li>7</li>
-  <li>8</li>
-  <li>9</li>
-  <li>0</li>
-  <li>1</li>
-  <li>2</li>
-  <li>3</li>
-  <li>4</li>
-  <li>5</li>
-  <li>6</li>
-  <li>7</li>
-  <li>8</li>
-  <li>9</li>
-  </ul>`
-
-  const ulNode = scrollNumNode.childNodes[0]
-  ulNode.setAttribute('style', 'transform: translateY(' + num * -5 + '%)')
+  scrollNumNode.innerHTML = '<ul><li>' + num + '</li></ul>'
   return scrollNumNode
 }
 
+function getIntervalNumArr(start, end, reduce) {
+  const arr = []
+  if (reduce) {
+    for (let i = end; i > start; i--) {
+      arr.push(i)
+    }
+  } else {
+    for (let i = start; i < end; i++) {
+      arr.push(i)
+    }
+  }
+  return arr
+}
+
+function repeatArr(a, m) {
+  let j = []
+  for (let i = 0; i < m; i++) {
+    j = j.concat(a)
+  }
+  return j
+}
+
 // 创建多组数字动画
 function addMultiDigitAnimate(beforeNumArr, afterNumArr) {
   TWEEN.removeAll()
@@ -279,56 +277,69 @@ function addMultiDigitAnimate(beforeNumArr, afterNumArr) {
     const beforeChildNumArr = beforeNum.split('')
     const afterChildNumArr = afterNum.split('')
 
-    let delay = 0
     const scrollNum = scrollNode.childNodes
-    for (let j = beforeChildNumArr.length - 1; j >= 0; j--) {
+    for (let j = 0; j < beforeChildNumArr.length; j++) {
       const num = beforeChildNumArr[j]
       const num2 = afterChildNumArr[j]
-      const beforePercent = isUp ? num * -5 : -50 - num * 5
-      let afterPercent
-      let duration = 0
 
-      const ulNode = scrollNum[j].childNodes[0]
-      ulNode.setAttribute(
-        'style',
-        'transform: translateY(' + beforePercent + '%)'
-      )
+      let numberArr
+      let repeatNum
+      let startY = 0
+
       if (isUp) {
         if (num2 > num) {
-          afterPercent = num2 * -5
-          duration = num2 - num
+          numberArr = getIntervalNumArr(num, num2)
+          repeatNum = getIntervalNumArr(num2, 10).concat(
+            getIntervalNumArr(0, num2)
+          )
+          startY = num2 - num
         } else {
-          afterPercent = num2 * -5 - 50
-          duration = 10 - (num - num2)
+          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.push(num2)
       } else {
         if (num2 < num) {
-          afterPercent = beforePercent + (num - num2) * 5
-          duration = num - num2
+          numberArr = getIntervalNumArr(num2, num, true)
+          repeatNum = getIntervalNumArr(0, num2, true)
+            .concat([0])
+            .concat(getIntervalNumArr(num2, 9, true))
+          startY = num - num2
         } else {
-          afterPercent = num2 * -5
-          duration = 10 - (num2 - num)
+          numberArr = getIntervalNumArr(num, num2)
+          repeatNum = getIntervalNumArr(num2, 10).concat(
+            getIntervalNumArr(0, num2)
+          )
+          startY = num2 - num
         }
+        numberArr = numberArr.concat(repeatArr(repeatNum, j))
+        numberArr.push(num2)
+        numberArr.reverse()
       }
 
-      duration = duration * 500
+      const ulNode = scrollNum[j].childNodes[0]
+      ulNode.innerHTML = numberArr.map((ele) => '<li>' + ele + '</li>').join('')
 
+      const last = (1 / numberArr.length - 1) * 100
+      const start = isUp ? 0 : last
       arr.push({
-        beforePercent,
-        afterPercent,
-        duration,
-        delay,
-        ulNode: scrollNum[j].childNodes[0],
+        start,
+        end: isUp ? last : 0,
+        ulNode,
       })
-      delay = delay + duration * 0.5
+
+      ulNode.setAttribute('style', 'transform: translateY(' + start + '%)')
     }
   }
 
   arr.forEach((sObject) => {
-    const { beforePercent, afterPercent, duration, delay, ulNode } = sObject
-    new TWEEN.Tween({ y: beforePercent })
-      .to({ y: afterPercent }, duration)
-      .delay(delay)
+    const { start, end, ulNode } = sObject
+    new TWEEN.Tween({ y: start })
+      .to({ y: end }, 5000)
       .easing(TWEEN.Easing.Quintic.Out)
       .onUpdate((object) => {
         ulNode.setAttribute('style', 'transform: translateY(' + object.y + '%)')
@@ -479,7 +490,7 @@ window.onload = () => {
   let afterNumArr = ['35345', '83460', '36765', '36465']
 
   // 初始化
-  createMultiSrollNum(afterNumArr)
+  createMultiSrollNum(beforeNumArr)
 
   // 添加动画
   // addMultiDigitAnimate(beforeNumArr, afterNumArr)