镜头切换过渡

src/views/PanoView.vue

@@ -110,7 +110,9 @@
           <span>文物长卷</span>
         </button>
       </div>
-      <div class="camera-list">
+      <div
+        class="camera-list"
+      >
         <button
           v-for="(item, idx) in currentCameraList"
           :key="idx"
@@ -168,35 +170,25 @@
       :relic-info="hotspotRelicInfo"
       @close="isShowHotspotDetail = false"
     />
-    <!-- 场景切换过渡 -->
-    <!-- <transition name="fade-in-out-slow">
-      <video
-        v-show="isShowEffectVideo1"
-        ref="sceneChangeEffectVideo1"
-        class="sceneChangeEffectVideo"
-        load="lazy"
-        src="@/assets/videos/scene-change-effect-1.mp4"
-        playsinline
-        webkit-playsinline="true"
-        x5-video-player-type="h5"
-        @ended="onEffectVideoEnd"
-      />
-    </transition>
+    <!-- 镜头切换过渡 -->
     <transition name="fade-in-out-slow">
-      <video
-        v-show="isShowEffectVideo2"
-        ref="sceneChangeEffectVideo2"
-        class="sceneChangeEffectVideo"
-        src="@/assets/videos/scene-change-effect-2.mp4"
-        playsinline
-        webkit-playsinline="true"
-        x5-video-player-type="h5"
-        @ended="onEffectVideoEnd"
-      />
+      <div
+        v-if="isShowCameraIntro"
+        class="text-wrap"
+      >
+        <div
+          class="text"
+          v-html="cameraIntroText"
+        />
+        <button
+          class="skip"
+          @click="skipCameraIntro"
+        />
+      </div>
     </transition>
     <transition name="cloud-top">
       <img
-        v-if="isShowEffectCloud"
+        v-if="isShowCameraIntro"
         class="cloud cloud-top"
         src="@/assets/images/cloud-top.png"
         alt=""
@@ -205,7 +197,7 @@
     </transition>
     <transition name="cloud-left-bottom">
       <img
-        v-if="isShowEffectCloud"
+        v-if="isShowCameraIntro"
         class="cloud-left-bottom"
         src="@/assets/images/cloud-left-bottom.png"
         alt=""
@@ -214,13 +206,15 @@
     </transition>
     <transition name="cloud-right-bottom">
       <img
-        v-if="isShowEffectCloud"
+        v-if="isShowCameraIntro"
         class="cloud-right-bottom"
         src="@/assets/images/cloud-right-bottom.png"
         alt=""
         draggable="false"
       >
-    </transition> -->
+    </transition>
+    <!-- end of 镜头切换过渡 -->
+    <!-- 场景切换过渡 -->
     <video
       v-show="isShowSceneIntroVideoStart"
       ref="sceneIntrovideoStartEl"
@@ -430,6 +424,41 @@ const mouseEnterCameraItemIdx = ref(-1)
  * end of 右下角镜头列表
  */
 
+/**
+ * 镜头切换过渡
+ */
+const isShowCameraIntro = ref(false)
+const cameraIntroText = computed(() => {
+  return sceneTree[sceneIdx.value].cameraList[cameraIdx.value].desc
+})
+let cameraIntroAudioTimeoutId = null
+let cameraIntroAudio = null
+watch(cameraIdx, (vNew) => {
+  if (haveShownSceneEffect.value) {
+    isShowCameraIntro.value = true
+    cameraIntroAudioTimeoutId = setTimeout(() => {
+      cameraIntroAudio = new Audio(cameraIntroTree[sceneIdx.value][cameraIdx.value])
+      cameraIntroAudio.play()
+      cameraIntroAudio.addEventListener('ended', () => {
+        isShowCameraIntro.value = false
+      })
+    }, 1000)
+  }
+})
+
+// 跳过按钮 功能
+function skipCameraIntro() {
+  clearTimeout(cameraIntroAudioTimeoutId)
+  cameraIntroAudio?.pause()
+  isShowCameraIntro.value = false
+}
+onUnmounted(() => {
+  skipCameraIntro()
+})
+/**
+  * end of 镜头切换过渡
+  */
+
 const isShowSceneIntroVideoStart = ref(false)
 const isShowSceneIntroVideoEnd = ref(false)
 const sceneIntrovideoStartEl = ref(null)
