feat: 动画

src/css/stat-bar.css

@@ -67,8 +67,8 @@
   font-family: 'Source Han Sans CN';
 }
 .stat-bar .animate {
-  -webkit-animation: move calc(var(--speed) * 1s) linear infinite, bounce-in-down 1s calc(var(--delay) * 1s) forwards;
-          animation: move calc(var(--speed) * 1s) linear infinite, bounce-in-down 1s calc(var(--delay) * 1s) forwards;
+  -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%));
@@ -77,129 +77,85 @@
 }
 @-webkit-keyframes move {
   from {
-    -webkit-transform: translateY(-90%);
-            transform: translateY(-90%);
+    -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(1%);
-            transform: translateY(1%);
+    -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(-90%);
-            transform: translateY(-90%);
+    -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(1%);
-            transform: translateY(1%);
+    -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(--i) * -9.09% - 7%));
-            transform: translateY(calc(var(--i) * -9.09% - 7%));
+    -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(--i) * -9.09% + 3%));
-            transform: translateY(calc(var(--i) * -9.09% + 3%));
+    -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(--i) * -9.09% - 1%));
-            transform: translateY(calc(var(--i) * -9.09% - 1%));
+    -webkit-transform: translateY(calc(var(--j) * -9.09% - 1%));
+            transform: translateY(calc(var(--j) * -9.09% - 1%));
   }
   70% {
-    -webkit-transform: translateY(calc(var(--i) * -9.09% + 0.6%));
-            transform: translateY(calc(var(--i) * -9.09% + 0.6%));
+    -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(--i) * -9.09% - 0.3%));
-            transform: translateY(calc(var(--i) * -9.09% - 0.3%));
+    -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(--i) * -9.09%));
-            transform: translateY(calc(var(--i) * -9.09%));
+    -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(--i) * -9.09% - 7%));
-            transform: translateY(calc(var(--i) * -9.09% - 7%));
+    -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(--i) * -9.09% + 3%));
-            transform: translateY(calc(var(--i) * -9.09% + 3%));
-  }
-  50% {
-    -webkit-transform: translateY(calc(var(--i) * -9.09% - 1%));
-            transform: translateY(calc(var(--i) * -9.09% - 1%));
-  }
-  70% {
-    -webkit-transform: translateY(calc(var(--i) * -9.09% + 0.6%));
-            transform: translateY(calc(var(--i) * -9.09% + 0.6%));
-  }
-  85% {
-    -webkit-transform: translateY(calc(var(--i) * -9.09% - 0.3%));
-            transform: translateY(calc(var(--i) * -9.09% - 0.3%));
-  }
-  to {
-    -webkit-transform: translateY(calc(var(--i) * -9.09%));
-            transform: translateY(calc(var(--i) * -9.09%));
-  }
-}
-@-webkit-keyframes enhance-bounce-in-down {
-  25% {
-    -webkit-transform: translateY(8%);
-            transform: translateY(8%);
-  }
-  50% {
-    -webkit-transform: translateY(-4%);
-            transform: translateY(-4%);
-  }
-  70% {
-    -webkit-transform: translateY(2%);
-            transform: translateY(2%);
-  }
-  85% {
-    -webkit-transform: translateY(-1%);
-            transform: translateY(-1%);
-  }
-  to {
-    -webkit-transform: translateY(0);
-            transform: translateY(0);
-  }
-}
-@keyframes enhance-bounce-in-down {
-  25% {
-    -webkit-transform: translateY(8%);
-            transform: translateY(8%);
+    -webkit-transform: translateY(calc(var(--j) * -9.09% + 0.8%));
+            transform: translateY(calc(var(--j) * -9.09% + 0.8%));
   }
   50% {
-    -webkit-transform: translateY(-4%);
-            transform: translateY(-4%);
+    -webkit-transform: translateY(calc(var(--j) * -9.09% - 1%));
+            transform: translateY(calc(var(--j) * -9.09% - 1%));
   }
   70% {
-    -webkit-transform: translateY(2%);
-            transform: translateY(2%);
+    -webkit-transform: translateY(calc(var(--j) * -9.09% + 0.6%));
+            transform: translateY(calc(var(--j) * -9.09% + 0.6%));
   }
   85% {
-    -webkit-transform: translateY(-1%);
-            transform: translateY(-1%);
+    -webkit-transform: translateY(calc(var(--j) * -9.09% - 0.3%));
+            transform: translateY(calc(var(--j) * -9.09% - 0.3%));
   }
   to {
-    -webkit-transform: translateY(0);
-            transform: translateY(0);
+    -webkit-transform: translateY(calc(var(--j) * -9.09%));
+            transform: translateY(calc(var(--j) * -9.09%));
   }
 }

src/js/index.js

@@ -218,19 +218,24 @@ const lineChartOption = (xData, yData, interval) => {
   }
 }
 
-// 创建一组数字
-function createMultiSrollNum(box, numArr, width, height, delays, speeds) {
-  box.style.setProperty('--width', width + 'px')
-  box.style.setProperty('--height', height + 'px')
-  const docFrag = document.createDocumentFragment()
-  numArr.forEach((num, i) => {
-    docFrag.appendChild(createSrollNum(num, delays[i], speeds[i]))
-  })
-  box.appendChild(docFrag)
+// 创建多组数字
+function createMultiSrollNum(numArr, width, height) {
+  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))
+    })
+    scrollNode.appendChild(docFrag)
+  }
 }
 
 // 创建单个数字
