第一步的工具动画

src/views/StepView1.vue

@@ -15,6 +15,16 @@
       muted
       @ended="workState = 'done'"
     />
+    <img
+      v-show="workState === 'working'"
+      class="tool"
+      :style="{
+        animationPlayState: workState === 'working' ? 'running' : 'paused',
+      }"
+      :src="toolList[requiredToolList[0]].url"
+      alt=""
+      draggable="false"
+    >
   </div>
 </template>
 
@@ -75,5 +85,47 @@ watch(workState, (vNew) => {
     height: 100%;
     object-fit: contain;
   }
+  >img.tool{
+    position: absolute;
+    transform: translate(-10%, -95%);
+    width: calc(85 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    animation-name: tool-move;
+    animation-delay: 0.3s;
+    animation-duration: 1.9s;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+    left: 10%;
+    top: 10%;
+  }
+}
+@keyframes tool-move {
+  15% {
+    left: 90%;
+    top: 10%;
+  }
+  30% {
+    left: 10%;
+    top: 30%;
+  }
+  45% {
+    left: 90%;
+    top: 30%;
+  }
+  60% {
+    left: 10%;
+    top: 70%;
+  }
+  75% {
+    left: 90%;
+    top: 70%;
+  }
+  88% {
+    left: 10%;
+    top: 90%;
+  }
+  100% {
+    left: 90%;
+    top: 90%;
+  }
 }
 </style>