方向调整效果修改

src/components/BowTarget.vue

@@ -50,6 +50,7 @@ const prevBlueScores = ref([]);
 const timer = ref(null);
 const dirTimer = ref(null);
 const angle = ref(null);
+const circleColor = ref("");
 
 watch(
   () => props.scores,
@@ -124,10 +125,14 @@ async function onReceiveMessage(messages = []) {
         !msg.target.ring &&
         msg.target.angle >= 0
       ) {
-        angle.value = msg.target.angle;
-        dirTimer.value = setTimeout(() => {
         angle.value = null;
-        }, 1200);
+        setTimeout(() => {
+          if (props.scores[0]) {
+            circleColor.value =
+              msg.userId === props.scores[0].playerId ? "#ff4444" : "blue";
+          }
+          angle.value = msg.target.angle;
+        }, 200);
       }
     }
   });
@@ -161,7 +166,9 @@ onBeforeUnmount(() => {
     </view>
     <view class="target">
       <view v-if="angle !== null" class="arrow-dir" :style="arrowStyle">
-        <image src="../static/arrow-direction.png" mode="widthFix" />
+        <view :style="{ background: circleColor }">
+          <image src="../static/dot-circle.png" mode="widthFix" />
+        </view>
       </view>
       <view v-if="stop" class="stop-sign">中场休息</view>
       <view
@@ -380,24 +387,72 @@ onBeforeUnmount(() => {
   z-index: 99;
   font-weight: bold;
 }
-@keyframes spring-in {
-  0% {
-    transform: translateY(-20px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
 .arrow-dir {
   position: absolute;
-  width: 36%;
+  width: 100%;
+  height: 52%;
   left: 50%;
   bottom: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.arrow-dir > image {
+.arrow-dir > view {
-  animation: spring-in 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+}
+.arrow-dir > view > image {
+  width: 100rpx;
+  height: 100rpx;
+  transform: translate(-30%, -30%);
+}
+@keyframes spring-in {
+  0% {
+    transform: scale(2);
+    opacity: 0.4;
+  }
+  15% {
+    transform: scale(3);
+    opacity: 1;
+  }
+  30% {
+    transform: scale(2);
+    opacity: 0.4;
+  }
+  45% {
+    transform: scale(3);
+    opacity: 1;
+  }
+  60% {
+    transform: scale(2);
+    opacity: 0.4;
+  }
+  75% {
+    transform: scale(3);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+@keyframes disappear {
+  0% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.arrow-dir > view {
+  animation: disappear 3s ease forwards;
+}
+.arrow-dir > view > image {
+  animation: spring-in 3s ease forwards;
   width: 100%;
 }
 </style>