游览进度的截断工作从游览进度变化回调中搬出去

.eslintrc.js

@@ -34,8 +34,9 @@ module.exports = {
     "func-call-spacing": ["error", "never"],
     "semi-spacing": ["error", { "before": false, "after": true }],
     "space-before-blocks": ["error", "always"],
-    "indent": ["error", 2],
     'no-trailing-spaces': 'error',
+    'no-multi-spaces': 'error',
+    "indent": ["error", 2],
     'no-empty': 'off',
     // 默认不启用：为了避免细微的 bug，最好直接从 Object.prototype 调用挂载于prototype上的方法方法。例如，foo.hasOwnProperty("bar") 应该替换为 Object.prototype.hasOwnProperty.call(foo, "bar")。
     'no-prototype-builtins': "off",

src/views/HomeView.vue

@@ -173,58 +173,12 @@ export default {
     }
   },
   watch: {
-    translateLength: {
-      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
-        // }
-
-        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 * 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) {
-        if (vOld <= this.treasureFadeInProgressRightBorder && vNew > this.treasureFadeInProgressRightBorder && this.tourState === 0) {
+        if (vOld < this.treasureFadeInProgressRightBorder && vNew >= this.treasureFadeInProgressRightBorder && this.tourState === 0) {
           this.tourState = 1
         }
 
-        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,
-          this.$refs.treasure.offsetLeft,
-          this.$refs.treasure.offsetParent.offsetLeft,
-          window.innerWidth,
-        )
-
         this.$refs.treasure.style.left = this.treatureFadeInInitialLeft + this.treasureFadeInProgress / treasureFadeInProgressRightBorder * (this.treatureFadeInFinalLeft - this.treatureFadeInInitialLeft) + 'px'
         this.$refs.treasure.style.top = this.treatureFadeInInitialTop + this.treasureFadeInProgress / treasureFadeInProgressRightBorder * (this.treatureFadeInFinalTop - this.treatureFadeInInitialTop) + 'px'
         this.$refs.treasure.style.transform = `translate(-50%, -50%) scale(${1 + this.treasureFadeInProgress / treasureFadeInProgressRightBorder * (10 - 1)})`
@@ -233,24 +187,12 @@ export default {
     treasureDisplayProgress: {
       handler(vNew, vOld) {
         // 更新toureState
-        if (vOld >= 0 && vNew < 0 && this.tourState === 1) {
+        if (vOld > 0 && vNew <= 0 && this.tourState === 1) {
           this.tourState = 0
-        } else if (vOld <= treasureDisplayProgressRightBorder && vNew > treasureDisplayProgressRightBorder && this.tourState === 1) {
+        } else if (vOld < treasureDisplayProgressRightBorder && vNew >= treasureDisplayProgressRightBorder && this.tourState === 1) {
           this.tourState = 2
         }
 
-        // progress边界截断
-        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)
-
         let idealCurNum = Math.round(this.treasureDisplayProgress / treasureDisplayProgressRightBorder * treasureFrameTotalNum)
 
         while (this.treasureFrameStateList[idealCurNum] === false) {
@@ -261,23 +203,32 @@ export default {
     },
     treasureFadeOutProgress: {
       handler(vNew, vOld) {
-        if (vOld >= 0 && vNew < 0 && this.tourState === 2) {
+        if (vOld > 0 && vNew <= 0 && this.tourState === 2) {
           this.tourState = 1
-        } else if (vOld <= this.treasureFadeOutProgressRightBorder && vNew > this.treasureFadeOutProgressRightBorder && this.tourState === 2) {
+        } else if (vOld < this.treasureFadeOutProgressRightBorder && vNew >= this.treasureFadeOutProgressRightBorder && this.tourState === 2) {
           this.tourState = 3
         }
 
-        if (vNew < 0) {
-          vNew = 0
-          this.treasureFadeOutProgress = 0
-          // this.moveSpeed = 0
-        } else if (vNew > this.treasureFadeOutProgressRightBorder) {
-          vNew = this.treasureFadeOutProgressRightBorder
-          this.treasureFadeOutProgress = this.treasureFadeOutProgressRightBorder
-          // this.moveSpeed = 0
+        console.log('fadeOut阶段！', this.treasureFadeOutProgress)
+      }
+    },
+    translateLength: {
+      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
+        // }
 
-        console.log('fadeOut阶段！', this.treasureFadeOutProgress)
+        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)
       }
     },
   },
@@ -315,14 +266,33 @@ export default {
       }
     },
     onWheel(e) {
-      if (this.tourState === 3) {
-        this.translateLength -= e.deltaY
-      } else if (this.tourState === 0) {
+      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) {
+        this.translateLength -= e.deltaY
+        if (this.translateLength > 0) {
+          this.translateLength = 0
+        }
       }
     },
     inertanceEffect() {
@@ -343,14 +313,33 @@ export default {
       }
 
       // 根据速度更新“距离”
-      if (this.tourState === 3) {
-        this.translateLength += this.moveSpeed * timeElapsed
-      } else if (this.tourState === 0) {
+      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) {
+        this.translateLength += this.moveSpeed * timeElapsed
+        if (this.translateLength > 0) {
+          this.translateLength = 0
+        }
       }
 
       this.lastAnimationTimeStamp = timeStamp