同样的技术，更换应用对象

src/views/HomeView.vue

@@ -28,12 +28,6 @@
       class="people-far-wrap"
       :style="{
         right: peopleFarPositionRight,
-        zIndex: [1, 2, 3].includes(tourState) ? 2 : 0,
-        transform:
-          tourState === 0 ? `scale(1)` :
-          tourState === 1 ? `scale(${1 + 0.3 / treasureFadeInProgressRightBorder * treasureFadeInProgress})` :
-          tourState === 2 ? `scale(1.3)` :
-          'scale(1)'
       }"
     >
       <img
@@ -42,30 +36,37 @@
         alt=""
         @dragstart.prevent
       >
-      <img
-        v-if="[1].includes(tourState)"
-        class="treasure"
-        :style="{
-          opacity: treasureFadeInProgress / treasureFadeInProgressRightBorder
-        }"
-        src="@/assets/treasure.png"
-        alt=""
-        @dragstart.prevent
-      >
+      <HotSpot
+        class="hot-spot"
+        @click="onClickPeopleNearHotSpot"
+      />
     </div>
     <div
-      class="people-near"
+      class="people-near-wrap"
       :style="{
-        right: peopleNearPositionRight,
+        left: peopleNearPositionLeft,
+        zIndex: [0, 1, 2].includes(tourState) ? 2 : 0,
       }"
     >
       <img
-        class="people-near-serial-frames"
+        class="people-near"
         :class="peopleNearColorStatus"
         src="@/assets/people-near-serial-frame-400-600-60.png"
         alt=""
         @dragstart.prevent
       >
+      <img
+        v-if="[0, 2].includes(tourState)"
+        class="treasure"
+        :style="{
+          opacity: tourState === 0 ?
+            treasureFadeInProgress / treasureFadeInProgressRightBorder :
+            1 - treasureFadeOutProgress / treasureFadeOutProgressRightBorder
+        }"
+        src="@/assets/treasure.png"
+        alt=""
+        @dragstart.prevent
+      >
       <HotSpot
         class="hot-spot"
         @click="onClickPeopleNearHotSpot"
@@ -82,16 +83,28 @@
     >
 
     <div
-      v-if="[1, 2, 3].includes(tourState)"
+      v-if="[0, 1, 2].includes(tourState)"
       class="fade-mask"
       :style="{
-        opacity: treasureFadeInProgress / treasureFadeInProgressRightBorder
+        opacity: tourState === 0 ?
+          treasureFadeInProgress / treasureFadeInProgressRightBorder :
+          1 - treasureFadeOutProgress / treasureFadeOutProgressRightBorder
       }"
     />
   </div>
 </template>
 
 <script>
