feats

src/App.vue

@@ -27,6 +27,11 @@ onMounted(() => {
   const { onStart, onEnd } = scroll(window.document);
 
   onStart(() => {
+    if (!entranceAudioPlayed.value) {
+      entranceAudioRef.value.play()
+      entranceAudioPlayed.value = true
+    }
+
     fixedLogoHidden.value = true;
   })
 

src/components/Loader.vue

@@ -1,7 +1,7 @@
 <template>
   <div 
     class="loader-wrapper"
-    :class="{ loaded: !loading }"
+    :class="{ loaded: !loading, mask: maskReadyRef }"
     :style="visibleStyle"
     @touchmove.prevent
     @mousewheel.prevent
@@ -16,6 +16,7 @@
     <!-- <div class="loader-section section-top"></div>
     <div class="loader-section section-bottom"></div>     -->
     <MaskVue ref="maskRef" @end="onEnd"/>
+    <audio :src="entranceAudio" style="max-width: 1px;max-height: 1px;" ref="entranceAudioRef" ></audio>
   </div>
 </template>
 
@@ -23,6 +24,8 @@
 import { computed, onMounted, ref, watch } from "vue"
 import MaskVue from "./Mask.vue";
 
+const entranceAudio = './audios/entrance.mp3';  
+
 const props = defineProps({
   tip: {
     type: String,
@@ -37,8 +40,12 @@ const props = defineProps({
 
 const elRef = ref();
 const maskRef = ref();
+const maskReadyRef = ref(false);
 const progressStyle = computed(() => ({ width: `${props.percent}%` }));
-const visibleStyle = ref({  })
+const visibleStyle = ref({})
+const entranceAudioRef = ref()
+const entranceAudioReady = ref(false)
+
 const onEnd = () => {
   visibleStyle.value = { display: 'none' }
 }
@@ -48,12 +55,27 @@ const onTouchMove = (e) => {
   e.preventDefault();
 }
 
+const playMask = () => {
+  if (maskReadyRef.value && entranceAudioReady.value) {
+    entranceAudioRef.value.play();
+    maskRef.value.start();
+  }
+}
+
 watch(() => props.loading, (newVal, oldVal) => {
   if (oldVal && !newVal) {
-    maskRef.value.start();
+    maskReadyRef.value = true;
+    playMask();
   }
 })
 
+onMounted(() => {
+  document.addEventListener("WeixinJSBridgeReady", function () {
+    entranceAudioReady.value = true;
+    playMask();
+  }, false);
+})
+
 </script>
 
 
@@ -115,7 +137,7 @@ watch(() => props.loading, (newVal, oldVal) => {
     bottom: 0;
   }
 
-  &.loaded {
+  &.loaded.mask {
     // visibility: hidden;
     // transform: translateX(-100%);
     // transition: all 0.3s 1s ease-out;

src/components/Mask.vue

@@ -37,7 +37,7 @@
 
   const xStart = 60;
   const yStart = 90;
-  const speed = 20;
+  const speed = 10;
   const draw = () => {
     i += speed;
     const canv = cvsRef.value;