-function createSrollNum(num, delay, speed) {
+function createSrollNum(num) {
   const scrollNumNode = document.createElement('div')
   scrollNumNode.className = 'scroll-num'
   scrollNumNode.innerHTML = `<ul class="scroll-ul">
@@ -247,32 +252,76 @@ function createSrollNum(num, delay, speed) {
   <li>0</li>
   </ul>`
 
-  scrollNumNode.style.setProperty('--i', num)
-  scrollNumNode.style.setProperty('--delay', delay)
-  scrollNumNode.style.setProperty('--speed', speed)
-
   const ulNode = scrollNumNode.childNodes[0]
-  ulNode.classList.add('init')
+  ulNode.setAttribute(
+    'style',
+    'transform: translateY(' + num * -9.09 + '%)'
+  )
   return scrollNumNode
 }
 
-function addDigitAnimate(delays, numArr) {
-  const scrollUl = document.getElementsByClassName('scroll-ul')
-  for (let i = 0; i < scrollUl.length; i++) {
-    const ulNode = scrollUl[i]
-    ulNode.classList.add('animate')
+// 创建多组数字动画
+function addMultiDigitAnimate(beforeNumArr, afterNumArr, delays, numArr) {
+  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
+
+  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 d = Math.abs(beforeNumArr[i] - afterNumArr[i]) * 0.3
+    scrollNumNode.style.setProperty('--duration', d)
+    scrollNumNode.style.setProperty('--delay', delay)
+    delay += d * 0.9
+
+    const ulNode = scrollNumNode.childNodes[0]
+    ulNode.classList.remove('animate')
+    ulNode.setAttribute(
+      'style',
+      'transform: translateY(' + beforeNumArr[i] * -9.09 + '%)'
+    )
+
+    setTimeout(() => {
+      ulNode.classList.add('animate')
+    }, 0)
+
     if (isSafari || isWeChat) {
       let timer = setTimeout(() => {
         ulNode.setAttribute(
           'style',
-          'animation: none;transform: translateY(' + numArr[i] * -9.09 + '%)'
+          'animation: none;transform: translateY(' +
+            afterNumArr[i] * -9.09 +
+            '%)'
         )
         timer = null
-      }, delays[i] * 1000)
+      }, delay * 1000)
     }
   }
 }
 
+function createRandom() {
+  const arr = []
+  for (let i = 0; i < 4; i++) {
+    let str = ''
+    for (let j = 0; j < 5; j++) {
+      const num = Math.floor(Math.random() * 10) + ''
+      str += num
+    }
+    arr.push(str)
+  }
+  return arr
+}
+
 window.onload = () => {
   // echart渲染
   const lineChart1 = echarts.init(document.getElementById('line_chart_1'))
@@ -392,12 +441,21 @@ window.onload = () => {
   // 数据统计数字滚动
   const width = 39
   const height = 50
-  const delays = [3, 4, 5, 6, 7] // 滚动多少秒停止，设置一样就一起停
-  const speeds = [2, 2.5, 3, 3.5, 4] // 滚动速率，每个数字滚动快慢不一样
-  const scrollBox = document.getElementsByClassName('scroll-box')
-  ;['35345', '83460', '36765', '36465'].forEach((numStr, i) => {
-    const numArr = numStr.split('')
-    createMultiSrollNum(scrollBox[i], numArr, width, height, delays, speeds)
-    addDigitAnimate(delays, numArr)
-  })
+
+  let beforeNumArr = ['00000', '00000', '00000', '00000']
+  let afterNumArr = ['35345', '83460', '36765', '36465']
+
+  // 初始化
+  createMultiSrollNum(beforeNumArr, width, height)
+
+  // 开始动画
+  addMultiDigitAnimate(beforeNumArr, afterNumArr)
+
+  // 测试，点击第一列数字
+  document.getElementsByClassName('scroll-box')[0].onclick = function () {
+    const numArr = createRandom()
+    beforeNumArr = afterNumArr
+    afterNumArr = numArr
+    addMultiDigitAnimate(beforeNumArr, afterNumArr)
+  }
 }

src/less/stat-bar.less

@@ -61,8 +61,8 @@
   // }
 
   .animate {
-    animation: move calc(var(--speed) * 1s) linear infinite,
-      bounce-in-down 1s calc(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;
   }
   .init {
     transform: translateY(calc(var(--i) * -9.09%));
@@ -71,57 +71,57 @@
 
 @keyframes move {
   from {
-    transform: translateY(-90%);
+    transform: translateY(calc(var(--i) * -9.09%));
     filter: url(#blur);
   }
 
   to {
-    transform: translateY(1%);
+    transform: translateY(calc(var(--j) * -9.09%));
     filter: url(#blur);
   }
 }
 
 @keyframes bounce-in-down {
   from {
-    transform: translateY(calc(var(--i) * -9.09% - 7%));
+    transform: translateY(calc(var(--j) * -9.09% - 1.0%));
     filter: none;
   }
 
   25% {
-    transform: translateY(calc(var(--i) * -9.09% + 3%));
+    transform: translateY(calc(var(--j) * -9.09% + 0.8%));
   }
 
   50% {
-    transform: translateY(calc(var(--i) * -9.09% - 1%));
+    transform: translateY(calc(var(--j) * -9.09% - 1%));
   }
 
   70% {
-    transform: translateY(calc(var(--i) * -9.09% + 0.6%));
+    transform: translateY(calc(var(--j) * -9.09% + 0.6%));
   }
 
   85% {
-    transform: translateY(calc(var(--i) * -9.09% - 0.3%));
+    transform: translateY(calc(var(--j) * -9.09% - 0.3%));
   }
 
   to {
-    transform: translateY(calc(var(--i) * -9.09%));
+    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);
-  }
-}
+// @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);
+//   }
+// }