+const initialPeopleNearPositionLeft = '25%'
+const initPeopleFarPositionRight = '10%'
+const landscapeSpeedRate = 0.01
+const peopleFarSpeedRate = 0.2
+const peopleNearSpeedRate = 0.8
+const introduceSpeedRate = 1
+const treasureFadeInProgressRightBorder = 2000
+const treasureDisplayProgressRightBorder = 1000
+const treasureFadeOutProgressRightBorder = 2000
+
 export default {
   name: 'HomeView',
   components: {
@@ -107,22 +120,25 @@ export default {
       lastAnimationTimeStamp: 0,
       animationFrameId: null,
 
-      tourState: 0, // 0: 第一次镜头平移阶段；1：宝物渐入过渡阶段；2:宝物三维展示阶段；3：宝物渐出过渡阶段；
+      tourState: 0, // 0:宝物淡入过渡阶段；1:宝物三维展示阶段；2：宝物渐出过渡阶段；3：镜头平移阶段
 
       // 镜头平移相关
       translateLength: 0,
       landscapePositionleft: '18.491%',
-      peopleFarPositionRight: '0px',
-      peopleNearPositionRight: '-30%',
+      peopleFarPositionRight: initPeopleFarPositionRight,
+      peopleNearPositionLeft: initialPeopleNearPositionLeft,
       introducePositionLeft: '3.347%',
 
-      // 宝物渐入相关
+      // 宝物淡入相关
       treasureFadeInProgress: 0,
-      treasureFadeInProgressRightBorder: 2000,
+      treasureFadeInProgressRightBorder,
 
       // 宝物展示相关
       treasureDisplayProgress: 0,
-      treasureDisplayProgressRightBorder: 10000,
+
+      // 宝物淡出相关
+      treasureFadeOutProgress: 0,
+      treasureFadeOutProgressRightBorder,
 
       // 前景人物变色相关
       peopleNearColorStatus: 'no-color', // 'no-color', 'color'
@@ -132,71 +148,93 @@ export default {
   watch: {
     translateLength: {
       handler(vNew, vOld) {
-        const leftBorder = 0
-        const rightBorder = window.innerWidth * 2
+        // const rightBorder = window.innerWidth * 2
 
-        if (vOld > -rightBorder && vNew <= -rightBorder && this.tourState === 0) {
-          this.tourState = 1
+        if (vOld < 0 && vNew >= 0 && this.tourState === 3) {
+          this.tourState = 2
         }
+        // if (vOld > -rightBorder && vNew <= -rightBorder && this.tourState === 3) {
+        //   this.tourState = 1
+        // }
 
-        if (vNew > leftBorder) {
-          vNew = leftBorder
-          this.translateLength = vNew
-          this.moveSpeed = 0
-        } else if (vNew < -rightBorder) {
-          vNew = -rightBorder
+        if (vNew > 0) {
+          vNew = 0
           this.translateLength = vNew
           // this.moveSpeed = 0
         }
+        //  else if (vNew < -rightBorder) {
+        //   vNew = -rightBorder
+        //   this.translateLength = vNew
+        //   // this.moveSpeed = 0
+        // }
 
-        this.landscapePositionleft = `calc(18.491% + ${vNew * 0.01}px)`
-        this.peopleFarPositionRight = `calc(0px - ${vNew * 0.2}px)`
-        this.peopleNearPositionRight = `calc(-30% - ${vNew * 0.8}px)`
-        this.introducePositionLeft = `calc(3.347% + ${vNew * 1}px)`
+        this.landscapePositionleft = `calc(18.491% + ${vNew * landscapeSpeedRate}px)`
+        this.peopleFarPositionRight = `calc(${initPeopleFarPositionRight} - ${vNew * peopleFarSpeedRate}px)`
+        this.peopleNearPositionLeft = `calc(${initialPeopleNearPositionLeft} + ${vNew * peopleNearSpeedRate}px)`
+        this.introducePositionLeft = `calc(3.347% + ${vNew * introduceSpeedRate}px)`
+
+        console.log('平移阶段！', this.translateLength)
       }
     },
     treasureFadeInProgress: {
       handler(vNew, vOld) {
-        const leftBorder = 0
-
-        if (vOld >= leftBorder && vNew < leftBorder && this.tourState === 1) {
-          this.tourState = 0
-        } else if (vOld <= this.treasureFadeInProgressRightBorder && vNew > this.treasureFadeInProgressRightBorder && this.tourState === 1) {
-          this.tourState = 2
+        if (vOld <= this.treasureFadeInProgressRightBorder && vNew > this.treasureFadeInProgressRightBorder && this.tourState === 0) {
+          this.tourState = 1
         }
 
-        if (vNew < leftBorder) {
-          vNew = leftBorder
-          this.treasureFadeInProgress = leftBorder
-          // this.moveSpeed = 0
+        if (vNew < 0) {
+          vNew = 0
+          this.treasureFadeInProgress = 0
+          this.moveSpeed = 0
         } else if (vNew > this.treasureFadeInProgressRightBorder) {
           vNew = this.treasureFadeInProgressRightBorder
           this.treasureFadeInProgress = this.treasureFadeInProgressRightBorder
           // this.moveSpeed = 0
         }
+        console.log('fadeIn阶段！', this.treasureFadeInProgress)
       }
     },
     treasureDisplayProgress: {
       handler(vNew, vOld) {
-        const leftBorder = 0
+        if (vOld >= 0 && vNew < 0 && this.tourState === 1) {
+          this.tourState = 0
+        } else if (vOld <= treasureDisplayProgressRightBorder && vNew > treasureDisplayProgressRightBorder && this.tourState === 1) {
+          this.tourState = 2
+        }
 
-        if (vOld >= leftBorder && vNew < leftBorder && this.tourState === 2) {
+        if (vNew < 0) {
+          vNew = 0
+          this.treasureDisplayProgress = 0
+          // this.moveSpeed = 0
+        } else if (vNew > treasureDisplayProgressRightBorder) {
+          vNew = treasureDisplayProgressRightBorder
+          this.treasureDisplayProgress = treasureDisplayProgressRightBorder
+          // this.moveSpeed = 0
+        }
+        console.log('display阶段！', this.treasureDisplayProgress)
+      }
+    },
+    treasureFadeOutProgress: {
+      handler(vNew, vOld) {
+        if (vOld >= 0 && vNew < 0 && this.tourState === 2) {
           this.tourState = 1
-        } else if (vOld <= this.treasureDisplayProgressRightBorder && vNew > this.treasureDisplayProgressRightBorder && this.tourState === 2) {
+        } else if (vOld <= this.treasureFadeOutProgressRightBorder && vNew > this.treasureFadeOutProgressRightBorder && this.tourState === 2) {
           this.tourState = 3
         }
 
-        if (vNew < leftBorder) {
-          vNew = leftBorder
-          this.treasureDisplayProgress = leftBorder
+        if (vNew < 0) {
+          vNew = 0
+          this.treasureFadeOutProgress = 0
           // this.moveSpeed = 0
-        } else if (vNew > this.treasureDisplayProgressRightBorder) {
-          vNew = this.treasureDisplayProgressRightBorder
-          this.treasureDisplayProgress = this.treasureDisplayProgressRightBorder
+        } else if (vNew > this.treasureFadeOutProgressRightBorder) {
+          vNew = this.treasureFadeOutProgressRightBorder
+          this.treasureFadeOutProgress = this.treasureFadeOutProgressRightBorder
           // this.moveSpeed = 0
         }
+
+        console.log('fadeOut阶段！', this.treasureFadeOutProgress)
       }
-    }
+    },
   },
   mounted() {
     this.animationFrameId = requestAnimationFrame(this.inertanceEffect)
@@ -228,12 +266,14 @@ export default {
       }
     },
     onWheel(e) {
-      if (this.tourState === 0) {
+      if (this.tourState === 3) {
         this.translateLength -= e.deltaY
-      } else if (this.tourState === 1) {
+      } else if (this.tourState === 0) {
         this.treasureFadeInProgress += e.deltaY
-      } else if (this.tourState === 2) {
+      } else if (this.tourState === 1) {
         this.treasureDisplayProgress += e.deltaY
+      } else if (this.tourState === 2) {
+        this.treasureFadeOutProgress += e.deltaY
       }
     },
     inertanceEffect() {
@@ -254,12 +294,14 @@ export default {
       }
 
       // 根据速度更新“距离”
-      if (this.tourState === 0) {
+      if (this.tourState === 3) {
         this.translateLength += this.moveSpeed * timeElapsed
-      } else if (this.tourState === 1) {
+      } else if (this.tourState === 0) {
         this.treasureFadeInProgress -= this.moveSpeed * timeElapsed
-      } else if (this.tourState === 2) {
+      } else if (this.tourState === 1) {
         this.treasureDisplayProgress -= this.moveSpeed * timeElapsed
+      } else if (this.tourState === 2) {
+        this.treasureFadeOutProgress -= this.moveSpeed * timeElapsed
       }
 
       this.lastAnimationTimeStamp = timeStamp
@@ -305,32 +347,25 @@ export default {
   }
   > .people-far-wrap {
     position: absolute;
-    top: 20%;
-    height: 60%;
+    top: 25%;
+    height: 55%;
     > .people-far {
       height: 100%;
     }
-    > .treasure {
-      position: absolute;
-      left: 48%;
-      top: 22.6%;
-      width: 7%;
-      height: 3.5%;
-    }
-  }
-  .people-near {
-    position: absolute;
-    bottom: 0;
-    height: 90vh;
-    width: calc(90vh * 400 / 600);
-    overflow: hidden;
     > .hot-spot {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      top: 17%;
+      top: 10%;
     }
-    > .people-near-serial-frames {
+  }
+  .people-near-wrap {
+    position: absolute;
+    bottom: -13%;
+    height: 100vh;
+    width: calc(100vh * 400 / 600);
+    overflow: hidden;
+    > .people-near {
       position: absolute;
       height: 100%;
       transition-property: left;
@@ -343,6 +378,19 @@ export default {
         left: calc(-100% * 59)
       }
     }
+    > .hot-spot {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 17%;
+    }
+    > .treasure {
+      position: absolute;
+      left: 48%;
+      top: 22.6%;
+      width: 7%;
+      height: 3.5%;
+    }
   }
   .introduce {
     position: absolute;