宝物渐入过渡阶段

src/views/HomeView.vue

@@ -15,16 +15,33 @@
       @dragstart.prevent
     >
     <div
-      class="people-far"
+      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
+        class="people-far"
         src="@/assets/people-far.png"
         alt=""
         @dragstart.prevent
       >
+      <img
+        v-if="[1].includes(tourState)"
+        class="treasure"
+        :style="{
+          opacity: treasureFadeInProgress / treasureFadeInProgressRightBorder
+        }"
+        src="@/assets/treasure.png"
+        alt=""
+        @dragstart.prevent
+      >
     </div>
     <div
       class="people-near"
@@ -53,6 +70,14 @@
       alt=""
       @dragstart.prevent
     >
+
+    <div
+      v-if="[1, 2, 3].includes(tourState)"
+      class="fade-mask"
+      :style="{
+        opacity: treasureFadeInProgress / treasureFadeInProgressRightBorder
+      }"
+    />
   </div>
 </template>
 
@@ -66,21 +91,25 @@ export default {
       // 鼠标拖拽相关
       isMouseDown: false,
       lastMoveEventTimeStamp: 0,
+      moveSpeed: 0,
 
       // 动画帧相关
       lastAnimationTimeStamp: 0,
       animationFrameId: null,
 
-      tourState: 0, // 0: 第一次镜头平移阶段；1：宝物渐入过渡阶段；
+      tourState: 0, // 0: 第一次镜头平移阶段；1：宝物渐入过渡阶段；2:宝物三维展示阶段；3：宝物渐出过渡阶段；
 
       // 镜头平移相关
-      moveSpeed: 0,
       translateLength: 0,
       landscapePositionRight: '-50%',
       peopleFarPositionRight: '0px',
       peopleNearPositionRight: '-30%',
       introducePositionLeft: '2%',
 
+      // 宝物渐入相关
+      treasureFadeInProgress: 0,
+      treasureFadeInProgressRightBorder: 2000,
+
       // 前景人物变色相关
       peopleNearColorStatus: 'no-color', // 'no-color', 'color'
       isPeopleNearColorChanging: false,
@@ -88,19 +117,49 @@ export default {
   },
   watch: {
     translateLength: {
-      handler(v) {
-        if (v > 0) {
-          v = 0
-          this.translateLength = v
-          this.moveSpeed = 0
-        } else if (v < -window.innerWidth * 2) {
-          v = -window.innerWidth * 2
-          this.translateLength = v
+      handler(vNew, vOld) {
+        const leftBorder = 0
+        const rightBorder = window.innerWidth * 2
+
+        if (vOld > -rightBorder && vNew <= -rightBorder && this.tourState === 0) {
+          this.tourState = 1
+        }
+
+        if (vNew > leftBorder) {
+          vNew = leftBorder
+          this.translateLength = vNew
           this.moveSpeed = 0
+        } else if (vNew < -rightBorder) {
+          vNew = -rightBorder
+          this.translateLength = vNew
+          // this.moveSpeed = 0
+        }
+
+        this.peopleFarPositionRight = `calc(0px - ${vNew * 0.2}px)`
+        this.peopleNearPositionRight = `calc(-30% - ${vNew * 0.8}px)`
+        this.introducePositionLeft = `calc(2% + ${vNew * 1}px)`
+      }
+    },
+    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
         }
-        this.peopleFarPositionRight = `calc(0px - ${v * 0.2}px)`
-        this.peopleNearPositionRight = `calc(-30% - ${v * 0.8}px)`
-        this.introducePositionLeft = `calc(2% + ${v * 1}px)`
+
+        if (vNew < leftBorder) {
+          vNew = leftBorder
+          this.treasureFadeInProgress = leftBorder
+          // this.moveSpeed = 0
+        } else if (vNew > this.treasureFadeInProgressRightBorder) {
+          vNew = this.treasureFadeInProgressRightBorder
+          this.treasureFadeInProgress = this.treasureFadeInProgressRightBorder
+          // this.moveSpeed = 0
+        }
+        console.log(this.treasureFadeInProgress)
       }
     }
   },
@@ -134,11 +193,16 @@ export default {
       }
     },
     onWheel(e) {
-      this.translateLength -= e.deltaY
+      if (this.tourState === 0) {
+        this.translateLength -= e.deltaY
+      } else if (this.tourState === 1) {
+        this.treasureFadeInProgress += e.deltaY
+      }
     },
     inertanceEffect() {
       const timeStamp = Date.now()
       const timeElapsed = timeStamp - this.lastAnimationTimeStamp
+
       if (this.moveSpeed > 0) {
         this.moveSpeed -= 0.003 * timeElapsed
         if (this.moveSpeed < 0) {
@@ -151,7 +215,11 @@ export default {
         }
       }
 
-      this.translateLength += this.moveSpeed * timeElapsed
+      if (this.tourState === 0) {
+        this.translateLength += this.moveSpeed * timeElapsed
+      } else if (this.tourState === 1) {
+        this.treasureFadeInProgress -= this.moveSpeed * timeElapsed
+      }
 
       this.lastAnimationTimeStamp = timeStamp
       this.animationFrameId = requestAnimationFrame(this.inertanceEffect)
@@ -191,13 +259,20 @@ export default {
     top: 0;
     right: 0;
   }
-  .people-far {
+  > .people-far-wrap {
     position: absolute;
     top: 20%;
     height: 60%;
-    > img {
+    > .people-far {
       height: 100%;
     }
+    > .treasure {
+      position: absolute;
+      left: 48%;
+      top: 22.6%;
+      width: 7%;
+      height: 3.5%;
+    }
   }
   .people-near {
     position: absolute;
@@ -229,5 +304,14 @@ export default {
     position: absolute;
     top: 5%;
   }
+  .fade-mask {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #663e21;
+    z-index: 1;
+  }
 }
 </style>