完善文物淡入效果

src/views/HomeView.vue

@@ -47,7 +47,6 @@
       class="people-near-wrap"
       :style="{
         left: peopleNearPositionLeft,
-        zIndex: [0, 2].includes(tourState) ? 2 : 0,
       }"
     >
       <img
@@ -57,13 +56,11 @@
         @dragstart.prevent
       >
       <img
-        v-if="[0, 2].includes(tourState)"
+        v-show="[0, 2].includes(tourState)"
         ref="treasure"
         class="treasure"
         :style="{
-          opacity: tourState === 0 ?
-            treasureFadeInProgress / treasureFadeInProgressRightBorder :
-            1 - treasureFadeOutProgress / treasureFadeOutProgressRightBorder,
+          opacity: treasureOpacity,
         }"
         src="@/assets/treasure.png"
         alt=""
@@ -84,9 +81,7 @@
       v-if="[0, 1, 2].includes(tourState)"
       class="fade-mask"
       :style="{
-        opacity: tourState === 0 ?
-          treasureFadeInProgress / treasureFadeInProgressRightBorder :
-          1 - treasureFadeOutProgress / treasureFadeOutProgressRightBorder
+        opacity: maskOpacity,
       }"
     />
 
@@ -117,7 +112,7 @@ const landscapeSpeedRate = 0.01
 const peopleFarSpeedRate = 0.2
 const peopleNearSpeedRate = 0.8
 const introduceSpeedRate = 1
-const treasureFadeInProgressRightBorder = 2000
+const treasureFadeInProgressRightBorder = 3000
 const treasureDisplayProgressRightBorder = 3000
 const treasureFadeOutProgressRightBorder = 2000
 const treasureFrameTotalNum = 100
@@ -149,10 +144,10 @@ export default {
       // 文物淡入相关
       treasureFadeInProgress: 0,
       treasureFadeInProgressRightBorder,
-      treatureFadeInInitialLeft: 0,
-      treatureFadeInInitialTop: 0,
-      treatureFadeInFinalLeft: 0,
-      treatureFadeInFinalTop: 0,
+      treasureFadeInInitialLeft: 0,
+      treasureFadeInInitialTop: 0,
+      treasureFadeInFinalLeft: 0,
+      treasureFadeInFinalTop: 0,
 
       // 文物展示相关
       treasureDisplayProgress: 0,
@@ -169,16 +164,72 @@ export default {
       isPeopleFarColorChanging: false,
     }
   },
+  computed: {
+    treasureOpacity() {
+      if (this.tourState === 0) {
+        if (this.treasureFadeInProgress > treasureFadeInProgressRightBorder / 2) {
+          return 1
+        } else {
+          return this.treasureFadeInProgress / (treasureFadeInProgressRightBorder / 2)
+        }
+      } else if (this.tourState === 2) {
+        if (this.treasureFadeOutProgress < treasureFadeOutProgressRightBorder / 2) {
+          return 1
+        } else {
+          return 1 - (this.treasureFadeOutProgress - treasureFadeOutProgressRightBorder / 2) / (treasureFadeOutProgressRightBorder / 2)
+        }
+      } else {
+        return 0
+      }
+    },
+    maskOpacity() {
+      if (this.tourState === 0) {
+        if (this.treasureFadeInProgress > treasureFadeInProgressRightBorder / 2) {
+          return 1
+        } else {
+          return this.treasureFadeInProgress / (treasureFadeInProgressRightBorder / 2)
+        }
+      } else if (this.tourState === 2) {
+        if (this.treasureFadeOutProgress < treasureFadeOutProgressRightBorder / 2) {
+          return 1
+        } else {
+          return 1 - (this.treasureFadeOutProgress - treasureFadeOutProgressRightBorder / 2) / (treasureFadeOutProgressRightBorder / 2)
+        }
+      } else {
+        return 1
+      }
+    }
+  },
   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) {
           this.tourState = 1
         }
-
-        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)})`
+        if (this.treasureFadeInProgress > treasureFadeInProgressRightBorder / 2) {
+          this.$refs.treasure.style.left = this.treasureFadeInInitialLeft + (this.treasureFadeInProgress - treasureFadeInProgressRightBorder / 2) / (treasureFadeInProgressRightBorder / 2) * (this.treasureFadeInFinalLeft - this.treasureFadeInInitialLeft) + 'px'
+          this.$refs.treasure.style.top = this.treasureFadeInInitialTop + (this.treasureFadeInProgress - treasureFadeInProgressRightBorder / 2) / (treasureFadeInProgressRightBorder / 2) * (this.treasureFadeInFinalTop - this.treasureFadeInInitialTop) + 'px'
+          this.$refs.treasure.style.transform = `translate(-50%, -50%) scale(${1 + (this.treasureFadeInProgress - treasureFadeInProgressRightBorder / 2) / (treasureFadeInProgressRightBorder / 2) * (10 - 1)})`
+        } else {
+          this.$refs.treasure.style.left = this.treasureFadeInInitialLeft + 'px'
+          this.$refs.treasure.style.top = this.treasureFadeInInitialTop + 'px'
+          this.$refs.treasure.style.transform = `translate(-50%, -50%) scale(1)`
+        }
       }
     },
     treasureDisplayProgress: {
@@ -231,10 +282,14 @@ export default {
   },
   mounted() {
     this.animationFrameId = requestAnimationFrame(this.inertanceEffect)
-    this.treatureFadeInInitialLeft = this.$refs.treasure.offsetLeft
-    this.treatureFadeInInitialTop = this.$refs.treasure.offsetTop
-    this.treatureFadeInFinalLeft = window.innerWidth / 2 - this.$refs.treasure.offsetParent.offsetLeft
-    this.treatureFadeInFinalTop = window.innerHeight / 2 - this.$refs.treasure.offsetParent.offsetTop
+    setTimeout(() => {
+      this.treasureFadeInInitialLeft = this.$refs.treasure.offsetLeft
+      console.log( this.$refs.treasure.offsetLeft)
+      this.treasureFadeInInitialTop = this.$refs.treasure.offsetTop
+      console.log( 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)
@@ -415,16 +470,16 @@ export default {
     position: absolute;
     bottom: -13%;
     height: 100vh;
-    overflow: hidden;
     > .people-near {
       height: 100%;
     }
     > .treasure {
       position: absolute;
       left: 40%;
-      top: 35%;
-      width: 7%;
-      height: 3.5%;
+      top: 33.5%;
+      width: 18%;
+      z-index: 2;
+      transform: translate(-50%, -50%);
     }
   }
   .introduce {