shake.vue 2.5 KB

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