人物动画规则修改

src/views/PanoView.vue

@@ -33,12 +33,7 @@
       >
         <img
           v-show="animationType === 1"
-          class="frames frames-1"
-          :class="{
-            animating: isCharacterAnimating,
-            state1: characterState === 0,
-            state2: characterState === 1,
-          }"
+          class="default-frames"
           src="@/assets/images/A1-min.png"
           alt=""
           draggable="false"
@@ -47,9 +42,9 @@
           v-show="animationType === 2"
           class="frames frames-2"
           :class="{
-            animating: isCharacterAnimating,
-            state1: characterState === 0,
-            state2: characterState === 1,
+            animating: isCharacterSpecialMoving,
+            state1: isCharacterSpecialMoving === 0,
+            state2: isCharacterSpecialMoving === 1,
           }"
           src="@/assets/images/A2-min.png"
           alt=""
@@ -59,9 +54,9 @@
           v-show="animationType === 3"
           class="frames frames-3"
           :class="{
-            animating: isCharacterAnimating,
-            state1: characterState === 0,
-            state2: characterState === 1,
+            animating: isCharacterSpecialMoving,
+            state1: isCharacterSpecialMoving === 0,
+            state2: isCharacterSpecialMoving === 1,
           }"
           src="@/assets/images/A3-min.png"
           alt=""
@@ -191,8 +186,7 @@ const cameraIdx = computed(() => {
   return Number(route.query.cameraIdx)
 })
 
-const characterState = ref(0)
-const isCharacterAnimating = ref(false)
+const isCharacterSpecialMoving = ref(0)
 const animationType = ref(1)
 const isShowCameraDesc = ref(false)
 const isShowCharacterDesc = ref(false)
@@ -200,13 +194,10 @@ const showingContentIdx = ref(0)
 
 function onClickCharacter() {
   isShowCameraDesc.value = true
-  if (!isCharacterAnimating.value) {
-    animationType.value = Math.floor(Math.random() * 3) + 1
+  if (!isCharacterSpecialMoving.value) {
+    animationType.value = Math.floor(Math.random() * 2) + 2
     let duration = 0
     switch (animationType.value) {
-    case 1:
-      duration = 3000
-      break
     case 2:
       duration = 2000
       break
@@ -217,11 +208,10 @@ function onClickCharacter() {
       break
     }
     setTimeout(() => {
-      isCharacterAnimating.value = true
-      characterState.value = 1
+      isCharacterSpecialMoving.value = 1
       setTimeout(() => {
-        isCharacterAnimating.value = false
-        characterState.value = 0
+        isCharacterSpecialMoving.value = 0
+        animationType.value = 1
       }, duration)
     }, 200)
   }
@@ -504,6 +494,15 @@ onBeforeRouteUpdate((to, from) => {
       overflow: hidden;
       z-index: 1;
       cursor: pointer;
+      >.default-frames{
+        position: absolute;
+        left: 0;
+        height: 100%;
+        animation-name: character-default-animation;
+        animation-timing-function: steps(73, end);
+        animation-duration: 3s;
+        animation-iteration-count: infinite;
+      }
       >.frames {
         position: absolute;
         height: 100%;
@@ -515,13 +514,6 @@ onBeforeRouteUpdate((to, from) => {
           left: 0;
         }
       }
-      >.frames-1{
-        transition-duration: @duration-1;
-        transition-timing-function: steps(@frame-num-1 - 1, jump-end);
-        &.state2 {
-          left: calc(-100% * (@frame-num-1 - 1));
-        }
-      }
       >.frames-2{
         transition-duration: @duration-2;
         transition-timing-function: steps(@frame-num-2 - 1, jump-end);
@@ -678,4 +670,12 @@ onBeforeRouteUpdate((to, from) => {
     z-index: 10;
   }
 }
+@keyframes character-default-animation {
+  0% {
+    translate: 0 0;
+  }
+  100% {
+    translate: -100% 0;
+  }
+}
 </style>