feat: 动画改成js控制

src/css/stat-bar.css

@@ -48,9 +48,9 @@
   margin-left: 10px;
 }
 .stat-bar .stat-item .scroll-num {
-  width: var(--width, 39px);
-  height: var(--height, 50px);
-  line-height: var(--height, 50px);
+  width: 39px;
+  height: 50px;
+  line-height: 50px;
   text-align: center;
   font-size: 41px;
   color: #01fff6;
@@ -66,96 +66,3 @@
   color: #758094;
   font-family: 'Source Han Sans CN';
 }
-.stat-bar .animate {
-  -webkit-animation: move calc(var(--duration) * 1s) calc(var(--delay) * 1s) linear, bounce-in-down 1s calc((var(--duration) + var(--delay)) * 1s) forwards;
-          animation: move calc(var(--duration) * 1s) calc(var(--delay) * 1s) linear, bounce-in-down 1s calc((var(--duration) + var(--delay)) * 1s) forwards;
-}
-.stat-bar .init {
-  -webkit-transform: translateY(calc(var(--i) * -9.09%));
-      -ms-transform: translateY(calc(var(--i) * -9.09%));
-          transform: translateY(calc(var(--i) * -9.09%));
-}
-@-webkit-keyframes move {
-  from {
-    -webkit-transform: translateY(calc(var(--i) * -9.09%));
-            transform: translateY(calc(var(--i) * -9.09%));
-    -webkit-filter: url(#blur);
-            filter: url(#blur);
-  }
-  to {
-    -webkit-transform: translateY(calc(var(--j) * -9.09%));
-            transform: translateY(calc(var(--j) * -9.09%));
-    -webkit-filter: url(#blur);
-            filter: url(#blur);
-  }
-}
-@keyframes move {
-  from {
-    -webkit-transform: translateY(calc(var(--i) * -9.09%));
-            transform: translateY(calc(var(--i) * -9.09%));
-    -webkit-filter: url(#blur);
-            filter: url(#blur);
-  }
-  to {
-    -webkit-transform: translateY(calc(var(--j) * -9.09%));
-            transform: translateY(calc(var(--j) * -9.09%));
-    -webkit-filter: url(#blur);
-            filter: url(#blur);
-  }
-}
-@-webkit-keyframes bounce-in-down {
-  from {
-    -webkit-transform: translateY(calc(var(--j) * -9.09% - 1%));
-            transform: translateY(calc(var(--j) * -9.09% - 1%));
-    -webkit-filter: none;
-            filter: none;
-  }
-  25% {
-    -webkit-transform: translateY(calc(var(--j) * -9.09% + 0.8%));
-            transform: translateY(calc(var(--j) * -9.09% + 0.8%));
-  }
-  50% {
-    -webkit-transform: translateY(calc(var(--j) * -9.09% - 1%));
-            transform: translateY(calc(var(--j) * -9.09% - 1%));
-  }
-  70% {
-    -webkit-transform: translateY(calc(var(--j) * -9.09% + 0.6%));
-            transform: translateY(calc(var(--j) * -9.09% + 0.6%));
-  }
-  85% {
-    -webkit-transform: translateY(calc(var(--j) * -9.09% - 0.3%));
-            transform: translateY(calc(var(--j) * -9.09% - 0.3%));
-  }
-  to {
-    -webkit-transform: translateY(calc(var(--j) * -9.09%));
-            transform: translateY(calc(var(--j) * -9.09%));
-  }
-}
-@keyframes bounce-in-down {
-  from {
-    -webkit-transform: translateY(calc(var(--j) * -9.09% - 1%));
-            transform: translateY(calc(var(--j) * -9.09% - 1%));
-    -webkit-filter: none;
-            filter: none;
-  }
-  25% {
-    -webkit-transform: translateY(calc(var(--j) * -9.09% + 0.8%));
-            transform: translateY(calc(var(--j) * -9.09% + 0.8%));
-  }
-  50% {
-    -webkit-transform: translateY(calc(var(--j) * -9.09% - 1%));
-            transform: translateY(calc(var(--j) * -9.09% - 1%));
-  }
-  70% {
-    -webkit-transform: translateY(calc(var(--j) * -9.09% + 0.6%));
-            transform: translateY(calc(var(--j) * -9.09% + 0.6%));
-  }
-  85% {
-    -webkit-transform: translateY(calc(var(--j) * -9.09% - 0.3%));
-            transform: translateY(calc(var(--j) * -9.09% - 0.3%));
-  }
-  to {
-    -webkit-transform: translateY(calc(var(--j) * -9.09%));
-            transform: translateY(calc(var(--j) * -9.09%));
-  }
-}

src/index.html

@@ -254,5 +254,6 @@
 </body>
 
 <script src="https://cdn.ucyber.cn/common/echarts.js"></script>
+<script src="./js/tween.umd.js"></script>
 <script src="./js/index.js"></script>
 </html>
\ No newline at end of file

src/js/index.js

@@ -219,13 +219,11 @@ const lineChartOption = (xData, yData, interval) => {
 }
 
 // 创建多组数字
-function createMultiSrollNum(numArr, width, height) {
+function createMultiSrollNum(numArr) {
   const scrollBox = document.getElementsByClassName('scroll-box')
   for (let i = 0; i < scrollBox.length; i++) {
     const scrollNode = scrollBox[i]
     const childNumArr = numArr[i].split('')
-    scrollNode.style.setProperty('--width', width + 'px')
-    scrollNode.style.setProperty('--height', height + 'px')
     const docFrag = document.createDocumentFragment()
     childNumArr.forEach((num, i) => {
       docFrag.appendChild(createSrollNum(num))
@@ -250,63 +248,95 @@ function createSrollNum(num) {
   <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 * -9.09 + '%)'
-  )
+  ulNode.setAttribute('style', 'transform: translateY(' + num * -5 + '%)')
   return scrollNumNode
 }
 
 // 创建多组数字动画
-function addMultiDigitAnimate(beforeNumArr, afterNumArr, delays, numArr) {
+function addMultiDigitAnimate(beforeNumArr, afterNumArr) {
+  TWEEN.removeAll()
+  console.log(beforeNumArr, afterNumArr)
+  const arr = []
   const scrollBox = document.getElementsByClassName('scroll-box')
   for (let i = 0; i < scrollBox.length; i++) {
-    const scrollBoxNode = scrollBox[i]
-    const scrollNum = scrollBoxNode.childNodes
-    addDigitAnimate(scrollNum, beforeNumArr[i], afterNumArr[i])
-  }
-}
-
-// 创建单个数字动画
-function addDigitAnimate(scrollNum, beforeNumArr, afterNumArr) {
-  let delay = 0
+    const scrollNode = scrollBox[i]
+    const beforeNum = beforeNumArr[i]
+    const afterNum = afterNumArr[i]
+    const isUp = afterNum - beforeNum >= 0
 
-  for (let i = scrollNum.length - 1; i >= 0; i--) {
-    const scrollNumNode = scrollNum[i]
-    scrollNumNode.style.setProperty('--i', beforeNumArr[i])
-    scrollNumNode.style.setProperty('--j', afterNumArr[i])
+    const beforeChildNumArr = beforeNum.split('')
+    const afterChildNumArr = afterNum.split('')
 
-    const d = Math.abs(beforeNumArr[i] - afterNumArr[i]) * 0.3
-    scrollNumNode.style.setProperty('--duration', d)
-    scrollNumNode.style.setProperty('--delay', delay)
-    delay += d * 0.9
+    let delay = 0
+    const scrollNum = scrollNode.childNodes
+    for (let j = beforeChildNumArr.length - 1; j >= 0; j--) {
+      const num = beforeChildNumArr[j]
+      const num2 = afterChildNumArr[j]
+      const beforePercent = isUp ? num * -5 : -50 - num * 5
+      let afterPercent
+      let duration = 0
 
-    const ulNode = scrollNumNode.childNodes[0]
-    ulNode.classList.remove('animate')
+      const ulNode = scrollNum[j].childNodes[0]
       ulNode.setAttribute(
         'style',
-      'transform: translateY(' + beforeNumArr[i] * -9.09 + '%)'
+        'transform: translateY(' + beforePercent + '%)'
       )
+      if (isUp) {
+        if (num2 > num) {
+          afterPercent = num2 * -5
+          duration = num2 - num
+        } else {
+          afterPercent = num2 * -5 - 50
+          duration = 10 - (num - num2)
+        }
+      } else {
+        if (num2 < num) {
+          afterPercent = beforePercent + (num - num2) * 5
+          duration = num - num2
+        } else {
+          afterPercent = num2 * -5
+          duration = 10 - (num2 - num)
+        }
+      }
 
-    setTimeout(() => {
-      ulNode.classList.add('animate')
-    }, 0)
+      duration = duration * 500
 
-    if (isSafari || isWeChat) {
-      let timer = setTimeout(() => {
-        ulNode.setAttribute(
-          'style',
-          'animation: none;transform: translateY(' +
-            afterNumArr[i] * -9.09 +
-            '%)'
-        )
-        timer = null
-      }, delay * 1000)
+      arr.push({
+        beforePercent,
+        afterPercent,
+        duration,
+        delay,
+        ulNode: scrollNum[j].childNodes[0],
+      })
+      delay = delay + duration * 0.5
     }
   }
+
+  arr.forEach((sObject) => {
+    const { beforePercent, afterPercent, duration, delay, ulNode } = sObject
+    new TWEEN.Tween({ y: beforePercent })
+      .to({ y: afterPercent }, duration)
+      .delay(delay)
+      .easing(TWEEN.Easing.Quintic.Out)
+      .onUpdate((object) => {
+        ulNode.setAttribute('style', 'transform: translateY(' + object.y + '%)')
+      })
+      .start()
+  })
+
+  animate()
 }
 
 function createRandom() {
@@ -322,6 +352,12 @@ function createRandom() {
   return arr
 }
 
+function animate(time) {
+  let id = requestAnimationFrame(animate)
+  var result = TWEEN.update(time)
+  if (!result) cancelAnimationFrame(id)
+}
+
 window.onload = () => {
   // echart渲染
   const lineChart1 = echarts.init(document.getElementById('line_chart_1'))
@@ -446,9 +482,9 @@ window.onload = () => {
   let afterNumArr = ['35345', '83460', '36765', '36465']
 
   // 初始化
-  createMultiSrollNum(beforeNumArr, width, height)
+  createMultiSrollNum(beforeNumArr)
 
-  // 开始动画
+  // 添加动画
   addMultiDigitAnimate(beforeNumArr, afterNumArr)
 
   // 测试，点击第一列数字

src/less/stat-bar.less

@@ -36,9 +36,9 @@
       margin-left: 10px;
     }
     .scroll-num {
-      width: var(--width, 39px);
-      height: var(--height, 50px);
-      line-height: var(--height, 50px);
+      width: 39px;
+      height: 50px;
+      line-height: 50px;
       text-align: center;
       font-size: 41px;
       color: #01fff6;
@@ -55,73 +55,5 @@
       font-family: 'Source Han Sans CN';
     }
   }
-
-  // .border-animate {
-  //   animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
-  // }
-
-  .animate {
-    animation: move calc(var(--duration) * 1s) calc(var(--delay) * 1s) linear,
-      bounce-in-down 1s calc((var(--duration) + var(--delay)) * 1s) forwards;
-  }
-  .init {
-    transform: translateY(calc(var(--i) * -9.09%));
-  }
-}
-
-@keyframes move {
-  from {
-    transform: translateY(calc(var(--i) * -9.09%));
-    filter: url(#blur);
-  }
-
-  to {
-    transform: translateY(calc(var(--j) * -9.09%));
-    filter: url(#blur);
-  }
-}
-
-@keyframes bounce-in-down {
-  from {
-    transform: translateY(calc(var(--j) * -9.09% - 1.0%));
-    filter: none;
-  }
-
-  25% {
-    transform: translateY(calc(var(--j) * -9.09% + 0.8%));
-  }
-
-  50% {
-    transform: translateY(calc(var(--j) * -9.09% - 1%));
-  }
-
-  70% {
-    transform: translateY(calc(var(--j) * -9.09% + 0.6%));
-  }
-
-  85% {
-    transform: translateY(calc(var(--j) * -9.09% - 0.3%));
-  }
-
-  to {
-    transform: translateY(calc(var(--j) * -9.09%));
-  }
 }
 
-// @keyframes enhance-bounce-in-down {
-//   25% {
-//     transform: translateY(8%);
-//   }
-//   50% {
-//     transform: translateY(-4%);
-//   }
-//   70% {
-//     transform: translateY(2%);
-//   }
-//   85% {
-//     transform: translateY(-1%);
-//   }
-//   to {
-//     transform: translateY(0);
-//   }
-// }