数字翻牌器小动画

package-lock.json

@@ -15,11 +15,11 @@
         "dayjs": "^1.11.13",
         "echarts": "^5.6.0",
         "event-source-polyfill": "^1.0.31",
+        "gsap": "^3.13.0",
         "js-base64": "^3.7.7",
         "jsencrypt": "^3.3.2",
         "lodash-es": "^4.17.21",
         "naive-ui": "^2.41.0",
-        "odometer": "^0.4.8",
         "pinia": "^3.0.1",
         "pinia-plugin-persistedstate": "^4.2.0",
         "sass": "^1.85.1",
@@ -3163,6 +3163,12 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true
     },
+    "node_modules/gsap": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.13.0.tgz",
+      "integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -3794,12 +3800,6 @@
         "node": "^14.16.0 || >=16.10.0"
       }
     },
-    "node_modules/odometer": {
-      "version": "0.4.8",
-      "resolved": "https://registry.npmmirror.com/odometer/-/odometer-0.4.8.tgz",
-      "integrity": "sha512-bfKuAhWE/qMCiX9bwX90c5bTpt7MDVeq1e6YsOHQrYokNhv9jhS5JbR9kg6i+FeWmDgalf3VUtwNx1aVaZ8cgg==",
-      "license": "MIT"
-    },
     "node_modules/ohash": {
       "version": "2.0.11",
       "resolved": "https://registry.npmmirror.com/ohash/-/ohash-2.0.11.tgz",

package.json

@@ -19,11 +19,11 @@
     "dayjs": "^1.11.13",
     "echarts": "^5.6.0",
     "event-source-polyfill": "^1.0.31",
+    "gsap": "^3.13.0",
     "js-base64": "^3.7.7",
     "jsencrypt": "^3.3.2",
     "lodash-es": "^4.17.21",
     "naive-ui": "^2.41.0",
-    "odometer": "^0.4.8",
     "pinia": "^3.0.1",
     "pinia-plugin-persistedstate": "^4.2.0",
     "sass": "^1.85.1",

src/views/index.vue

@@ -335,18 +335,16 @@
         <div class="home5ItemIndex">
           <div class="home5ItemIndexEachItem">
             <div>未处理</div>
-            <div
-              ref="odometerEl"
-              style="font-size: 20px; color: red"
-            ></div>
+            <i style="font-size: 20px; color: red">
+              {{ Math.floor(currentNumber) }}
+            </i>
             <!-- <i style="font-size: 20px; color: red">458</i> -->
           </div>
           <div class="home5ItemIndexEachItem">
             <div>已处理</div>
-            <div
-              style="font-size: 20px"
-              ref="odometerEl2"
-            ></div>
+            <i style="font-size: 20px">
+              {{ Math.floor(currentNumber2) }}
+            </i>
           </div>
         </div>
       </div>
@@ -355,37 +353,24 @@
 </template>
 <script setup lang="ts">
   import { ref } from "vue";
-  import "odometer/themes/odometer-theme-default.css";
-  // @ts-ignore
-  import Odometer from "odometer";
-  const odometerEl = ref(null);
-  const odometerEl2 = ref(null);
-
   const targetNumber = 458;
+  const currentNumber = ref(0);
   const targetNumber2 = 12;
-
+  const currentNumber2 = ref(0);
+  import { gsap } from "gsap";
   onMounted(() => {
-    const od = new Odometer({
-      el: odometerEl.value,
-      value: 0,
-      format: "(,ddd)", // 格式化为千位分隔
-      duration: 2000,
+    gsap.to(currentNumber, {
+      value: targetNumber,
+      duration: 1.5,
+      ease: "power2.out",
+      onUpdate: () => {},
     });
-
-    setTimeout(() => {
-      od.update(targetNumber);
-    }, 100);
-
-    const od2 = new Odometer({
-      el: odometerEl2.value,
-      value: 0,
-      format: "(,ddd)", // 格式化为千位分隔
-      duration: 2000,
+    gsap.to(currentNumber2, {
+      value: targetNumber2,
+      duration: 1.5,
+      ease: "power2.out",
+      onUpdate: () => {},
     });
-
-    setTimeout(() => {
-      od2.update(targetNumber2);
-    }, 100);
   });
   const isFold = ref(true);
   const toggleFold = () => {