人物序列帧

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --mode dev",
-    "build-test": "vue-cli-service build --mode test",
+    "build-test": "vue-cli-service build --mode mytest",
     "build-prod": "vue-cli-service build --mode prod",
     "lint": "vue-cli-service lint"
   },

src/views/PanoView.vue

@@ -27,13 +27,47 @@
       >
         <span>趙孟頫</span>
       </button>
-      <img
-        class="character"
-        src="@/assets/images/character-zhaomengfu.png"
-        alt=""
-        draggable="false"
-        @click="isShowCameraDesc = true"
+      <div
+        class="character-frames-wrapper"
+        @click="onClickCharacter"
       >
+        <img
+          v-show="animationType === 1"
+          class="frames frames-1"
+          :class="{
+            animating: isCharacterAnimating,
+            state1: characterState === 0,
+            state2: characterState === 1,
+          }"
+          src="@/assets/images/A1-min.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          v-show="animationType === 2"
+          class="frames frames-2"
+          :class="{
+            animating: isCharacterAnimating,
+            state1: characterState === 0,
+            state2: characterState === 1,
+          }"
+          src="@/assets/images/A2-min.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          v-show="animationType === 3"
+          class="frames frames-3"
+          :class="{
+            animating: isCharacterAnimating,
+            state1: characterState === 0,
+            state2: characterState === 1,
+          }"
+          src="@/assets/images/A3-min.png"
+          alt=""
+          draggable="false"
+        >
+      </div>
       <img
         class="btn-track"
         src="@/assets/images/people-btn-track.png"
@@ -157,10 +191,42 @@ const cameraIdx = computed(() => {
   return Number(route.query.cameraIdx)
 })
 
+const characterState = ref(0)
+const isCharacterAnimating = ref(false)
+const animationType = ref(1)
 const isShowCameraDesc = ref(false)
 const isShowCharacterDesc = ref(false)
 const showingContentIdx = ref(0)
 
+function onClickCharacter() {
+  isShowCameraDesc.value = true
+  if (!isCharacterAnimating.value) {
+    animationType.value = Math.floor(Math.random() * 3) + 1
+    let duration = 0
+    switch (animationType.value) {
+    case 1:
+      duration = 3000
+      break
+    case 2:
+      duration = 2000
+      break
+    case 3:
+      duration = 1500
+      break
+    default:
+      break
+    }
+    setTimeout(() => {
+      isCharacterAnimating.value = true
+      characterState.value = 1
+      setTimeout(() => {
+        isCharacterAnimating.value = false
+        characterState.value = 0
+      }, duration)
+    }, 200)
+  }
+}
+
 const sceneList = ref([
   {
     sceneName: '大汗之城',
@@ -379,24 +445,24 @@ onBeforeRouteUpdate((to, from) => {
   }
   >.character-wrap{
     position: absolute;
-    left: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    left: 40px;
     bottom: 0;
-    width: calc(335 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(452 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: 300px;
+    height: 452px;
     >button.name{
       position: absolute;
-      top: 0;
+      top: 50px;
       left: 0;
       transform: translateX(-50%);
-      width: calc(36 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(178 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      z-index: 1;
-      font-size: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: 36px;
+      height: 178px;
+      z-index: 3;
+      font-size: 23px;
       font-family: Source Han Serif SC, Source Han Serif SC;
       font-weight: 400;
       color: #43310E;
-      line-height: calc(27 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      letter-spacing: calc(7 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      line-height: 27px;
+      letter-spacing: 7px;
       writing-mode: vertical-lr;
       background-image: url(@/assets/images/people-name-bg.png);
       background-size: contain;
@@ -409,77 +475,118 @@ onBeforeRouteUpdate((to, from) => {
         transform: translate(-50%, -50%);
       }
     }
-    >img.character{
+    @frame-width: 256px;
+    @frame-height: 512px;
+    @duration-1: 3s;
+    @frame-num-1: 72;
+    @duration-2: 2s;
+    @frame-num-2: 48;
+    @duration-3: 1.5s;
+    @frame-num-3: 36;
+    >.character-frames-wrapper {
       position: absolute;
       left: 0;
-      top: 0;
-      width: 100%;
-      height: auto;
+      top: -60px;
+      height: @frame-height;
+      width: @frame-width;
+      overflow: hidden;
       z-index: 1;
       cursor: pointer;
-
+      >.frames {
+        position: absolute;
+        height: 100%;
+        transition-property: none;
+        &.animating{
+          transition-property: left;
+        }
+        &.state1 {
+          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);
+        &.state2 {
+          left: calc(-100% * (@frame-num-2 - 1));
+        }
+      }
+      >.frames-3{
+        transition-duration: @duration-3;
+        transition-timing-function: steps(@frame-num-3 - 1, jump-end);
+        &.state2 {
+          left: calc(-100% * (@frame-num-3 - 1));
+        }
+      }
     }
     >img.btn-track{
       position: absolute;
-      width: calc(598 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(598 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      left: calc(-52 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      bottom: calc(-101 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: 450px;
+      height: 598px;
+      left: -52px;
+      bottom: -101px;
     }
     >button.btn-on-track{
       position: absolute;
-      width: calc(78 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(78 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: 78px;
+      height: 78px;
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center center;
       text-align: left;
+      z-index: 3;
       >span{
-        margin-left: calc(120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        margin-left: 120px;
         display: none;
-        font-size: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: 23px;
         font-family: Source Han Serif SC, Source Han Serif SC;
         font-weight: 600;
         color: #FFF1BE;
-        line-height: calc(27 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        line-height: 27px;
+        letter-spacing: 5px;
       }
       &:hover{
-        width: calc(397 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        height: calc(91 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        transform: translate(calc(-10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')), calc(-10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
+        width: 397px;
+        height: 91px;
+        transform: translate(-10px);
         >span{
           display: initial;
         }
       }
     }
     >button.one{
-      left: calc(310 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      top: calc(-39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      left: 210px;
+      top: -39px;
       background-image: v-bind(btnOnTrack1ImgUrl);
       &:hover{
         background-image: v-bind(btnOnTrack1ActiveImgUrl);
       }
     }
     >button.two{
-      left: calc(433 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      top: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      left: 306px;
+      top: 62px;
       background-image: v-bind(btnOnTrack2ImgUrl);
       &:hover{
         background-image: v-bind(btnOnTrack2ActiveImgUrl);
       }
     }
     >button.three{
-      left: calc(483 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      top: calc(205 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      left: 340px;
+      top: 205px;
       background-image: v-bind(btnOnTrack3ImgUrl);
       &:hover{
         background-image: v-bind(btnOnTrack3ActiveImgUrl);
       }
     }
     >button.four{
-      left: calc(450 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      top: calc(353 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      left: 314px;
+      top: 353px;
       background-image: v-bind(btnOnTrack4ImgUrl);
       &:hover{
         background-image: v-bind(btnOnTrack4ActiveImgUrl);