@@ -516,51 +545,6 @@ onUnmounted(() => {
 /**
  * 点击“下一个场景”按钮的逻辑
  */
-// const sceneChangeEffectVideo1 = ref(null)
-// const sceneChangeEffectVideo2 = ref(null)
-// const isShowEffectVideo1 = ref(false)
-// const isShowEffectVideo2 = ref(false)
-// const isShowEffectCloud = ref(false)
-
-// function onClickNextScene() {
-//   if (sceneIdx.value === 0) {
-//     isShowEffectVideo1.value = true
-//     setTimeout(() => {
-//       sceneChangeEffectVideo1.value.play()
-//     }, 1000)
-//   } else if (sceneIdx.value === 1) {
-//     isShowEffectVideo2.value = true
-//     setTimeout(() => {
-//       sceneChangeEffectVideo2.value.play()
-//     }, 1000)
-//   } else if (sceneIdx.value === 2) {
-//     router.push({
-//       name: 'EpilogueView',
-//     })
-//   }
-// }
-
-// function onEffectVideoEnd() {
-//   isShowEffectCloud.value = true
-//   router.push({
-//     name: route.name,
-//     query: {
-//       sceneIdx: Number(route.query.sceneIdx) + 1,
-//       cameraIdx: 0,
-//     }
-//   })
-//   setTimeout(() => {
-//     isShowEffectVideo1.value = false
-//     isShowEffectVideo2.value = false
-//   }, 1000)
-//   setTimeout(() => {
-//     isShowEffectCloud.value = false
-//   }, 2500)
-// }
-/**
- * end of 点击“下一个场景”按钮的逻辑
- */
-
 function onClickNextScene() {
   if (sceneIdx.value === 0) {
     router.push({
@@ -585,6 +569,11 @@ function onClickNextScene() {
   }
 }
 /**
+ * end of 点击“下一个场景”按钮的逻辑
+ */
+
+
+/**
  * iframe的逻辑
  */
 const iframeSrc = `${process.env.VUE_APP_CLI_MODE === 'dev' ? 'http://192.168.0.27:8081/' : 'https://houseoss.4dkankan.com/project/yzdyh-dadu/pano/'}show.html?id=WK1730428603763576832&lang=zh`
@@ -978,89 +967,126 @@ onMounted(() => {
     z-index: 10;
   }
   /**
-   * 场景切换过渡
+  镜头切换过渡
    */
-  // >video.sceneChangeEffectVideo{
-  //   position: absolute;
-  //   left: 0;
-  //   top: 0;
-  //   width: 100%;
-  //   height: 100%;
-  //   background-color: black;
-  //   z-index: 11;
-  // }
-
-  // .cloud-top{
-  //   position: absolute;
-  //   width: 100%;
-  //   top: 0;
-  //   left: 0;
-  //   z-index: 12;
-  // }
-  // .cloud-top-enter-active {
-  //   transition: all 1.5s;
-  // }
-  // .cloud-top-leave-active {
-  //   transition: all 1.5s;
-  //   pointer-events: none;
-  // }
-  // .cloud-top-enter-from {
-  //   opacity: 0;
-  //   translate: 0 -100%;
-  // }
-  // .cloud-top-leave-to {
-  //   opacity: 0;
-  //   top: -50%;
-  //   translate: 0 -100%;
-  // }
+   >.text-wrap{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(10px);
+    z-index: 11;
+    background-color: rgba(0, 0, 0, 0.3);
+    >.text{
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      max-width: 80%;
+      max-height: 80%;
+      overflow: auto;
+      transform: translate(-50%, -50%);
+      font-size: 23px;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 39px;
+      letter-spacing: 7px;
+      text-shadow: 0px 15px 25px rgba(0,0,0,0.59);
+      padding-right: 10px;
+    }
+    >button.skip{
+      position: absolute;
+      width: 220px;
+      height: 58px;
+      right: 50px;
+      bottom: 50px;
+      background-image: url(@/assets/images/startup-video-skip.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
+   }
+  .cloud-top{
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 12;
+    pointer-events: none;
+  }
+  .cloud-top-enter-active {
+    transition: all 1.5s;
+  }
+  .cloud-top-leave-active {
+    transition: all 1.5s;
+    pointer-events: none;
+  }
+  .cloud-top-enter-from {
+    opacity: 0;
+    translate: 0 -100%;
+  }
+  .cloud-top-leave-to {
+    opacity: 0;
+    top: -50%;
+    translate: 0 -100%;
+  }
 
-  // .cloud-left-bottom{
-  //   position: absolute;
-  //   left: 0;
-  //   bottom: 0;
-  //   height: 70%;
-  //   z-index: 12;
-  // }
-  // .cloud-left-bottom-enter-active {
-  //   transition: all 1.5s;
-  // }
-  // .cloud-left-bottom-leave-active {
-  //   transition: all 1.5s;
-  //   pointer-events: none;
-  // }
-  // .cloud-left-bottom-enter-from {
-  //   opacity: 0;
-  //   translate: -100% 100%;
-  // }
-  // .cloud-left-bottom-leave-to {
-  //   opacity: 0;
-  //   pointer-events: none;
-  //   translate: -100% 100%;
-  // }
+  .cloud-left-bottom{
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 70%;
+    z-index: 12;
+    pointer-events: none;
+  }
+  .cloud-left-bottom-enter-active {
+    transition: all 1.5s;
+  }
+  .cloud-left-bottom-leave-active {
+    transition: all 1.5s;
+    pointer-events: none;
+  }
+  .cloud-left-bottom-enter-from {
+    opacity: 0;
+    translate: -100% 100%;
+  }
+  .cloud-left-bottom-leave-to {
+    opacity: 0;
+    pointer-events: none;
+    translate: -100% 100%;
+  }
 
-  // .cloud-right-bottom{
-  //   position: absolute;
-  //   right: 0;
-  //   bottom: 0;
-  //   height: 95%;
-  //   z-index: 12;
-  // }
-  // .cloud-right-bottom-enter-active {
-  //   transition: all 1.5s;
-  // }
-  // .cloud-right-bottom-leave-active {
-  //   transition: all 1.5s;
-  //   pointer-events: none;
-  // }
-  // .cloud-right-bottom-enter-from {
-  //   opacity: 0;
-  //   translate: 100% 100%;
-  // }
-  // .cloud-right-bottom-leave-to {
-  //   opacity: 0;
-  //   pointer-events: none;
-  //   translate: 100% 100%;
-  // }
+  .cloud-right-bottom{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    height: 95%;
+    z-index: 12;
+    pointer-events: none;
+  }
+  .cloud-right-bottom-enter-active {
+    transition: all 1.5s;
+  }
+  .cloud-right-bottom-leave-active {
+    transition: all 1.5s;
+    pointer-events: none;
+  }
+  .cloud-right-bottom-enter-from {
+    opacity: 0;
+    translate: 100% 100%;
+  }
+  .cloud-right-bottom-leave-to {
+    opacity: 0;
+    pointer-events: none;
+    translate: 100% 100%;
+  }
+  /**
+  end of 镜头切换过渡
+   */
+  /**
+   * 场景切换过渡
+   */
   >video.scene-intro-video{
     position: absolute;
     left: 0;
@@ -1072,9 +1098,9 @@ onMounted(() => {
   }
   >button.skip-scene-intro{
     position: absolute;
-    background-color: red;
     z-index: 21;
-    opacity: 0.5;
+    // background-color: red;
+    // opacity: 0.5;
   }
   /**
    * end of 场景切换过渡