Blame view
src/platforms/app-plus/shake/shake.vue
2.04 KB
289f85d9e
提交
|
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 |
<template>
<view class="root" :style="{backgroundImage:'url('+img+')'}">
<view :class="[show ? 'up' : '','shake-up']">
<image mode="aspectFit" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/shake/shakeup.png"></image>
</view>
<view :class="[show ? 'down' : '','shake-down']">
<image mode="aspectFit" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/shake/shakedown.png"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
img: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/shake/1.jpg',
show: false,
isOpened: false
}
},
onLoad: function () {
this.music = uni.createInnerAudioContext();
this.music.src = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/shake/shake.wav';
let index = 1,
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(() => {
index++;
if (index > 4) {
index = 1
}
this.img = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/shake/' + index + '.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>
|