工具动画完成

src/views/DrawView.vue

@@ -74,7 +74,7 @@ const {
 inject('$uaInfo')
 inject('$env')
 
-const curStepIdx = ref(0)
+const curStepIdx = ref(4)
 
 const currentStepInfo = computed(() => {
   return config.stepList[curStepIdx.value]

src/views/StepView1.vue

@@ -47,7 +47,7 @@ watch(selectedToolNum, (vNew) => {
   if (vNew === requiredToolList.value.length) {
     setTimeout(() => {
       workState.value = 'working'
-    }, 500)
+    }, 1000)
   }
 })
 

src/views/StepView2.vue

@@ -31,6 +31,16 @@
       muted
       @ended="workState = 'done'"
     />
+    <img
+      v-show="workState === 'working'"
+      class="tool"
+      :style="{
+        animationPlayState: workState === 'working' ? 'running' : 'paused',
+      }"
+      :src="toolList[0].url"
+      alt=""
+      draggable="false"
+    >
   </div>
 </template>
 
@@ -53,7 +63,7 @@ watch(selectedToolNum, (vNew) => {
   if (vNew === requiredToolList.value.length) {
     setTimeout(() => {
       workState.value = 'working'
-    }, 500)
+    }, 1000)
   }
 })
 
@@ -113,9 +123,53 @@ watch(workState, (vNew) => {
     position: absolute;
     left: 0;
     top: 0;
-    width: 94%;
-    height: 97%;
+    width: 98%;
+    height: 98%;
     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.7s;
+    animation-duration: 2.6s;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+    left: 90%;
+    top: 10%;
+  }
+}
+@keyframes tool-move {
+  10% {
+    left: 10%;
+    top: 30%;
+  }
+  20% {
+    left: 90%;
+    top: 50%;
+  }
+  30% {
+    left: 10%;
+    top: 70%;
+  }
+  40% {
+    left: 90%;
+    top: 80%;
+  }
+  50% {
+    left: 10%;
+    top: 80%;
+  }
+  60% {
+    left: 10%;
+    top: 80%;
+    display: none;
+  }
+  100% {
+    left: 10%;
+    top: 80%;
+    display: none;
+  }
 }
 </style>

src/views/StepView3.vue

@@ -23,6 +23,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>
 
@@ -45,7 +55,7 @@ watch(selectedToolNum, (vNew) => {
   if (vNew === requiredToolList.value.length) {
     setTimeout(() => {
       workState.value = 'working'
-    }, 500)
+    }, 1000)
   }
 })
 
@@ -88,5 +98,39 @@ watch(workState, (vNew) => {
     width: 96.9%;
     height: 98%;
   }
+  >img.tool{
+    position: absolute;
+    transform: translate(-10%, -95%);
+    width: calc(85 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    animation-name: tool-move;
+    animation-delay: 0.2s;
+    animation-duration: 1.3s;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+    left: 90%;
+    top: 10%;
+  }
+}
+@keyframes tool-move {
+  20% {
+    left: 10%;
+    top: 35%;
+  }
+  40% {
+    left: 90%;
+    top: 35%;
+  }
+  60% {
+    left: 10%;
+    top: 60%;
+  }
+  80% {
+    left: 90%;
+    top: 60%;
+  }
+  100% {
+    left: 10%;
+    top: 85%;
+  }
 }
 </style>

src/views/StepView4.vue

@@ -56,6 +56,16 @@
       muted
       @ended="workState = 'done'"
     />
+    <img
+      v-show="workState === 'working' && innerState !== 0"
+      class="tool"
+      :style="{
+        animationPlayState: (workState === 'working' && innerState !== 0) ? 'running' : 'paused',
+      }"
+      :src="toolList[3].url"
+      alt=""
+      draggable="false"
+    >
   </div>
 </template>
 
@@ -78,11 +88,11 @@ watch(selectedToolNum, (vNew) => {
   if (vNew === 1) {
     setTimeout(() => {
       workState.value = 'working'
-    }, 500)
+    }, 1000)
   } else if (vNew === 2) {
     setTimeout(() => {
       workState.value = 'working'
-    }, 500)
+    }, 1000)
   }
 })
 
@@ -136,5 +146,55 @@ watch(workState, (vNew) => {
     top: calc(169 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
     width: 97.5%;
   }
+  >img.tool{
+    position: absolute;
+    transform: translate(-10%, -50%) rotate(45deg);
+    width: calc(85 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    animation-name: tool-move;
+    animation-delay: 0.2s;
+    animation-duration: 5s;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+    left: 15%;
+    top: 15%;
+  }
+}
+@keyframes tool-move {
+  5% {
+    left: 85%;
+    top: 15%;
+  }
+  10% {
+    left: 15%;
+    top: 15%;
+  }
+  15% {
+    left: 85%;
+    top: 15%;
+  }
+  20% {
+    left: 15%;
+    top: 15%;
+  }
+  25% {
+    left: 85%;
+    top: 15%;
+  }
+  55% {
+    left: 0;
+    top: 70%;
+  }
+  75% {
+    left: 90%;
+    top: 70%;
+  }
+  80% {
+    left: 0;
+    top: 70%;
+  }
+  100% {
+    left: 90%;
+    top: 70%;
+  }
 }
 </style>

src/views/StepView5.vue

@@ -19,6 +19,16 @@
       muted
       @ended="workState = 'done'"
     />
+    <img
+      v-show="workState === 'working'"
+      class="tool"
+      :style="{
+        animationPlayState: workState === 'working' ? 'running' : 'paused',
+      }"
+      :src="toolList[4].url"
+      alt=""
+      draggable="false"
+    >
   </div>
 </template>
 
@@ -41,7 +51,7 @@ watch(selectedToolNum, (vNew) => {
   if (vNew === requiredToolList.value.length) {
     setTimeout(() => {
       workState.value = 'working'
-    }, 500)
+    }, 1000)
   }
 })
 
@@ -85,5 +95,39 @@ watch(workState, (vNew) => {
     width: 97%;
     height: 98%;
   }
+  >img.tool{
+    position: absolute;
+    transform: translate(-30%, -65%);
+    width: calc(85 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    animation-name: tool-move;
+    animation-delay: 0.7s;
+    animation-duration: 1.3s;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+    left: 90%;
+    top: 10%;
+  }
+}
+@keyframes tool-move {
+  20% {
+    left: 10%;
+    top: 30%;
+  }
+  40% {
+    left: 90%;
+    top: 50%;
+  }
+  60% {
+    left: 10%;
+    top: 70%;
+  }
+  80% {
+    left: 90%;
+    top: 80%;
+  }
+  100% {
+    left: 10%;
+    top: 80%;
+  }
 }
 </style>