update:优化性能问题

src/pages/training/components/ScorePanel.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, onMounted, onBeforeUnmount } from "vue";
+import { ref, watch } from "vue";
 const props = defineProps({
   rowCount: {
     type: Number,
@@ -27,8 +27,6 @@ const bgImages = [
   "../static/complete-light1.png",
   "../static/complete-light2.png",
 ];
-const bgIndex = ref(0);
-
 const getDisplayText = (arrow) => {
   if (!arrow) return "-";
   if (arrow.ringX) return "X";
@@ -47,35 +45,30 @@ watch(
     items.value = new Array(newValue).fill(9);
   }
 );
-const timer = ref(null);
-onMounted(() => {
-  timer.value = setInterval(() => {
-    bgIndex.value = bgIndex.value === 0 ? 1 : 0;
-  }, 200);
-});
-onBeforeUnmount(() => {
-  if (timer.value) {
-    clearInterval(timer.value);
-  }
-});
 </script>
 <template>
   <view class="container">
-    <image
-      v-if="total > 0 && arrows.length === total && completeEffect"
-      :src="bgImages[bgIndex]"
-      class="complete-light"
-      :style="{
-        width: `calc(${(100 / (rowCount + 2)) * rowCount}vw + ${
-          (100 / (total * 2)) * (rowCount * 2 + (total === 12 ? 8 : 24))
-        }px)`,
-        height: `calc(${(100 / (rowCount + 2)) * (total / rowCount)}vw + ${
-          (100 / (total * 2)) *
-          ((total / rowCount) * 2 + (total === 12 ? 7 : 24))
-        }px)`,
-        top: `${total === 12 ? -2 : -3}vw`,
-      }"
-    />
+    <template v-if="total > 0 && arrows.length === total && completeEffect">
+      <image
+        v-for="(image, index) in bgImages"
+        :key="image"
+        :src="image"
+        :class="[
+          'complete-light',
+          index === 0 ? 'complete-light--first' : 'complete-light--second',
+        ]"
+        :style="{
+          width: `calc(${(100 / (rowCount + 2)) * rowCount}vw + ${
+            (100 / (total * 2)) * (rowCount * 2 + (total === 12 ? 8 : 24))
+          }px)`,
+          height: `calc(${(100 / (rowCount + 2)) * (total / rowCount)}vw + ${
+            (100 / (total * 2)) *
+            ((total / rowCount) * 2 + (total === 12 ? 7 : 24))
+          }px)`,
+          top: `${total === 12 ? -2 : -3}vw`,
+        }"
+      />
+    </template>
     <view
       v-for="(_, index) in items"
       :key="index"
@@ -154,4 +147,30 @@ onBeforeUnmount(() => {
 .complete-light {
   position: absolute;
 }
+.complete-light--first {
+  animation: complete-light-first 400ms steps(1, end) infinite;
+}
+.complete-light--second {
+  animation: complete-light-second 400ms steps(1, end) infinite;
+}
+@keyframes complete-light-first {
+  0%,
+  49.9% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes complete-light-second {
+  0%,
+  49.9% {
+    opacity: 0;
+  }
+  50%,
+  100% {
+    opacity: 1;
+  }
+}
 </style>