shake.vue
2.53 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<template>
<view class="root" :style="{backgroundImage:'url('+img+')'}">
<view :class="[show ? 'up' : '','shake-up']">
<image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b718cdb0-517d-11eb-a16f-5b3e54966275.png"></image>
</view>
<view :class="[show ? 'down' : '','shake-down']">
<image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b6600500-517d-11eb-8ff1-d5dcf8779628.png"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
img: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/aff47ed0-517d-11eb-8ff1-d5dcf8779628.jpg',
show: false,
isOpened: false,
index: 1
}
},
computed:{
pageIndex() {
if (this.index === 1) {
return 'aff47ed0-517d-11eb-8ff1-d5dcf8779628'
} else if (this.index === 2) {
return '1fc36f80-5199-11eb-a16f-5b3e54966275'
} else if (this.index === 3) {
return '20a3bd60-5199-11eb-97b7-0dc4655d6e68'
} else if (this.index === 4) {
return '8b872410-51a7-11eb-8a36-ebb87efcf8c0'
} else {
return 'aff47ed0-517d-11eb-8ff1-d5dcf8779628'
}
}
},
onLoad: function () {
this.music = uni.createInnerAudioContext();
this.music.src = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b5897b20-517d-11eb-a16f-5b3e54966275.wav';
let t = null;
uni.onAccelerometerChange((res) => {
if (Math.abs(res.x) + Math.abs(res.y) + Math.abs(res.z) > 20 && !this.show && this.isOpened) {
this.music.play();
setTimeout(() => {
this.index++;
if (this.index > 4) {
this.index = 1
}
this.img = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/' + this.pageIndex + '.jpg';
}, 2000);
this.show = true;
if (t) {
clearTimeout(t);
}
t = setTimeout(() => {
t = null;
this.show = false;
}, 600)
}
})
},
onShow() {
this.isOpened = true;
},
onUnload() {
this.show = false;
this.isOpened = false;
uni.stopAccelerometer();
this.music.destroy();
}
}
</script>
<style>
.root {
height: 100%;
display: flex;
flex-direction: column;
background-position: center center;
background-repeat: no-repeat;
}
.shake-up,
.shake-down {
height: 50%;
overflow: hidden;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
background: #333;
}
.up {
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.down {
transform: translateY(50%);
-webkit-transform: translateY(50%);
}
image {
height: 100%;
width: 100%;
}
</style>