home页 文脉出现动效

src/views/Home.vue

@@ -25,7 +25,18 @@
       src="@/assets/image/博物馆的力量.png"
       alt=""
     >
-    <SlideTip />
+    <div class="slide-tip-emerge">
+      <img
+        v-for="index of 20"
+        v-show="currentFrameIdx === index - 1"
+        :key="index"
+        :src="`/wenmai-frames/Abstract Element _${(index - 1).toString().padStart(4, '0')}.png`"
+        alt=""
+        @load="onImgLoad(index - 1)"
+        @error="onImgError(index - 1)"
+      >
+    </div>
+    <SlideTip v-if="currentFrameIdx >= 20" />
     <div class="bottom-wrapper">
       <img
         class="jiangsu"
@@ -55,6 +66,9 @@
 export default {
   data() {
     return {
+      currentFrameIdx: 0,
+      imgStateList: new Array(20),
+      loadCountDown: 20,
     }
   },
   mounted() {
@@ -66,8 +80,31 @@ export default {
       console.log(ev)
       that.$router.push({ name: 'TreeAnimation' })
     })
+
+    this.intervalId = setInterval(() => {
+      if ((this.loadCountDown === 0)) {
+        do {
+          this.currentFrameIdx++
+        } while (this.imgStateList[this.currentFrameIdx] === false)
+        if (this.currentFrameIdx >= 20) {
+          clearInterval(this.intervalId)
+        }
+      }
+    }, 41)
   },
   methods: {
+    onImgLoad(idx) {
+      if (idx < 100) {
+        this.loadCountDown--
+      }
+      this.imgStateList[idx] = true
+    },
+    onImgError(idx) {
+      if (idx < 100) {
+        this.loadCountDown--
+      }
+      this.imgStateList[idx] = false
+    }
   }
 }
 </script>
@@ -107,6 +144,16 @@ export default {
     left: 50%;
     transform: translateX(-50%);
   }
+  .slide-tip-emerge {
+    position: absolute;
+    left: 50%;
+    bottom: 10rem;
+    transform: translateX(-50%);
+    img {
+      display: inline-block;
+      width: 8rem;
+    }
+  }
   .bottom-wrapper {
     position: absolute;
     width: 100%;