activity/src/view/SilkRoadSpringFestivalGala/pages/fourth.vue

<template>
  <div class="fourth">
    <div class="main animate__animated">
      <img src="../../../assets/img/top4.png" />
      <label for="file" :class="{ camere: true, shakeSlow: dou === 2 }">
        <img src="../../../assets/img/camere.png" style="width: 100%" />
      </label>
      <img
        :class="{ doudong: dou === 1 }"
        src="../../../assets/img/bottom4.png"
      />
    </div>

    <input
      type="file"
      accept="image/*"
      style="display: none"
      id="file"
      capture="environment"
      @change="inputFile"
    />
  </div>
</template>
<script setup>
import { ref, defineEmits } from "vue";
// import { onMounted, reactive } from "vue";
import { isAndroid, isIphone } from "../../../utils/isTerminal";
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
const emits = defineEmits(["changePage"]);

const dou = ref(0);

window.addEventListener(
  "devicemotion",
  event => {
    if (dou.value < 1) return;
    var acceleration = event.accelerationIncludingGravity;
    let px = Math.pow(acceleration.x, 2) >= 100;
    let py = Math.pow(acceleration.y, 2) >= 100;
    let pz = Math.pow(acceleration.z, 2) >= 100;
    console.log("----------------start------------");
    if (px || py || pz) {
      // 手机摇晃
      toNext();
    }
  },
  false
);

function toNext() {
  dou.value = 2;
  let t = setTimeout(() => {
    clearTimeout(t);
    emits("changePage", "five");
  }, 2000);
}

function inputFile() {
  dou.value = 1;
  if (isAndroid || isIphone) return;
  let t = setTimeout(() => {
    clearTimeout(t);
    toNext();
  }, 2000);
}
</script>
<style lang="scss" scoped>
.fourth {
  position: relative;
  .main {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    img {
      width: 40%;
      margin: 0 auto;
      display: block;
    }
    .camere {
      display: block;
      width: 5em;
      margin: 4em auto;
    }
  }

  @keyframes shake-slow {
    2% {
      transform: translate(6px, -2px) rotate(3.5deg);
    }
    4% {
      transform: translate(5px, 8px) rotate(-0.5deg);
    }
    6% {
      transform: translate(6px, -3px) rotate(-2.5deg);
    }
    8% {
      transform: translate(4px, -2px) rotate(1.5deg);
    }
    10% {
      transform: translate(-6px, 8px) rotate(-1.5deg);
    }
    12% {
      transform: translate(-5px, 5px) rotate(1.5deg);
    }
    14% {
      transform: translate(4px, 10px) rotate(3.5deg);
    }
    16% {
      transform: translate(0px, 4px) rotate(1.5deg);
    }
    18% {
      transform: translate(-1px, -6px) rotate(-0.5deg);
    }
    20% {
      transform: translate(6px, -9px) rotate(2.5deg);
    }
    22% {
      transform: translate(1px, -5px) rotate(-1.5deg);
    }
    24% {
      transform: translate(-9px, 6px) rotate(-0.5deg);
    }
    26% {
      transform: translate(8px, -2px) rotate(-1.5deg);
    }
    28% {
      transform: translate(2px, -3px) rotate(-2.5deg);
    }
    30% {
      transform: translate(9px, -7px) rotate(-0.5deg);
    }
    32% {
      transform: translate(8px, -6px) rotate(-2.5deg);
    }
    34% {
      transform: translate(-5px, 1px) rotate(3.5deg);
    }
    36% {
      transform: translate(0px, -5px) rotate(2.5deg);
    }
    38% {
      transform: translate(2px, 7px) rotate(-1.5deg);
    }
    40% {
      transform: translate(6px, 3px) rotate(-1.5deg);
    }
    42% {
      transform: translate(1px, -5px) rotate(-1.5deg);
    }
    44% {
      transform: translate(10px, -4px) rotate(-0.5deg);
    }
    46% {
      transform: translate(-2px, 2px) rotate(3.5deg);
    }
    48% {
      transform: translate(3px, 4px) rotate(-0.5deg);
    }
    50% {
      transform: translate(8px, 1px) rotate(-1.5deg);
    }
    52% {
      transform: translate(7px, 4px) rotate(-1.5deg);
    }
    54% {
      transform: translate(10px, 8px) rotate(-1.5deg);
    }
    56% {
      transform: translate(-3px, 0px) rotate(-0.5deg);
    }
    58% {
      transform: translate(0px, -1px) rotate(1.5deg);
    }
    60% {
      transform: translate(6px, 9px) rotate(-1.5deg);
    }
    62% {
      transform: translate(-9px, 8px) rotate(0.5deg);
    }
    64% {
      transform: translate(-6px, 10px) rotate(0.5deg);
    }
    66% {
      transform: translate(7px, 0px) rotate(0.5deg);
    }
    68% {
      transform: translate(3px, 8px) rotate(-0.5deg);
    }
    70% {
      transform: translate(-2px, -9px) rotate(1.5deg);
    }
    72% {
      transform: translate(-6px, 2px) rotate(1.5deg);
    }
    74% {
      transform: translate(-2px, 10px) rotate(-1.5deg);
    }
    76% {
      transform: translate(2px, 8px) rotate(2.5deg);
    }
    78% {
      transform: translate(6px, -2px) rotate(-0.5deg);
    }
    80% {
      transform: translate(6px, 8px) rotate(0.5deg);
    }
    82% {
      transform: translate(10px, 9px) rotate(3.5deg);
    }
    84% {
      transform: translate(-3px, -1px) rotate(3.5deg);
    }
    86% {
      transform: translate(1px, 8px) rotate(-2.5deg);
    }
    88% {
      transform: translate(-5px, -9px) rotate(2.5deg);
    }
    90% {
      transform: translate(2px, 8px) rotate(0.5deg);
    }
    92% {
      transform: translate(0px, -1px) rotate(1.5deg);
    }
    94% {
      transform: translate(-8px, -1px) rotate(0.5deg);
    }
    96% {
      transform: translate(-3px, 8px) rotate(-1.5deg);
    }
    98% {
      transform: translate(4px, 8px) rotate(0.5deg);
    }
    0%,
    100% {
      transform: translate(0, 0) rotate(0);
    }
  }
  @keyframes buzz-out {
    0% {
      transform: translateX(3px) rotate(2deg);
    }

    10% {
      transform: translateX(-3px) rotate(-2deg);
    }

    20% {
      transform: translateX(3px) rotate(2deg);
    }

    30% {
      transform: translateX(-3px) rotate(-2deg);
    }

    40% {
      transform: translateX(3px) rotate(2deg);
    }

    50% {
      transform: translateX(-3px) rotate(-2deg);
    }

    60% {
      transform: translateX(3px) rotate(2deg);
    }

    70% {
      transform: translateX(-3px) rotate(-2deg);
    }

    80% {
      transform: translateX(3px) rotate(2deg);
    }

    90% {
      transform: translateX(-3px) rotate(-2deg);
    }

    100% {
      transform: translateX(3px) rotate(2deg);
    }
  }

  .doudong {
    animation: buzz-out 2s 1 ease-in-out;
  }

  .shakeSlow {
    animation: shake-slow 2s 1 ease-in-out;
  }
}
</style>