文物淡入阶段最终缩放倍数适应不同窗口宽高比

src/views/HomeView.vue

@@ -187,15 +187,16 @@ const peopleFarSpeedRate = 0.4
 const peopleNearSpeedRate = 0.6
 const introduceSpeedRate = 0.6
 
-const translateLengthRightBorder = 9000
+const translateLengthRightBorder = 9000 // 单位：px
 
-const treasureFadeInDuration = 3000
-const treasureFadeOutDuration = 2000
+const treasureFadeInDuration = 3000 // 单位：ms
+const treasureFadeOutDuration = 2000 // 单位：ms
 
 const treasureFrameTotalNum = 125
 
-const treasureInitialHeightPercent = 9
-const treasureFinalHeightPercent = 116
+const treasureInitialHeightPercent = 9 // 0~100
+const treasureFrameWidth = 1366 // 单位：px
+const treasureFrameHeight = 768 // 单位：px
 
 export default {
   name: 'HomeView',
@@ -227,13 +228,14 @@ export default {
 
       // 文物淡入相关
       treasureFadeInProgress: {
-        value: 0,
+        value: 0, // 0~100
       },
       treasureFadeInInitialLeft: 0,
       treasureFadeInInitialTop: 0,
       treasureFadeInFinalLeft: 0,
       treasureFadeInFinalTop: 0,
       treasureInitialHeightPercent,
+      treasureFinalHeightPercent: 0, // 0~100
       treasureFadeInTween: null,
 
       // 文物展示相关
@@ -244,7 +246,7 @@ export default {
 
       // 文物淡出相关
       treasureFadeOutProgress: {
-        value: 0,
+        value: 0, // 0~100
       },
       treasureFadeOutTween: null,
 
@@ -278,6 +280,8 @@ export default {
         } else {
           return this.treasureFadeInProgress.value / 50
         }
+      } else if (this.tourState === 1) {
+        return 1
       } else if (this.tourState === 2) {
         return (100 - this.treasureFadeOutProgress.value) / 100
       } else {
@@ -319,7 +323,7 @@ export default {
         if (this.treasureFadeInProgress.value > 50) {
           this.$refs.treasure.style.left = this.treasureFadeInInitialLeft + (this.treasureFadeInProgress.value - 50) / 50 * (this.treasureFadeInFinalLeft - this.treasureFadeInInitialLeft) + 'px'
           this.$refs.treasure.style.top = this.treasureFadeInInitialTop + (this.treasureFadeInProgress.value - 50) / 50 * (this.treasureFadeInFinalTop - this.treasureFadeInInitialTop) + 'px'
-          this.$refs.treasure.style.transform = `translate(-50%, -50%) scale(${1 + (this.treasureFadeInProgress.value - 50) / 50 * (treasureFinalHeightPercent / this.treasureInitialHeightPercent - 1)})`
+          this.$refs.treasure.style.transform = `translate(-50%, -50%) scale(${1 + (this.treasureFadeInProgress.value - 50) / 50 * (this.treasureFinalHeightPercent / this.treasureInitialHeightPercent - 1)})`
         } else {
           this.$refs.treasure.style.left = this.treasureFadeInInitialLeft + 'px'
           this.$refs.treasure.style.top = this.treasureFadeInInitialTop + 'px'
@@ -462,6 +466,17 @@ export default {
       this.treasureFadeInInitialTop = this.$refs.treasure.offsetTop
       this.treasureFadeInFinalLeft = window.innerWidth / 2 - this.$refs['people-near-wrap'].offsetLeft
       this.treasureFadeInFinalTop = window.innerHeight / 2 - this.$refs['people-near-wrap'].offsetTop
+
+      // 计算淡入过渡终止时文物需要放大的倍数
+      const viewportRatio = window.innerWidth / window.innerHeight
+      const frameRatio = treasureFrameWidth / treasureFrameHeight
+      if (viewportRatio >= frameRatio) { // 视口比序列帧扁，序列帧高度会缩放到和视口相同，所以序列帧的第一帧作为淡入时的文物图片，也缩放到和视口等高即可。
+        this.treasureFinalHeightPercent = 100
+      } else { // 视口比序列帧窄，序列帧宽度会缩放到和视口相同，所以序列帧的第一帧作为淡入时的文物图片，也缩放到和视口等宽即可。
+        const treasureFinalHeight = treasureFrameHeight / treasureFrameWidth * window.innerWidth
+        this.treasureFinalHeightPercent = treasureFinalHeight / window.innerHeight * 100
+      }
+
       this.tourState = 0
 
       this.treasureFadeInTween.start()
@@ -590,7 +605,7 @@ export default {
     img {
       width: 100%;
       height: 100%;
-      object-fit: cover;
+      object-fit: contain;
     }
   }
   .btn-stop-treasure-display {
@@ -610,7 +625,7 @@ export default {
     > img {
       width: 100%;
       height: 100%;
-      object-fit: cover;
+      object-fit: contain;
     }
   }
   @media screen and (max-height: 810px) {