拖拽和滚轮只能控制平移

src/views/HomeView.vue

@@ -94,6 +94,10 @@
         alt=""
         @dragstart.prevent
       >
+      <HotSpot
+        class="hot-spot"
+        @click="onClickPeopleNearHotSpot"
+      />
       <img
         v-show="[0, 1].includes(tourState)"
         ref="treasure"
@@ -177,10 +181,10 @@ const cloud3SpeedRate = 0.4
 const peopleFarSpeedRate = 0.4
 const peopleNearSpeedRate = 0.6
 const introduceSpeedRate = 0.6
+const translateLengthRightBorder = 9000
 const treasureFadeInProgressRightBorder = 3000
 const treasureDisplayProgressRightBorder = 6000
 const treasureFadeOutProgressRightBorder = 2000
-const translateLengthRightBorder = 9000
 const treasureFrameTotalNum = 125
 const treasureInitialHeightPercent = 9
 const treasureFinalHeightPercent = 116
@@ -200,7 +204,7 @@ export default {
       lastAnimationTimeStamp: 0,
       animationFrameId: null,
 
-      tourState: 0, // 0:文物淡入过渡阶段；1:文物三维展示阶段；2：文物渐出过渡阶段；3：镜头平移阶段
+      tourState: 3, // 0:文物淡入过渡阶段；1:文物三维展示阶段；2：文物渐出过渡阶段；3：镜头平移阶段
 
       // 镜头平移相关
       translateLength: 0,
@@ -304,21 +308,6 @@ export default {
     },
   },
   watch: {
-    tourState(vNew, vOld) {
-      if (vOld === 0 && vNew === 1) {
-        this.treasureDisplayProgress += 0.001
-      } else if (vOld === 1 && vNew === 2) {
-        this.treasureFadeOutProgress += 0.001
-      } else if (vOld === 2 && vNew === 3) {
-        this.translateLength -= 0.001
-      } else if (vOld === 3 && vNew === 2) {
-        this.treasureFadeOutProgress -= 0.001
-      } else if (vOld === 2 && vNew === 1) {
-        this.treasureDisplayProgress -= 0.001
-      } else if (vOld === 1 && vNew === 0) {
-        this.treasureFadeInProgress -= 0.001
-      }
-    },
     treasureFadeInProgress: {
       handler(vNew, vOld) {
         if (vOld < this.treasureFadeInProgressRightBorder && vNew >= this.treasureFadeInProgressRightBorder && this.tourState === 0) {
@@ -365,13 +354,6 @@ export default {
       handler(vNew, vOld) {
         // const rightBorder = window.innerWidth * 2
 
-        if (vOld < 0 && vNew >= 0 && this.tourState === 3) {
-          this.tourState = 2
-        }
-        // if (vOld > -rightBorder && vNew <= -rightBorder && this.tourState === 3) {
-        //   this.tourState = 1
-        // }
-
         this.paperPositionLeft = `${vNew * landscapeSpeedRate}px`
         this.landscapePositionLeft = `calc(18.491% + ${vNew * landscapeSpeedRate}px)`
         this.cloud2PositionLeft = `calc(${initialCloud2PositionLeft} + ${vNew * cloud2SpeedRate}px)`
@@ -385,12 +367,6 @@ export default {
   },
   mounted() {
     this.animationFrameId = requestAnimationFrame(this.inertanceEffect)
-    setTimeout(() => {
-      this.treasureFadeInInitialLeft = this.$refs.treasure.offsetLeft
-      this.treasureFadeInInitialTop = this.$refs.treasure.offsetTop
-      this.treasureFadeInFinalLeft = window.innerWidth / 2 - this.$refs.treasure.offsetParent.offsetLeft
-      this.treasureFadeInFinalTop = window.innerHeight / 2 - this.$refs.treasure.offsetParent.offsetTop
-    }, 100)
   },
   unmounted() {
     cancelAnimationFrame(this.animationFrameId)
@@ -419,29 +395,7 @@ export default {
       }
     },
     onWheel(e) {
-      if (this.tourState === 0) {
-        this.treasureFadeInProgress += e.deltaY
-        if (this.treasureFadeInProgress < 0) {
-          this.treasureFadeInProgress = 0
-          this.moveSpeed = 0
-        } else if (this.treasureFadeInProgress > this.treasureFadeInProgressRightBorder) {
-          this.treasureFadeInProgress = this.treasureFadeInProgressRightBorder
-        }
-      } else if (this.tourState === 1) {
-        this.treasureDisplayProgress += e.deltaY
-        if (this.treasureDisplayProgress < 0) {
-          this.treasureDisplayProgress = 0
-        } else if (this.treasureDisplayProgress > treasureDisplayProgressRightBorder) {
-          this.treasureDisplayProgress = treasureDisplayProgressRightBorder
-        }
-      } else if (this.tourState === 2) {
-        this.treasureFadeOutProgress += e.deltaY
-        if (this.treasureFadeOutProgress < 0) {
-          this.treasureFadeOutProgress = 0
-        } else if (this.treasureFadeOutProgress > this.treasureFadeOutProgressRightBorder) {
-          this.treasureFadeOutProgress = this.treasureFadeOutProgressRightBorder
-        }
-      } else if (this.tourState === 3) {
+      if (this.tourState === 3) {
         this.translateLength -= e.deltaY
         if (this.translateLength > 0) {
           this.translateLength = 0
@@ -468,30 +422,8 @@ export default {
         }
       }
 
-      // 根据速度更新“距离”
-      if (this.tourState === 0) {
-        this.treasureFadeInProgress -= this.moveSpeed * timeElapsed
-        if (this.treasureFadeInProgress < 0) {
-          this.treasureFadeInProgress = 0
-          this.moveSpeed = 0
-        } else if (this.treasureFadeInProgress > this.treasureFadeInProgressRightBorder) {
-          this.treasureFadeInProgress = this.treasureFadeInProgressRightBorder
-        }
-      } else if (this.tourState === 1) {
-        this.treasureDisplayProgress -= this.moveSpeed * timeElapsed
-        if (this.treasureDisplayProgress < 0) {
-          this.treasureDisplayProgress = 0
-        } else if (this.treasureDisplayProgress > treasureDisplayProgressRightBorder) {
-          this.treasureDisplayProgress = treasureDisplayProgressRightBorder
-        }
-      } else if (this.tourState === 2) {
-        this.treasureFadeOutProgress -= this.moveSpeed * timeElapsed
-        if (this.treasureFadeOutProgress < 0) {
-          this.treasureFadeOutProgress = 0
-        } else if (this.treasureFadeOutProgress > this.treasureFadeOutProgressRightBorder) {
-          this.treasureFadeOutProgress = this.treasureFadeOutProgressRightBorder
-        }
-      } else if (this.tourState === 3) {
+      // 根据速度更新距离
+      if (this.tourState === 3) {
         this.translateLength += this.moveSpeed * timeElapsed
         if (this.translateLength > 0) {
           this.translateLength = 0
@@ -519,6 +451,12 @@ export default {
         }, 2500)
       }
     },
+    onClickPeopleNearHotSpot() {
+      this.treasureFadeInInitialLeft = this.$refs.treasure.offsetLeft
+      this.treasureFadeInInitialTop = this.$refs.treasure.offsetTop
+      this.treasureFadeInFinalLeft = window.innerWidth / 2 - this.$refs.treasure.offsetParent.offsetLeft
+      this.treasureFadeInFinalTop = window.innerHeight / 2 - this.$refs.treasure.offsetParent.offsetTop
+    },
     onTreasureFrameLoad(idx) {
       this.treasureFrameStateList[idx] = true
     },
@@ -601,6 +539,11 @@ export default {
     > .people-near {
       height: 100%;
     }
+    > .hot-spot {
+      position: absolute;
+      left: 41%;
+      top: 17%;
+    }
     > .treasure {
       position: absolute;
       left: 49%;