张延森 2 gadus atpakaļ
vecāks
revīzija
f38f219cc8
4 mainītis faili ar 32 papildinājumiem un 5 dzēšanām
  1. Binārs
      public/audios/entrance.mp3
  2. 5
    0
      src/App.vue
  3. 26
    4
      src/components/Loader.vue
  4. 1
    1
      src/components/Mask.vue

Binārs
public/audios/entrance.mp3 Parādīt failu


+ 5
- 0
src/App.vue Parādīt failu

@@ -27,6 +27,11 @@ onMounted(() => {
27 27
   const { onStart, onEnd } = scroll(window.document);
28 28
 
29 29
   onStart(() => {
30
+    if (!entranceAudioPlayed.value) {
31
+      entranceAudioRef.value.play()
32
+      entranceAudioPlayed.value = true
33
+    }
34
+
30 35
     fixedLogoHidden.value = true;
31 36
   })
32 37
 

+ 26
- 4
src/components/Loader.vue Parādīt failu

@@ -1,7 +1,7 @@
1 1
 <template>
2 2
   <div 
3 3
     class="loader-wrapper"
4
-    :class="{ loaded: !loading }"
4
+    :class="{ loaded: !loading, mask: maskReadyRef }"
5 5
     :style="visibleStyle"
6 6
     @touchmove.prevent
7 7
     @mousewheel.prevent
@@ -16,6 +16,7 @@
16 16
     <!-- <div class="loader-section section-top"></div>
17 17
     <div class="loader-section section-bottom"></div>     -->
18 18
     <MaskVue ref="maskRef" @end="onEnd"/>
19
+    <audio :src="entranceAudio" style="max-width: 1px;max-height: 1px;" ref="entranceAudioRef" ></audio>
19 20
   </div>
20 21
 </template>
21 22
 
@@ -23,6 +24,8 @@
23 24
 import { computed, onMounted, ref, watch } from "vue"
24 25
 import MaskVue from "./Mask.vue";
25 26
 
27
+const entranceAudio = './audios/entrance.mp3';  
28
+
26 29
 const props = defineProps({
27 30
   tip: {
28 31
     type: String,
@@ -37,8 +40,12 @@ const props = defineProps({
37 40
 
38 41
 const elRef = ref();
39 42
 const maskRef = ref();
43
+const maskReadyRef = ref(false);
40 44
 const progressStyle = computed(() => ({ width: `${props.percent}%` }));
41
-const visibleStyle = ref({  })
45
+const visibleStyle = ref({})
46
+const entranceAudioRef = ref()
47
+const entranceAudioReady = ref(false)
48
+
42 49
 const onEnd = () => {
43 50
   visibleStyle.value = { display: 'none' }
44 51
 }
@@ -48,12 +55,27 @@ const onTouchMove = (e) => {
48 55
   e.preventDefault();
49 56
 }
50 57
 
58
+const playMask = () => {
59
+  if (maskReadyRef.value && entranceAudioReady.value) {
60
+    entranceAudioRef.value.play();
61
+    maskRef.value.start();
62
+  }
63
+}
64
+
51 65
 watch(() => props.loading, (newVal, oldVal) => {
52 66
   if (oldVal && !newVal) {
53
-    maskRef.value.start();
67
+    maskReadyRef.value = true;
68
+    playMask();
54 69
   }
55 70
 })
56 71
 
72
+onMounted(() => {
73
+  document.addEventListener("WeixinJSBridgeReady", function () {
74
+    entranceAudioReady.value = true;
75
+    playMask();
76
+  }, false);
77
+})
78
+
57 79
 </script>
58 80
 
59 81
 
@@ -115,7 +137,7 @@ watch(() => props.loading, (newVal, oldVal) => {
115 137
     bottom: 0;
116 138
   }
117 139
 
118
-  &.loaded {
140
+  &.loaded.mask {
119 141
     // visibility: hidden;
120 142
     // transform: translateX(-100%);
121 143
     // transition: all 0.3s 1s ease-out;

+ 1
- 1
src/components/Mask.vue Parādīt failu

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