小狮子动效

src/views/Level3.vue

@@ -42,14 +42,19 @@
         query: $route.query,
       })"
     />
-    <div class="lion-wrapper">
+    <div
+      class="lion-wrapper"
+    >
       <img
         class="lion"
-        :src="require(`@/assets/images/lion-${sceneInfo.lionGender}-speaking.png`)"
+        :src="require(`@/assets/images/lion-${sceneInfo.lionGender}-${isLionWalking ? 'walking' : 'speaking'}.gif`)"
         alt=""
         draggable="false"
       >
-      <div class="speach-text-wrapper" />
+      <div
+        v-show="!isLionWalking"
+        class="speach-text-wrapper"
+      />
     </div>
   </div>
 </template>
@@ -59,6 +64,7 @@ export default {
   name: 'Level3View',
   data() {
     return {
+      isLionWalking: true,
     }
   },
   computed: {
@@ -69,6 +75,9 @@ export default {
     },
   },
   mounted() {
+    setTimeout(() => {
+      this.isLionWalking = false
+    }, 6000)
   },
   unmounted() {
   },
@@ -169,10 +178,13 @@ export default {
   }
   .lion-wrapper {
     position: absolute;
-    left: 24px;
-    bottom: 36px;
+    bottom: 50px;
     width: 0;
     height: 0;
+    animation-name: walk;
+    animation-duration: 6s;
+    animation-timing-function: cubic-bezier(.13,.23,.48,.86);
+    animation-fill-mode: forwards;
     >img.lion {
       position: absolute;
       left: 0;
@@ -196,4 +208,13 @@ export default {
     }
   }
 }
+
+@keyframes walk {
+  0% {
+    left: -300px;
+  }
+  100% {
+    left: 0px;
+  }
+}
 </style>