场景间过渡效果改版

src/components/StartUp.vue

@@ -43,7 +43,7 @@
         playsinline
         webkit-playsinline="true"
         x5-video-player-type="h5"
-        @ended="onVideoEnd"
+        @play="onVideoPlay"
       />
       <transition name="fade-in">
         <button
@@ -60,11 +60,16 @@
 import { ref, computed, watch, onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
+import startupVoiceUrl from '@/assets/audios/startup-voice.mp3'
 
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
+const canStart = computed(() => {
+  return store.state.canStart
+})
+
 const loadingProgress = ref(0)
 let loadingIntervalId = null
 loadingIntervalId = setInterval(() => {
@@ -75,31 +80,16 @@ loadingIntervalId = setInterval(() => {
   }
 }, 30)
 
-const canStart = computed(() => {
-  return store.state.canStart
-})
+const isShowVideo = ref(false)
 function onClickStart() {
   isShowVideo.value = true
   videoEl.value.play()
-
   setTimeout(() => {
     isShowSkip.value = true
   }, 2000)
 }
 
-const isShowVideo = ref(false)
 const videoEl = ref(null)
-// const startUpAudio =
-function onClickSkip() {
-  videoEl.value.pause()
-  store.commit('setHaveShownStartUp', true)
-}
-function onVideoEnd() {
-  store.commit('setHaveShownStartUp', true)
-}
-
-const isShowSkip = ref(false)
-
 const haveShownStartUp = computed(() => {
   return store.state.haveShownStartUp
 })
@@ -109,6 +99,24 @@ watch(haveShownStartUp, (v) => {
     videoEl.value.play()
   }
 })
+
+const startUpAudio = new Audio(startupVoiceUrl)
+startUpAudio.addEventListener('ended', () => {
+  store.commit('setHaveShownStartUp', true)
+})
+
+function onVideoPlay() {
+  setTimeout(() => {
+    startUpAudio.play()
+  }, 1000)
+}
+
+const isShowSkip = ref(false)
+function onClickSkip() {
+  videoEl.value.pause()
+  store.commit('setHaveShownStartUp', true)
+  startUpAudio.pause()
+}
 </script>
 
 <style lang="less" scoped>

src/store/index.js

@@ -9,8 +9,9 @@ for (let index = 0; index < projectData['长轴展示文物清单'].length; inde
 export default createStore({
   state: {
     panoData: null,
-    haveShownStartUp: process.env.VUE_APP_CLI_MODE === 'dev' ? false : false,
+    haveShownStartUp: process.env.VUE_APP_CLI_MODE === 'dev' ? true : false,
     canStart: false,
+    haveShownSceneEffect: [false, false, false],
     relicDataRaw: projectData['长轴展示文物清单'],
   },
   getters: {
@@ -72,6 +73,9 @@ export default createStore({
     setHaveShownStartUp(state, value) {
       state.haveShownStartUp = value
     },
+    setHaveShownSceneEffect(state, value) {
+      state.haveShownSceneEffect[value.idx] = value.value
+    },
     setRelicData(state, value) {
       state.relicData = value
     }

src/utils.js

@@ -230,4 +230,43 @@ export default {
     return str
   },
   deepClone,
+  mapPosFromDraftToWindow(posRaw, objectFit = 'cover', draftWidth = 1920, draftHeight = 1080, windowWidth = null, windowHeight = null) {
+    if (!windowWidth) {
+      windowWidth = window.innerWidth
+    }
+    if (!windowHeight) {
+      windowHeight = window.innerHeight
+    }
+    if (objectFit === 'cover') {
+      if (windowWidth / windowHeight > draftWidth / draftHeight) { // 实际窗口更宽扁，设计图与实际窗口等宽，上下被裁减
+        const scale = windowWidth / draftWidth
+        return {
+          x: posRaw.x * scale,
+          y: posRaw.y * scale - (draftHeight * scale - windowHeight) / 2,
+        }
+      } else { // false: 实际窗口更窄高，设计图与实际窗口等高，左右被裁减
+        const scale = windowHeight / draftHeight
+        return {
+          x: posRaw.x * scale - (draftWidth * scale - windowWidth) / 2,
+          y: posRaw.y * scale,
+        }
+      }
+    } else if (objectFit === 'contain') {
+      if (windowWidth / windowHeight > draftWidth / draftHeight) { // true: 实际窗口更宽扁，设计图与实际窗口等高，左右留白
+        const scale = windowHeight / draftHeight
+        return {
+          x: posRaw.x * scale + (windowWidth - draftWidth * scale) / 2,
+          y: posRaw.y * scale
+        }
+      } else { // false: 实际窗口更窄高，设计图与实际窗口等宽，上下留白
+        const scale = windowWidth / draftWidth
+        return {
+          x: posRaw.x * scale,
+          y: posRaw.y * scale + (windowHeight - draftHeight * scale) / 2,
+        }
+      }
+    } else {
+      throw (`invalid objectFit value: ${objectFit}`)
+    }
+  },
 }